Name: react-gen-generator
Owner: Fullstack React
Description: Generator for the yelp-clone template format
Created: 2016-05-27 20:30:40.0
Updated: 2018-04-29 20:20:24.0
Pushed: 2016-08-06 03:56:29.0
Homepage: null
Size: 47
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
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:
First, install Yeoman and generator-react-gen using npm (we assume you have pre-installed node.js).
install -g yo
install -g generator-react-gen
Then generate your new project, answer some questions about your project, and go!
eact-gen
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:
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:
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:
run test:watch
To build the app for distribution, we can use the npm run build command:
run build
Wanna add redux to the mix? No problem, pass the feature flag of --redux when calling generate, i.e.:
eact-gen --redux
The --redux flag will also install the redux-devtools, hidden by default. Pressing the combination of Ctrl+h will make them visible.
clone https://github.com/fullstackreact/redux-modules.git
edux-modules
install
start
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.