New React Project Checklist

new-react-project-checklist.md

New React Project Checklist

This is a list of things you need to accomplish to start up a new React project.

Have you...

1. Run git init?
2. Run npm init?
3. Created .gitignore?
4. Made sure node_modules is in .gitignore?
5. Installed React? npm install react --save
6. Installed the React tools? npm install react-tools --save, npm install react-tools -g --save
7. Created and populated an index.html?
8. Created a /static/script directory?

• The thing about React is that if you're going to be using JSX, you want to have one directory for your original JSX files, another directory for your compiled JS files, and another directory for your actual distribution. Thus, you need three directories:
  1. Do you have a /static/script/jsx directory to hold your JSX files?
  2. Do you have a /static/script/js directory to hold your compiled JS files?
  3. Do you have a /static/script/build directory to hold your final, compacted index.js?
• The compile pipeline looks something like this: /jsx/*.jsx -compile-> /js/*.js -compact-and-minify-> /build/index.js

1. Created /static/jsx/app.jsx?

• The contents of this file must:
  1. Require and define the React package: var React = require('react');
  2. Define the App component: var App = React.createClass({ ... });
  3. Render the App component: React.render(<App />, document.getElementById('app'));

1. Installed Browserify? npm install browserify --save
2. Created an NPM build script? npm build

• In order to use React and JSX in the browser, you must use Browserify. Browserify allows you to use Node require syntax for your apps. To make things simpler, you need a script that does these things:

  1. Translate your JSX files into JS files: jsx static/src static/build
  2. Browserify your top-level app.js file (which was compiled from its JSX counterpart): browserify static/js/app.js -o static/build/index.js

• Ideally, you minify this resulting index.js file. That's up to you.

• So, let's make an NPM script!

  "scripts": { "compile": "jsx -x jsx static/script/jsx/ static/script/js/", "browserify": "browserify static/script/js/app.js -o static/script/build/index.js", "build": "echo "Built files."", "prebuild": "npm run browserify", "prebrowserify": "npm run compile" }

1. Referenced the build script in your HTML file before the end of the body element? <script type="text/javascript" src="/static/script/build/index.js"></script>

If you're installing React via npm you'll also need browserify to compile and use it from the web, like this: https://github.com/nicksergeant/nicksergeant.com/blob/master/Makefile#L3

Included it in the script, thank you for reminding me :)