說明:

分為2步:

首先導入react 和 react-dom:保證了虛擬DOM的創建和使用

使用babel轉碼器: 由于DOM結構太多,每次使用React.createElement創建虛擬DOM會給開發帶來很大壓力,因此采用html的寫法,通過babel轉碼器轉換成React語法,可以很大程度上提高開發效率

• 項目源代碼

---

在項目中使用react

運行cnpm i react react-dom -S 安裝包

• react: 專門用于創建組件和虛擬DOM,同時組件的生命周期都在這個包中
• react-dom: 專門進行DOM操作的,最主要的應用場景, 就是ReactDOM.render() [ps]: 通過react包創建的dom是在內存中的.因此需要react-dom來獲得內存中的DOM
• -S: 代表項目從開發到上線都要用到的包
• -D: 開發時用到的工具

在index.html頁面中,創建容器:

<!-- 容器,將來使用 React 創建的虛擬DOM元素,都會被渲染到這個指定的容器中 --> <div id="app"></div>

導入包:

import React from 'react' import ReactDOM from 'react-dom'

創建虛擬DOM元素:

const myh1 = React.createElement('h1', { title:'啊,栗子', id: 'myh1'}, '糖炒栗子')

渲染:

ReactDOM.render(myh1, document.getElementById('app'));

---

使用模板字符串

對于復雜的UI結構來說,使用React.createElement創建虛擬DOM的寫法會很復雜.

HTML是最優秀的標記語言.

聯想到,手寫標簽的形式來創建虛擬DOM.
如果直接采用下面的形式來書寫,會報錯:
[書寫]: const mydiv = <div id="mydiv" title="div aaa">這是一個div元素</div>
[報錯]: You may need an appropriate loader to handle this file type
[原因]: 在js文件中,默認不能寫類似于HTML的標記,否則打包會失敗.
[解決辦法]: 可以使用各種包來轉換這些JS中的標簽.

---

JAX語法:

• 在JS中,混合寫入類似于HTML的語法,符合XML規范的JS
• JSX語法的本質,還是在運行的時候,被轉碼器轉換成 React.createElement 形式來執行
  [面試]: JSX是直接在頁面中渲染的嘛? 不,會先經過轉碼器轉換成 React.createElement形式來執行

---

使用Babel來將JSX轉化成可以在瀏覽器上運行的DOM

如何啟用jsx語法?

• 安裝babel插件
  • 運行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  • 運行 cnpm i babel-preset-env babel-preset-stage-0 -D
• 安裝能夠識別jsx語法的包 babel-preset-react
  • 運行 cnpm i babel-preset-react -D
• 在webpack.config.js中添加匹配規則.
  • 在webpack中,默認只能打包處理.js后綴名類型的文件
  • 像 .png、.vue 無法主動處理
  • 所以要配置第三方的loader

// webpack.config.js module:{rules:[{ test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }] }

• 添加 .babelrc 配置文件

{"presets": ["env", "stage-0", "react"],"plugins": ["transform-runtime"] }

總結

以上是生活随笔為你收集整理的webpack --- 在项目中使用React的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。