01.React概述及环境搭建

2018-01-29 本文已影响0人 Ching_Lee

1.React简介

React背景：Facebook需解决的问题:构建数据不断变化的大型应用。
React特点：简单，声明式
核心：组件，设计目的提高代码复用率（将数据和逻辑封装），降低测试难度(组件高内聚低耦合，容易测试)
React虚拟DOM

虚拟DOM结构

虚拟dom的结构能够将html的node节点的比较的算法复杂度从O(n^3)降低到O(n),操作dom的速度更快。

为什么快
diff算法
官网：
https://github.com/facebook/react/
https://reactjs.org/

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

创建成功

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 }),
  ],
};