前言
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'} ] } };
|