Generator-react-gen NPM

Generate a starting point for your react app

The react-gen generator is a yeoman generator that creates an app using the same structure detailed in the the blog post detailing cloning yelp with React.

Using this generator gives you a sane react structure with the following technologies:

Webpack with hot module reloading (hjs-webpack)
PostCSS and CSS modules, including autoprefixer, precss
Global CSS loading
React / ReactDOM
react-router
Nested routing with multiple views
Testing with karma, mocha, chai
React component testing helper enzyme
Multiple deployment environments with dotenv configuration
Babel with react, stage-0, and es2015
font-awesome
and more

Installation

First, install Yeoman and generator-react-gen using npm (we assume you have pre-installed node.js).

npm install -g yo
npm install -g generator-react-gen

Then generate your new project, answer some questions about your project, and go!

yo react-gen

Workflow

Open your app in a text editor and start to work. To run the application, use the npm start script. This will boot a server with hot module reloading:

npm run start

To run the tests in our app, we can use the npm run test script. This sets up enzyme, boots the tests with karma, and executes them:

npm run test

As we're writing tests, sometimes it's just easier to run the tests as we update and edit files. The generator makes this easy using the npm run test:watch script. Run this command and then any changes to the files in our project will cause the tests to be run:

npm run test:watch

To build the app for distribution, we can use the npm run build command:

npm run build

Features

Wanna add redux to the mix? No problem, pass the feature flag of --redux when calling generate, i.e.:

yo react-gen --redux

The --redux flag will also install the redux-devtools, hidden by default. Pressing the combination of Ctrl+h will make them visible.

Contributing

git clone https://github.com/fullstackreact/redux-modules.git
cd redux-modules
npm install
npm start

Fullstack React Book

This generator was built alongside the blog post React Tutorial: Cloning Yelp.

This repo was written and is maintained by the Fullstack React team. In the book, we cover many more projects like this. We walk through each line of code, explain why it's there and how it works.