React入门系列（一）构建项目

2021-01-14 10:41:31 浏览数 (1)

React是一个专注于View层解决方案的框架。于Angular，Vue不同，React并不是完整的MVC/MVVM框架，也不是单纯的模板引擎，它的核心思想就是“组件化”，将UI层拆分为一个个组件，然后组合嵌套，最后构建成完成的APP。

代码语言：javascript复制
如果想实现完整的MVC架构，还需要Model和Controller。
这时，可以配合Flux 和 Redux 架构一起使用。

React的特点如下：

  1. 模板单向绑定：数据--->UI更新
  2. 用JS创建DOM（建议使用JSX语法），从而可以利用虚拟DOM树创建/更新DOM
  3. 提供的API数量很少，使用者必须非常熟悉原生的JavaScript才能够更快上手React开发
  4. 函数式编程（函数类似一个管道，进入一个值，会导出另外一个值）

简单来说，React是一套可以用简洁的语法高效绘制 DOM 的框架。

现在，让我们一步步进入React的世界吧！ 第一步，如何创建React项目？

1. 传统模式

传统模式就是利用<script>标签链接必要的React包文件，然后运行程序。

代码语言：javascript复制
<!DOCTYPE html><html>
  <head>
    <!-- 加载React核心库  -->
    <script src="../lib/react.js"></script>
    <!--  加载与DOM相关的React库 -->
    <script src="../lib/react-dom.js"></script>
    <!--  Babel：将JSX语法转为JavaScript语法 -->
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <!--  你的React代码 -->
    <script src="../src/main.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // 你的React代码
    </script>
  </body></html>
2. 通过npm创建项目

利用webpack编译JSX文件，步骤如下： (1) 安装npm包，包括React相关的包，webpack loader，babel转码器等等。package.json如下：

代码语言：javascript复制
"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.15",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  },
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --quiet",
    "build": "webpack",
    "watch": "webpack -w"
  },

(2) 配置webpack.config.js

代码语言：javascript复制
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {main: './src/app.js'},
    output: {
        path: __dirname   '/dist',
        filename: 'js/bundle.js',
        publicPath: '/'
    },
    module: {
        loaders: [
            {
                test: /.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {   test: /.css$/,
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: 'css-loader'
                })
            }
        ]
    },
    //webpack-dev-server配置
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        //指定服务器文件路径
        contentBase: "./dist",
        port: 9002
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname   "/index.tpl.html"
        }),
        new ExtractTextPlugin('css/'   '[name]-[hash].css')
    ]
};

(3)配置.babelrc

代码语言：javascript复制
{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ]
}

(4) 定义入口JS文件app.js:

代码语言：javascript复制
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
    render() {
        return (<h1>Hello</h1>);
    }
}

ReactDOM.render(<App/>, document.getElementById('app'));

(5) 运行webpack-dev-server，浏览器中打开http://localhost:9002/，既可以看到效果：

代码语言：javascript复制
npm run dev
小结

也可以使用官方命令行工具create-react-app，快速创建基于webpack ES6的最简单的React模板项目，步骤如下：

代码语言：javascript复制
npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

create-react-app生成的目录格式如下所示:

代码语言：javascript复制
my-app/
  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg

下一节我们将学习JSX语法，一种将JS和HTML混合使用的语法，类似：

代码语言：javascript复制
render() {
   return (<h1>Hello</h1>); // JSX
}
webpack 打包 javascript react npm

0 人点赞