react — 搭建开发环境

Techgogogo

2019-06-27

关注关注

reactJs简介

React 是Facebook开发的JavaScript 库。facebook通过Flux和React实现组件化开发。flux是系统架构，利用单向的数据流补充了React的组合试图组件。
react主要有四个主要概念构成：

Virtual DOM
虚拟DOM在很大程度上缩短了网页的响应时间。web应用中通常会有大量的DOM操作，react在每次渲染时，会比较当前的DOM内容和待渲染内容的差异，然后再最优的更新DOM。
另外，React引入虚拟DOM更重要的意义是提供了一种一致的开发方式来开发服务端应用、Web应用和手机端应用。因为有了虚拟DOM这一层，所以通过配备不同的渲染器，就可以将虚拟DOM的内容渲染到不同的平台。而应用开发者，使用JavaScript就可以通吃各个平台了。
虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是 Diff部分，因而能达到提高性能的目的
组件化
将不同的功能模块拆分为组件，每个组件单独封装，之关心自己部分的逻辑，提高组件的可重用性，实现松耦合。
React组件名称的首字母应当大写。
JSX
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
Jsx语法使用
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。
DataFlow单向数据流

环境搭建

安装nodejs

react开发通过npm进行包管理。

项目搭建

新建文件夹。新建一个文件夹，比如demo
初始化package.json。在文件夹目录下，执行npm init，初始化一个package.json文件，这个文件中配置了项目的依赖，类似于maven中的pom.xml文件。
安装依赖。
有两种方法：
在package.json文件中添加dependencies和devDependencies
通过npm install --save、npm install --save-dev安装依赖，则会自动添加到package.json文件中。
dependencies：react、react-dom、babel-polyfill、babel-runtime
devDependencies：webpack、webpack-cli、webpack-dev-middleware、webpack-hot-middleware、webpack-dev-server、babel-core、babel-loader、babel-preset-es2015、babel-preset-es2015-loose、babel-plugin-check-es2015-constants、babel-preset-react、babel-preset-stage-X 、react-hot-loader、expres等等。
实际安装的依赖根据项目来确定。

创建webpack.config.js
该文件是webpack打包的配置文件。
devtool：生成source-map，使编译后的代码可读性更高，开发阶段调试使用。

source-map：在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
   eval-source-map：使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；

entry：是页面入口文件配置（html文件引入唯一的js 文件）
output：对应输出项配置

path ：入口文件最终要输出到哪里，
   filename：输出文件的名称，
   publicPath：公共资源路径。

module：加载louder

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
   loader：loader的名称（必须）
   include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
   query：为loaders提供额外的设置选项（可选）。

var webpack = require('webpack');
module.exports = {
    entry: './src/index.js',//入口文件
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,

            use: {
                loader: 'babel-loader',
                options: {
                    presets:['es2015', 'react', 'stage-2']
                }
            }
        }, {
            test: /\.css$/,
            use: {
                loader: 'style-loader!css-loader',
            }
        }]
    },
    watch:true
};

创建文件
a). 创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app-container"></div>
    <script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

b). 创建App.js
这是一个class，所以首字母需要大写

import React from 'react';
class App extends React.Component {
    render(){ // Every react component has a render method.
        return <h1>Hello World!</h1>;
    }
}
export default App;

c). 创建index.js
调用App.js，并加载到app-container中。

import React from "react";
import {render} from "react-dom"
import App from "./App.js"

render(
    <App></App>,
    document.getElementById("app-container")
)

访问index.html即可看到：

react — 搭建开发环境