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便可看到：