Latest web development tutorials

React installation

React can be downloaded directly using the download package also provides many examples of learning.

This tutorial uses React version is 0.14.7, you can at the official website http://facebook.github.io/react/ download the latest version.

You can also use direct this tutorial React CDN library, at the following address: 

<script src="http://static.w3big.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.w3big.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.w3big.com/assets/react/browser.min.js"></script>

Example

The following examples of output Hello, world! 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.w3big.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.w3big.com/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

try it"

Analysis examples:

Example we introduced three libraries: react.min.js, react-dom.min.js and browser.min.js:

  • react.min.js - React core library
  • react-dom.min.js - providing DOM-related functions
  • browser.min.js - for JSX syntax into JavaScript syntax 
ReactDOM.render(
	<h1>Hello, world!</h1>,
	document.getElementById('example')
);

The above code a h1 heading, insert id = "example" node.

note:

If we need to use the JSX, the type attribute <script> tag should be set to text / babel.

React by using npm

If your system does not support Node.js and NPM can refer to our Node.js tutorial .

We recommend the use of a modular system in CommonJS React, such browserify or webpack, this tutorial uses webpack.

First, install the global package 

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

Next, create the root directory

Create a root directory, the directory named: reactApp, then use npm init initialization file generated package.json: 

$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) w3big-react-test
version: (1.0.0) 
description: 本教程 react 测试
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/tianqixin/www/reactApp/package.json:

{
  "name": "w3big-react-test",
  "version": "1.0.0",
  "description": "本教程 react 测试",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

The third step is to add dependencies and plug-ins

Because we want to use React, so we need to install it, - save command is used to add packages to package.json file. 

$ npm install react --save
$ npm install react-dom --save

At the same time we have to install someplug-babel

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

The fourth step is to create a file

Next, we create the necessary files: 

$ touch index.html
$ touch App.jsx
$ touch main.js
$ touch webpack.config.js

The fifth step, set the compiler, server, loader

Openwebpack.config.js file add the following code:

 var config = {
   entry: './main.js',
	
   output: {
      path:'./',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 7777
   },
	
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',
			
         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
	
}

module.exports = config;
  • entry: the entry specified package file main.js.
  • output: Configuration package result, path defined output folder, filename defines the name of the file to package the results.
  • devServer: set the server port number is 7777,after the port you can set yourself.
  • module: defines the processing logic of the module, where you can define a series of loaders with loader, as well as some regular.When the file to load test match of the regular time, it will call back the loader file is processed, which is webpack powerful reasons.

Now openpackage.json file, find the "scripts"in the"test" "echo \" Error: no test specified \ "&& exit 1" to replace with the following code: 

"start": "webpack-dev-server --hot"

Package.json file contents after replacement as follows:

$ cat package.json 
{
  "name": "w3big-react-test",
  "version": "1.0.0",
  "description": "本教程 react 测试",
  "main": "index.js",
  "scripts": {
	"start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  }
}

Now we can usenpm start command to start the service.--hot command will reload after the file changes, so that we do not need to refresh your browser after modifying the code will be able to see the change.

The sixth step, index.html

Settingdiv id = "app" as the root element of our applications, and the introduction of index.jsscript file. 

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "UTF-8">
      <title>React App - 本教程(w3big.com)</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

Seventh step, App.jsx and main.js

This is the first component react. A later chapter we will detail React components. This component will outputHello World !!!.

App.jsx file code 

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!<br />
            欢迎来到本教程学习！！！
         </div>
      );
   }
}

export default App;

We need to introduce the component and rendered to the root elementApp, so that we can see it in your browser.

main.js file code 

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'))

note:

If you want the component can be used in any application, export it requires the use ofexport after it is created, using the component files using importimport.

Step eight, running services

After completing the above configuration, we can run the service: 

$ npm start

Browser tohttp: // localhost: 7777 /, output results are as follows:

Download the complete example

More test cases for each file download address: http://static.w3big.com/download/reactApp.zip .