Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nitin42/Making-a-custom-React-renderer
Tutorial on how to make a custom React renderer
https://github.com/nitin42/Making-a-custom-React-renderer
officegen parsing react reconciler tutorial
Last synced: about 2 months ago
JSON representation
Tutorial on how to make a custom React renderer
- Host: GitHub
- URL: https://github.com/nitin42/Making-a-custom-React-renderer
- Owner: nitin42
- Created: 2017-09-24T10:57:21.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T19:46:34.000Z (over 1 year ago)
- Last Synced: 2024-02-04T15:27:01.215Z (5 months ago)
- Topics: officegen, parsing, react, reconciler, tutorial
- Language: JavaScript
- Size: 270 KB
- Stars: 1,296
- Watchers: 21
- Forks: 92
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Lists
- awesome-list - Making-a-custom-React-renderer
- awesome-react-renderer - Making-a-custom-React-renderer - Tutorial on how to make a custom React renderer. (Learn)
- awesome-stars - nitin42/Making-a-custom-React-renderer - Tutorial on how to make a custom React renderer (JavaScript)
- awesome-github-star - Making-a-custom-React-renderer
README
# Building a custom React renderer
[](https://travis-ci.org/nitin42/Making-a-custom-React-renderer)
> Let's make a custom React renderer 😎
## Introduction
This is a small tutorial on how to build your custom React renderer and render the components to the host environment you need. The tutorial is divided into three parts -
* **Part 1** - Creating a React reconciler (using [`react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler) package).
* **Part 2** - Creating a public interface to the reconciler i.e "Renderer".
* **Part 3** - Creating a render method to flush everything to the host environment we need.
## Brief
### [Part-I](./part-one.md)
In part one, we will create a React reconciler using the [`react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler) package. We will implement the renderer using Fiber as it has a first-class renderer API for creating custom renderer.
### [Part-II](./part-two.md)
In part two, we will create a public interface to the reconciler i.e a renderer. We will create a custom method for `createElement` and will also architect the component API for our example.
### [Part-III](./part-three.md)
In part three, we will create a render method which will render our input component.
## What we will build?
We will create a custom renderer that will render a React component to a word document. I've already made one. Full source code and the documentation for that is available [here](https://github.com/nitin42/redocx).
We will use [officegen](https://github.com/Ziv-Barber/officegen) for this. I'll explain some of it's basic concepts here.
Officegen can generate Open Office XML files for Microsoft Office 2007 and later. It generates a output stream and not a file.
It is independent of any output tool.
**Creating a document object**
```js
let doc = officegen('docx', { __someOptions__ });
```
**Generating output stream**
```js
let output = fs.createWriteStream (__filePath__);
doc.generate(output);
```
**Events**
`finalize` - It is fired after a stream has been generated successfully.
`error` - Fired when there are any errors
## Running the project
```
git clone https://github.com/nitin42/Making-a-custom-React-renderer
cd Making-a-custom-React-renderer
yarn install
yarn example
```
After you run `yarn example`, a docx file will be generated in the [demo](./demo) folder.
## Contributing
Suggestions to improve the tutorial are welcome 😃.
**If you've completed the tutorial successfully, you can either watch/star this repo or follow me on [twitter](https://twitter.com/NTulswani) for more updates.**
