reactjs學習01--webpack準備和jsx語法簡單使用

準備工做

安裝webpack => 編譯打包ES6語法

webpack基於nodejs，電腦上得有node

這裏安裝的是webpack 4.x，所以還得安裝webpack-cli。由於webpack 4.x

中的打包命令被分離進webpack-cli中。

執行 npm i –D webpack webpack-cli webpack-dev-server

安裝webpack插件

執行 npm i –D html-webpack-plugin

安裝babel及其相關插件

執行 npm i –D babel-core babel-loader babel-plugin-transform-runtime

執行 npm i –D babel-preset-env babel-preset-react babel-preset-stage-0

babel-plugin-transform-runtime做用：抽離運行時重複的函數做爲模塊複用

babel-preset-react 做用：將js中JSX內容轉換成react相關的語法

注意：babel-core和babel-loader版本得對應

webpack.config.js的配置

webpack 4.x => 約定大於配置 （無需配置入口文件和出口文件）

入口文件默認找src目錄下的index.js     出口文件默認在dist目錄下的main.js

這裏的mode屬性必須配置，不然會報錯 => webpack 4.x新增屬性

.babelrc的配置

這裏的參數一樣能夠配置進webpack.config.js中

loader-options //單個loader時能夠像上面那樣寫

有多個loader時要用use屬性

use支持字符串，支持數組，支持對象, 支持對象數組

use: ‘babel-loader’

use: [‘style-loader’,’css-loader’]

use: {

    loader: ‘babel-loader’,

    options: {

       presets: ["env","stage-0","react"],

       plugins: ["transform-runtime"]

    }

}

use: [{

    loader: ‘babel-loader’,

    options: {

       presets: ["env","stage-0","react"],

       plugins: ["transform-runtime"]

    }

},{

    loader: ‘url-loader’

    options:{

        limit:8192

    }

}]

安裝react

執行 npm i –S react react-dom

reactjs的使用

react原生api建立DOM渲染頁面

模塊導入

建立虛擬DOM

使用虛擬DOM渲染頁面

html做用域

注意：這裏兩個參數都是DOM對象

JSX語法糖 => 模版語言建立模版對象（DOM對象）

緣由：直接用reactjs建立DOM的api來寫代碼太麻煩了

前提準備：須要安裝並配置babel相關loader和插件來解析JSX （前面已經配置好了）

babel-preset-react 做用：將js中JSX內容轉換成reactjs相關的語法

==> 其實就是將JSX模版對象轉成reactjs的api建立的DOM對象

核心 =>｛｝中寫js表達式 

a 數據的定義

b 模版對象的定義

c 使用模版渲染頁面

結果：