Making-a-custom-React-renderer - GitLite

KO | EN

gitlite — search

#javascript #react #typescript #llm #go #golang #linux #macos #java #awesome #kubernetes #awesome-list #pytorch #security

Making-a-custom-React-renderer

(★ 1,314)

Tutorial on how to make a custom React renderer

File Explorer

Download Latest Version (.zip)

- - Text.test.js.snap
- Text.test.js
- App.js
- - index.js
  - Text.js
  - WordDocument.js
- - index.js
- - index.js
- - createElement.js
- index.js
- testRenderer.js
.babelrc
.gitignore
.travis.yml
faq.md
package.json
part-one.md
part-three.md
part-two.md
README.md
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/nitin42/Making-a-custom-React-renderer

Downloads the entire project code from GitHub to your computer.

cd Making-a-custom-React-renderer

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn install

Downloads and installs the libraries listed in package.json.

yarn example

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

<p align="center">
  <img src="https://cdn.filestackcontent.com/5KdzhvGRG61WMQhBa1Ql" width="630" height="350">
</p>

## 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.**

<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/FCRW65HPiwhNtebDx2tTc53E/nitin42/Making-a-custom-React-renderer'>
  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/FCRW65HPiwhNtebDx2tTc53E/nitin42/Making-a-custom-React-renderer.svg' />
</a>