Skip to content
Tutorial on how to make a custom React renderer
JavaScript
Branch: master
Clone or download
nitin42 Merge pull request #12 from jrop/patch-1
Fix link to createElement
Latest commit 684995a Jul 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ remove Document component Jun 11, 2018
demo remove Document component Jun 11, 2018
src remove Document component Jun 11, 2018
.babelrc Init commit Sep 25, 2017
.gitignore ignore docx file Sep 25, 2017
.travis.yml Init commit Sep 29, 2017
README.md remove Document component Jun 11, 2018
faq.md cleanup Jun 11, 2018
package.json prettier 🎉 Jun 11, 2018
part-one.md Install react-devtools in the local node_modules instead of global Jun 30, 2018
part-three.md Fix link to createElement Jul 10, 2018
part-two.md cleanup Jun 11, 2018
yarn.lock prettier 🎉 Jun 11, 2018

README.md

Building a custom React renderer

Build Status

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 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

In part one, we will create a React reconciler using the react-reconciler package. We will implement the renderer using Fiber as it has a first-class renderer API for creating custom renderer.

Part-II

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

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.

We will use 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

let doc = officegen('docx', { __someOptions__ });

Generating output stream

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 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 for more updates.

Sponsor
You can’t perform that action at this time.