This is a list of things you need to accomplish to start up a new React project.
- Run
git init
? - Run
npm init
? - Created
.gitignore
? - Made sure
node_modules
is in.gitignore
? - Installed React?
npm install react --save
- Installed the React tools?
npm install react-tools --save
,npm install react-tools -g --save
- Created and populated an
index.html
? - 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:
- Do you have a
/static/script/jsx
directory to hold your JSX files? - Do you have a
/static/script/js
directory to hold your compiled JS files? - Do you have a
/static/script/build
directory to hold your final, compactedindex.js
?
- Do you have a
- The compile pipeline looks something like this:
/jsx/*.jsx -compile-> /js/*.js -compact-and-minify-> /build/index.js
- Created
/static/jsx/app.jsx
?
- The contents of this file must:
- Require and define the React package:
var React = require('react');
- Define the App component:
var App = React.createClass({ ... });
- Render the App component:
React.render(<App />, document.getElementById('app'));
- Require and define the React package:
- Installed Browserify?
npm install browserify --save
- 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:- Translate your JSX files into JS files:
jsx static/src static/build
- Browserify your top-level
app.js
file (which was compiled from its JSX counterpart):browserify static/js/app.js -o static/build/index.js
- Translate your JSX files into JS files:
-
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" }
- 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