I. Learn HTML, CSS, Java script
If you've never used javascript, it is better to learn some basic about it as well as how html and css works. Basically, these 3 are the basics for web development.The best place to learn or refresh memory about html, css, javascript is at w3schools. It gives examples and allows you to get hands-on experience. You can even practice SQL over there.
Here is also a good tutorial on learning html basic page layout in 5 minutes.
II. Run a Hello World React!
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://fb.me/react-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<section id="example"></section>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
You can copy it to a file and name it myFirstReact.html and run it. It displays "Hello, world!". You will notice ReactDOM.reander(). The "Hello, world!" with h1 tags inside the script section is called JSX. You don't have to use JSX with React, but it is good to use it and it is simple.
III. Download the Starter Kit
Get the development starter kit with a set of examples from React's GitHub site.
Then you can browse the examples and run them.
This is the very best way to learn.
Or learn React through React JSFiddle.
IV. Install npm and react
It is recommended to use React with npm with bundler like browserify or webpack. The following shows installing npm and react and build a bundle with browserify.
1. Install npm
NPM comes with nodejs. Here is the download page.2. Install Browserify
npm install -g browserify
If you encounter any issues, go to this link to check npm documentations.
The above command will install browserify to npm's default directory, which is normally the user local folder.
To find out where is this directory, use the following command.
npm config get prefix
3. Install React
Go to npm's default directory through a command prompt. Then use the following to install React, React DOM.
npm istall --save react react-dom babelify babel-preset-react
4. Bundle with Browserify
Then create a main.js file to build bundle with browserify. Put the following into the main.js to use react and react-dom npm packages. Save the main.js in the npm default directory/node_modules.// main.js var React = require('react'); var ReactDOM = require('react-dom'); ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Then run the following with the command prompt.
browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
5. Install babel for transform of JSX code to js.
npm install --global babel-cli
npm install babel-preset-react
