reactJs简介

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

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

环境搭建

安装nodejs

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

项目搭建

  1. 新建文件夹。新建一个文件夹,比如demo
  2. 初始化package.json。在文件夹目录下,执行npm init,初始化一个package.json文件,这个文件中配置了项目的依赖,类似于maven中的pom.xml文件。
  3. 安装依赖。
    有两种方法:
    在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等等。

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

  4. 创建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
    };
  5. 创建文件
    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即可看到:

clipboard.png


Daisy
95 声望5 粉丝