react的基本配置安裝及使用babel

 

安裝react 步驟

 

//cnpm i react react-dom -S 安裝react

//導入

//1.這兩個導入的時候，接收的成員名稱，必須這麼寫

import Reaact from 'react' //建立組件、虛擬 DOM 元素，生命週期

import ReactDOM from 'react-dom' //把建立好的組件和虛擬 DOM 放到頁面上展現的

//2.建立虛擬 DOM 元素

//參數1：建立的元素的類型、字符串、表示元素的名稱

//參數2：是一個對象或 null ，表示 當前這個 DOM 元素的屬性

//參數3：子節點（包括 其餘 虛擬 DOM 獲取文本子節點）

//參數n:其餘子節點

// <h1 id="myh1" title="this is a h1">這是一個大大的h1</h1>

// const myh1 =React.createElement('h1','null','這是一個大大上午h1')

const myh1=React.createElement('h1',{id:'myh1',title:'this is a h1'},'這是一個大大的h1')

const mydiv=React.createElement('div',null,'這是一個div元素',myh1)

 

//渲染 頁面上的DOM 結構，最好的方式，就是寫 HTML 代碼

//const mytest=<div>aaaaa</div>

//3.使用 ReactDOM 把虛擬 DOM 渲染到頁面上

// 參數1：要渲染的那個虛擬 DOM 元素

// 參數2：指定頁面上的 DOM 元素，看成容器

ReactDOM.render(mytest,document.getElementById('app'))

 

 

 

==============================================================================================

 

基本使用配置

 

//1.安裝babel插件

// cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

// cnpm i babel-prest-env babel-preset-stage-0 babel-preset-react -D

//2.配置webpack.json的

// module: { // 全部第三方 模塊的配置規則

// rules: [ // 第三方匹配規則

// { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千萬別忘記添加 exclude 排除項

// ]

// }

//3.配置 .babelrc

// {

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

// "plugins": ["transform-runtime"]

// }

// HTML 是最優秀的標記語言；

// 注意： 在 JS 文件中，默認不能寫 這種 相似於 HTML 的標記；不然 打包會失敗；

// 能夠使用 babel 來轉換 這些 JS 中的標籤；

// 你們注意：這種 在 JS 中，混合寫入相似於 HTML 的語法，叫作 JSX 語法； 符合 XML 規範的 JS ；

// 注意： JSX 語法的本質，仍是 在運行的時候，被轉換成了 React.createElement 形式來執行的；

//4，

const mydiv = <div id="mydiv" title="div aaa">

這是一個div元素

<h1>這是一個大大的H1</h1>

</div>