React入门实例

前言

　　React 的核心思想是：封装组件，各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。

理解：react首先值得拍手称赞的是它所有的开发都基于一个组件（component），组件和组件之间传递方法，而且每个组件都有一个状态（state），当方法改变了这个状态值时，整个组件就会重绘，从而达到刷新，另外，说到重绘就要提到虚拟dom了，就是用js模拟dom结构，等整个组件的dom更新完毕，才渲染到页面，简单来说只更新了相比之前改变了的部分，而不是全部刷新，所以效率很高。

项目初始化

大家先新建一个项目文件夹，在里面建一个项目信息的文件package.json:

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "我的第一个react案例",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "张三",
  "license": "ISC",
  "dependencies": {
    "react": "^0.13.3",
    "sass": "^0.5.0"
  },
  "devDependencies": {
    "babel-core": "^5.5.8",
    "babel-loader": "^5.1.4",
    "css-loader": "^0.14.5",
    "file-loader": "^0.8.4",
    "jsx-loader": "^0.13.2",
    "node-libs-browser": "^0.5.2",
    "node-sass": "^3.2.0",
    "sass-loader": "^1.0.2",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.9.11"
  }
}

建好之后，运行命令：npm install  安装项目依赖的所有模块。

webpack配置

项目使用的技术方案是：webpack＋react＋es6。在项目文件夹下新建一个webpack.config.js：

'use strict';
module.exports = {
    entry: [
        "./src/entry.js"  // 入口文件是src文件夹里的entry.js
    ],
    output: {
        path: './out/',
        filename: "bundle.js" // 输出文件是out文件夹的bundle.js
    },
    // externals属性是告诉webpack当遇到require('react')的时候，不去处理并且默认为全局的React变量。
    // 这样子，我们就需要在index.html单独用src去加载js。
    externals: {
        'react': 'React'
    },
    module: {
        // 配置的loaders：
        loaders: [
            { test: /\.js$/, loader: "jsx!babel", include: /src/},
            { test: /\.css$/, loader: "style!css"},
            { test: /\.scss$/, loader: "style!css!sass"},
            { test: /\.(png|jpg)$/, loader: 'url?limit=8192'}
        ]
    }
};