1.React简介
-
React背景：Facebook需解决的问题:构建数据不断变化的大型应用。
-
React特点：简单，声明式
核心：组件，设计目的提高代码复用率（将数据和逻辑封装），降低测试难度(组件高内聚低耦合，容易测试) -
React虚拟DOM
虚拟DOM结构
虚拟dom的结构能够将html的node节点的比较的算法复杂度从O(n^3)降低到O(n),操作dom的速度更快。
为什么快
diff算法
2.环境搭建
2.1 方式一：使用CDN Links搭建开发环境
这里可以看不同的版本号：https://cdnjs.com/libraries/react/16.0.0
开发环境，在html中引入如下script：16表示版本号，可以替换
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
部署环境，在html中引入
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
- demo1：Hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
//两个参数，一个是标签，一个是放置的位置。这里是在body中放入h1标签
ReactDOM.render(<h1>Hello, world!</h1>,document.body);
</script>
</body>
</html>
2.2 方式二使用npm搭建
2.2.1 创建一个新的React应用
官网：https://reactjs.org/docs/add-react-to-a-new-app.html
- 1） 安装node.js和npm
进入nodejs官网下载node https://nodejs.org/en/
下载对应版本
我下载了node8.9.3版本，包括npm 5.5.1版本
下载完成后安装该文件
安装完成
【1】打开命令行，cmd或者Windows PowerShell
【2】查看node版本
node -v
【3】更改npm默认安装路径
默认是在c:\Users\Administrator\AppData里面安装，装在c盘很乱不舒服。先修改位置。
在nodejs里面创建了两个文件夹，node_globe,node_cache作为npm默认路径。
【4】更改npm安装默认的源
npm config set registry https://registry.npm.taobao.org
npm info underscore （如果上面配置正确这个命令会有字符串response）
【5】配置系统环境变量
系统变量里面找到Path
点击编辑，添加默认安装路径，我的是F:\nodejs\node_global
- 2）安装react脚本架
npm install -g create-react-app
安装成功
- 3）cd到项目目录，创建自己的react app，这里我创建的应用名为react-learn
create-react-app my-app
项目目录
创建app
创建成功
- 4）进入创建的项目目录，执行如下命令
cd react-learn
npm start
执行成功
网页输入网址，显示如下，成功
-
5）用intellij打开
配置run configurations
之后可以直接点击run按钮，就可以启动项目
2.2.2 为已有的项目添加react开发环境
官网：https://reactjs.org/docs/add-react-to-an-existing-app.html
创建好的react-existing项目源码：
- 1)参考2.2.1安装node.js和npm
- 2）安装需要的包
【1】进入到项目目录下，执行如下命令
npm init
我的项目目录，目前是空的
执行完成后项目中会生成package.json文件
【2】在项目目录下安装react所用的包
--save会将安装的包相关信息写入package.json中
npm install --save react react-dom
安装过程
安装完成项目目录
package.json
【3】在项目目录下安装babel相关的包支持ES6转译成ES5
npm install --save babelify babel-preset-react babel-preset-es2015
安装命令
可以看到安装完成后有一个警告，说需要babel-core包
所以在项目目录安装babel-core
安装完成
package.json文件
【4】webpack热加载配置
-
需要webpack的原因
用编辑器打开项目，创建index.html文件，和index.js文件
index.js
index.html
运行错误，不能识别index.js第四行,react的语法
- 1）webpack安装
首先在全局环境中安装
npm install -g webpack
npm install -g webpack-dev-server
全局安装webpack
全局安装webpack-dev-server
之后在项目目录中安装,进入到项目目录中
npm install webpack --save
npm install webpack-dev-server --save
安装webpack
安装webpack-dev-server
package.json文件内容发生变化
-
2）在项目中创建webpack.config.js文件
项目目录
webpack.config.js内容：
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname),
devtool: debug ? "inline-sourcemap" : null,
entry: "./src/js/index.js",
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
},
output: {
path: __dirname,
filename: "./src/bundle.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};
-
3）进入项目目录执行webpack命令
webpack命令
可以看到报错说没有babel-loader包
进入项目目录执行如下命令
npm install babel-loader --save
再执行webpack
index.html的src改为bundle.js
重新运行可以看到helloworld
- 4）为了能够实时监测js的改变，并且实时打包。
webpack --watch
之后更改js文件就会实时webpack。
- 【5】保存之后页面自动刷新的功能(项目重新运行只需要进入项目目录执行该命令即可)
在项目目录下,执行如下命令
webpack-dev-server
网友评论