React入门详解

node官网 ：https://nodejs.org/en/

node中文 ： http://nodejs.cn/download/

react官网 ： http://reactjs.cn

react中文 ： https://tianxiangbing.github.io/react-cn/docs/getting-started.html

webpack官网 ：http://webpack.github.io

使用工具有 WebStorm  、 node.js  、npm 、cnpm、 es5 es6 、 webpack 等

第一步：下载node.js 选择稳定版 安装

.

在cmd中或者git中 输入 node -v 显示出版本号

第二步：安装好node.js后，可以直接使用npm，输入 npm -v

第三步：使用安装淘宝镜像（由于国内访问npm速度慢，使用cnpm速度快很多）

输入npm install -g cnpm--registry=https://registry.npm.taobao.org

安装成功后 再将cnpm设置为默认输入

npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功
npm config get registry
-- 或 npm info express

第四步：开始手动建立一个自己的react项目

1.在桌面新建一个文件夹 我取名为 PReact

2.PReact文件夹内新建一个文件夹 取名为 src

3.进入该文件夹进行安装（由于习惯用git 接下来的展示均在git上使用 命令操作跟cmd是一样的）

4.输入 npm init  等待安装

随后弹出相关输入的信息，“name：” 输入时注意，名字要小写

其他可以不输入 一路回车 （为默认值即可）

5.输入 npm install --save react react-dom babelify babel-preset-react

6.（使用es5） 输入 npm install babel-preset-es2015 --save 

7.新建index.html文件，webpack.config.js

并在src上新建文件夹js, 在js文件夹新建入口文件 index.js

8.配置 webpack.config.js文件（直接复制）

var webpack = require('webpack');
var path = require('path');

module.exports = {
    context: __dirname + '/src',
    entry:'./js/index.js',
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        }]
    },
    output: {
        path: __dirname + "/src/",
        filename: "bundle.js"
    }
};
9.全局安装 webpack 输入 npm install -g webpack



安装成功

10.输入 npm install -g webpack-dev-server

安装过程中如果出现提醒警告 无需管 也是安装成功的。

11.输入  npm install webpack-dev-server --save

12.输入  npm install webpack --save

package.json 文件内 加载了两个插件

13.index.js文件

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('example')
);

14.index.html 文件

<didv id="example">123</didv>
<script src="src/js/index.js"></script>

15.直接输入 webpack

报错 按照提示 安装一下 babel-loader

16.输入 npm install babel-loader --save

17. 再输入 webpack

成功

18.index.html 修改为

<did id="example">123</didv>
<script src="src/bundle.js"></script>

打开浏览器 被正确加载