React学习之环境搭建

首先，开始学习React的时候，可以牛刀小试一下，在浏览器端，在官方网站https://facebook.github.io/react/  查看demo演示。

建立一个demo.html文件粘贴以上代码进去，直接运行，就可以在浏览器上看到结果。

备注：在 https://facebook.github.io/react/docs/installation.html 下载html文件。

浏览器执行必须引入的react.js，react-dom.js , babel.min.js三个文件。react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，babel.min是Babel提供的转换器脚本，可以在浏览器运行。不过从Babel6.0开始，不再直接提供浏览器版本，而是要用构建工具引入。

安装nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效，它的包管理器 npm，是全球最大的开源库生态系统。

官方地址： http://nodejs.cn/download/

根据自己的系统选择相应的安装文件下载安装

安装后在终端运行

node -v

npm -v

会显示相应的版本，就表示安装成功了。

现在我们来进行一个简单的项目，首先我们看一下目录结构如下：

1.创建一个文件夹，命名为demo

2.在demo目录下创建app文件夹，在app文件夹下创建一个index.js的文件

文件内容：

import React from 'react';

import ReactDOM from 'react-dom';

class HelloMessage extends React.Component{   

render(){       

return  Hello {this.props.name}

}}

ReactDOM.render(, document.getElementById( 'app' ) );

3.在demo目录下创建index.html文件，文件内容如下：

4.在demo目录下，添加 .babelrc  文件 和 webpack.config.js文件，内容如下：

.babelrc

{ "presets": ["es2015","react"] }

webpack.config.js

var path = require('path'),

webpack = require('webpack'),

HtmlwebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './app/index.js',

output: {

path: path.resolve(__dirname, './build'),

filename: 'bundle.js'

},

module: {

loaders: [

{

test: /\.jsx?$/,

loader: 'babel-loader',

exclude: /node_modules/

}

]

},

devServer: {

inline: true,

port: 8099

},

plugins: [

new HtmlwebpackPlugin({

template: "./index.html"

}),

new webpack.HotModuleReplacementPlugin(),

new webpack.NamedModulesPlugin(),

new webpack.NoEmitOnErrorsPlugin()

]

}

5.进入到命令行，到项目文件夹下 运行npm init 命令，会出现如下的步骤，可以一直回车下去，完成后会在目录下生成package.json文件

6.下一步在命令行下继续运行命令如下：

npm install react react-dom --save-dev

npm install webpack --save-dev

npm install babel-loader --save-dev

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

npm install html-webpack-plugin --save-dev

一次一条命令，慢慢等待。安装完成后 package.json文件会自动更新，如下：

{

"name": "demo3",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack"

},

"author": "",

"license": "ISC",

"devDependencies": {

"babel-core": "^6.26.0",

"babel-loader": "^7.1.2",

"babel-preset-es2015": "^6.24.1",

"babel-preset-react": "^6.24.1",

"html-webpack-plugin": "^2.30.1",

"react": "^15.6.1",

"react-dom": "^15.6.1",

"webpack": "^3.5.5"

}

}

运行npm run build显示如下，编译成功，会在项目根目录下生成build文件夹，

直接打开build的文件夹下生成的index.html文件，打开显示如下：

这样整个demo就完成了。

先学着做，然后再研究原理。

You can do it。