React Get Started
React is component-based.
To make React app, there are a lot of ways. So far,there are no standard way and people select their own way to make it.
In this entry, I introduced simple ways for learning at first.
Easy way to learn is reading React tutorial Tutorial React
But tutorial codes skip some parts to run on the local. I tried to run all on the local by filling skip parts.
Anyway, as first step, prepare environment first React app.
We can download Starter Kit from https://facebook.github.io/react/downloads.html
This starter kit includes compiled react and react-dom
Starter kit is easy to use.
project |- react-15.3.1 | |- build | |- react.js | |- react-dom.js |- src | |- helloworld.js |- helloworld.html
This is entry html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Hello React</title> <script src="react-15.3.1/build/react.js"></script> <script src="react-15.3.1/build/react-dom.js"></script> <script src="https://firstname.lastname@example.org/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel" src="src/helloworld.js"></script> </body> </html>
Import react and react dom from react starter kit
And use babel-core browser.min.js to work with jsx.
HTML body has div and script tag.
script type is babel. src/helloworld.js source is jsx based.
Let’s take a look.
ReactDOM.render( <h1>Hello world!</h1>, document.getElementById('example') );
Render dom in div
The code is jsx.
※ I use webstrom as editor. jsx code should have .jsx prefix. helloworld.js is recognized as js, so IDE warns. Of course, we can change from .js to .jsx
To work with tutorial from React, we need template.
React source file and some other useful libs to learn React is included.
This is template
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Tutorial</title> <script src="https://email@example.com/dist/react.js"></script> <script src="https://firstname.lastname@example.org/dist/react-dom.js"></script> <script src="https://email@example.com/browser.min.js"></script> <script src="https://firstname.lastname@example.org/dist/jquery.min.js"></script> <script src="https://email@example.com/dist/remarkable.min.js"></script> </head> <body> <div id="content"></div> <script type="text/babel" src="src/tutorial1.jsx"></script> </body> </html>
To change src/tutorial1.jsx, we can run react on the local.
Preparation was done. Let’s learn React.