react — 搭建开发环境

时间 2019-12-10

原文原文链接

reactJs简介

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

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进行包管理。css

项目搭建

新建文件夹。新建一个文件夹，好比demo
初始化package.json。在文件夹目录下，执行npm init，初始化一个package.json文件，这个文件中配置了项目的依赖，相似于maven中的pom.xml文件。
安装依赖。
有两种方法：
在package.json文件中添加dependencies和devDependencies
经过npm install --save、npm install --save-dev安装依赖，则会自动添加到package.json文件中。html

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-es201五、babel-preset-es2015-loose、babel-plugin-check-es2015-constants、babel-preset-react、babel-preset-stage-X 、react-hot-loader、expres等等。

实际安装的依赖根据项目来肯定。java

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

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

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

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

module：加载louderwebpack

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.htmlweb

<!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中。npm

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

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

访问index.html便可看到：