A helper that makes it extremely easy to add react to your node app.
npm install react-helper
npm install react-helper --save react-helper init -w
* Extremely easy to add react components to your views.
Controller:
``javascript`
const reactHelper = require('react-helper');
const component = reactHelper.renderComponent('SignUp')
res.render('view-to-render', {component})
View: _example using handlebars templating engine_
`html`
This view has react in it
{{{component}}}
* Pass server-side data to components: You can _easily_ pass data from your server to your react components.
Controller: _example passing results from mongo query to react component_
`javascript`
db.collection('users').find().toArray(function(err, users) {
const component = reactHelper.renderComponent('ListUsers', users)
return res.render('view-to-render', {component})
}
* Server-side rendering: use the full power of react by server-side rendering your components by just passing the react component (or its relative path) to react helper instead of a string.
Controller: _example passing results from mongo query to react component_
`javascript`
const reactHelper = require('react-helper');
const SignUp = require('../path/to/SignUp');
const component = reactHelper.renderComponent(SignUp) //IT'S THIS EASY
res.render('view-to-render', {component})
_For the examples, I will be using showing snippets of code from an express application using handlebars templating engine, but this helper will work with any framework and templating engine_
1. Create a directory where you will be keeping all of your react code (something like "client"). An express app usually looks similar to this:
`javascript`
project/
controllers/
middlewares/
models/
public/
views/
client/ //<-- New directory
2. Within the client directory you will need to create a file that will register your components with react-helper. This file will also be your _entry point_ for webpack (more on that later).
That file should live here:
`javascript`
...
views/
client/
//Other organizational directories for your react code
components/
index.js // <-- New file
The file should look something like this:
javascript
const reactHelper = require('reactHelper');
const SomeComponent = require('./path/to/a/component');
// Require all components you want to use in your views...
reactHelper.register({SomeComponent});
// Register each of the components you will be using in your views
reactHelper.register({OtherComponent});
`
3. Then, in your controller (or whatever code renders your view template) all you have to do is call react-helper's "renderComponent", and pass the results to your view:
Controller:
javascript`
const reactHelper = require('react-helper');
const component = reactHelper.renderComponent('SignUp')
res.render('view-to-render', {component})
View:
`html`
This view has react in it
{{{component}}}
1. The only requirement react-helper has for the webpack config is that the entry point is the file that registers all of the components using react-helper.
In the example above it would look something like this:
`javascript`
entry: [
'./client/index.js'
],
2. Then, assuming your webpack's output looks something like:
`javascript`
output: {
filename: 'react-bundle.js',
path: './public/javascript',
},
Adding it to your application would look just like adding any other local javascript file.
const reactHelper = require('react-helper')
const path = require('path')
const component = reactHelper.renderComponent(path.join(__dirname, '../path/to/SignUp'))
res.render('view-to-render', {component})
2. Pass the component itself to renderComponent.
const reactHelper = require('react-helper');
const SignUp = require('../path/to/SignUp');
const component = reactHelper.renderComponent(SignUp)
res.render('view-to-render', {component})