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 1 month 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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T19:46:34.000Z (about 2 years ago)
• Last Synced: 2024-10-12T16:09:58.620Z (2 months ago)
• Topics: officegen, parsing, react, reconciler, tutorial
• Language: JavaScript
• Size: 270 KB
• Stars: 1,310
• Watchers: 21
• Forks: 92
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - Making-a-custom-React-renderer
• 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)

README

        
# Building a custom React renderer

[![Build Status](https://travis-ci.org/nitin42/Making-a-custom-React-renderer.svg?branch=master)](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.**