{"id":15605504,"url":"https://github.com/tswayne/react-helper","last_synced_at":"2025-07-31T12:37:18.141Z","repository":{"id":73761572,"uuid":"69179025","full_name":"tswayne/react-helper","owner":"tswayne","description":"Easily add react to your pre-existing (or new) mvc node application","archived":false,"fork":false,"pushed_at":"2023-03-07T03:11:03.000Z","size":91,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-11T22:12:51.349Z","etag":null,"topics":["express","mvc","node","nodejs","react","react-components","sailsjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tswayne.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-25T17:22:31.000Z","updated_at":"2024-05-31T02:23:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"d0151d1d-91d0-4c4d-a451-548496aa69bb","html_url":"https://github.com/tswayne/react-helper","commit_stats":{"total_commits":56,"total_committers":2,"mean_commits":28.0,"dds":"0.017857142857142905","last_synced_commit":"3027c2e0766904564f45c7342ffedddf726370b6"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tswayne%2Freact-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tswayne%2Freact-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tswayne%2Freact-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tswayne%2Freact-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tswayne","download_url":"https://codeload.github.com/tswayne/react-helper/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231579999,"owners_count":18395374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","mvc","node","nodejs","react","react-components","sailsjs"],"created_at":"2024-10-03T04:07:35.814Z","updated_at":"2024-12-28T03:18:24.789Z","avatar_url":"https://github.com/tswayne.png","language":"JavaScript","readme":"[![npm](https://img.shields.io/npm/v/react-helper.svg)](https://www.npmjs.com/package/react-helper)\n[![Build Status](https://travis-ci.org/tswayne/react-helper.svg?branch=master)](https://travis-ci.org/tswayne/react-helper)\n\n# React Helper\n### Easily add react to your pre-existing (or new) mvc node application\nThere are tons of resources and tools out there to help developers get started with react and start a fresh new react app; however, there\nare not many tools out there to help those who want to add react to an existing app (built with node).  React-helper makes it extremely easy to\nadd react components to your views, so you can jump right into writing react components without having to worry too much about setup.\n\n## Installing\n##### Adding to your app\n`npm install react-helper --save`\n\n### Table of Contents\n  * [Features](#features)\n  * [Getting Started](#getting-started)\n    * [Manually adding react-helper](#manual)\n    * [Setup](#setup)\n  * [Server Side Rendering](#server-side)\n  * [Express, Sails, and Hapi](#frameworks)\n  * [Example application](#example)\n\n\u003ca id=\"features\"\u003e\u003c/a\u003e\n\n## Features:\n* Setting up is a breeze.  Add react to your app with one command using the cli.\n\n  `react-helper init -w`\n  \n* Extremely easy to add react components to your views.\n\n  **Controller**:\n      \n   ```javascript\n   const reactHelper = require('react-helper');\n   const component = reactHelper.renderComponent('SignUp')\n   res.render('view-to-render', {component})\n   ```\n\n  **View**: _example using handlebars templating engine_\n      \n   ```html\n   \u003ch1\u003eThis view has react in it\u003c/h1\u003e\n   {{{component}}}\n   ```\n* Pass server-side data to components: You can _easily_ pass data from your server to your react components.\n\n  **Controller**: _example passing results from mongo query to react component_\n      \n   ```javascript\n   db.collection('users').find().toArray(function(err, users) {\n     const component = reactHelper.renderComponent('ListUsers', users)\n     return res.render('view-to-render', {component})\n   }\n   ```\n      \n* 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.\n\n   **Controller**: _example passing results from mongo query to react component_\n   \n   ```javascript\n   const reactHelper = require('react-helper');\n   const SignUp = require('../path/to/SignUp');\n   const component = reactHelper.renderComponent(SignUp) //IT'S THIS EASY\n   res.render('view-to-render', {component})      \n   ```\n\u003ca id=\"getting-started\"\u003e\u003c/a\u003e\n\n## Getting started\n   \n\u003ca id=\"manual\"\u003e\u003c/a\u003e\n\n### Manually add react-helper to your application\n   Getting started is simple: \n\n   _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_\n\n   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:\n   ```javascript\n   project/\n     controllers/\n     middlewares/\n     models/\n     public/\n     views/\n     client/  //\u003c-- New directory  \n   ```\n\n   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).\n\n\n   That file should live here:\n   ```javascript\n     ...\n     views/\n     client/\n       //Other organizational directories for your react code\n       components/\n       index.js  // \u003c-- New file\n   ```\n   The file should look something like this:\n   ```javascript\n   const reactHelper = require('reactHelper');\n   const SomeComponent = require('./path/to/a/component');\n   // Require all components you want to use in your views...\n\n\n   reactHelper.register({SomeComponent});\n   // Register each of the components you will be using in your views\n   reactHelper.register({OtherComponent});\n   ```\n   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:\n   \n   **Controller**:\n   ```javascript\n   const reactHelper = require('react-helper');\n   const component = reactHelper.renderComponent('SignUp')\n   res.render('view-to-render', {component})\n   ```\n\n   **View**:\n   ```html\n   \u003ch1\u003eThis view has react in it\u003c/h1\u003e\n   {{{component}}}\n   ```\n   \n\u003ca id=\"setup\"\u003e\u003c/a\u003e\n\n### Setup\n   \n   The only setup needed is to add webpack to your project, point it to the react-helper registration file, and include the resulting javascript file in your project.\n\n   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.\n\n   In the example above it would look something like this:\n   ```javascript\n   entry: [\n     './client/index.js'\n   ],\n   ```\n\n   2. Then, assuming your webpack's output looks something like: \n\n   ```javascript\n   output: {\n     filename: 'react-bundle.js',\n     path: './public/javascript',\n   },\n   ```\n\n   Adding it to your application would look just like adding any other local javascript file.\n\n   ```html\n   \u003cscript src=\"public/javascript/react-bundle.js\"\u003e\u003c/script\u003e\n   ```\n   \n\u003ca id=\"server-side\"\u003e\u003c/a\u003e\n\n## Server side rendering\n   Server-side rendering can be very [useful](https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/).  This library makes it very easy to server-side render your components.  There are two methods to server-side rendering:\n   **If you are using JSX in your components and would like to render your components server side** - you must use [babel-register](https://babeljs.io/docs/usage/babel-register/) or pre-compile your files, see https://github.com/babel/example-node-server as an example.  More coming soon.\n   \n1. In your controller, pass the relative path of your component instead of the registered component name to renderComponent:\n   ```\n   const reactHelper = require('react-helper')\n   const path = require('path')\n   const component = reactHelper.renderComponent(path.join(__dirname, '../path/to/SignUp'))\n   res.render('view-to-render', {component})\n   ```\n   \n2. Pass the component itself to renderComponent.\n   ```\n   const reactHelper = require('react-helper');\n   const SignUp = require('../path/to/SignUp');\n   const component = reactHelper.renderComponent(SignUp)\n   res.render('view-to-render', {component})\n   ```\n   \n\u003ca id=\"frameworks\"\u003e\u003c/a\u003e\n\n## Express, Sails, and Hapi\nAdd react-helper to your favorite node framework by using [express-react-helper](https://github.com/tswayne/express-react-helper) or [hapi-react-helper](https://github.com/tswayne/hapi-react-helper)!\n   \n## Shout out!\nThis library is inspired by React On Rails (https://github.com/shakacode/react_on_rails), a library that makes it insanely easy to add react to a Rails application. \n\n## Contributing\nFeel free to open issues or pull requests!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftswayne%2Freact-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftswayne%2Freact-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftswayne%2Freact-helper/lists"}