React用腳手架實際開發項目！

安裝腳手架： npm i create-react-app -g

建立項目命令： create-react-app 項目名字

啓動命令：yarn start

若是不用腳手架，須要建立一下頁面：

再安裝 ：npm i  react react-dom  -S   npm i   jsx-loader  -D

安裝預設第一步：npm i babel-preset-react -D

第二步把react放到預設裏面，你就能夠在你的環境裏面書寫任何的html代碼：

ReactDOM.render(虛擬DOM,真實DOM)

ReactDOM.render(<Component/>,app);

 ReactDOM.render(

<div>hello react</div>,document.getElementById("app")

)

 

main.js頁面

import React from "react"; // 封裝 react 組件

import ReactDOM from "react-dom"; // 渲染 組件 ReactDOM.render

 

建立組件

第一種ES6

class 定義構造函數 extends 繼承

class App extends React.Component{

// 渲染

render(){

return (

<div>

　　<h2>App- App -App </h2>

</div>

)

}

}

// 第二種ES5(最新版本已經不支持這種方法)

// const Home = React.createClass({

// render(){

// return (

// <div>

//　　 <h2> home - home -home </h2>

// </div>

// )

// }

// })

 

第三種

const Home = ()=>{

　　return (

　　　　<div>

　　　　　　<h2>Home - Home - Home</h2>

　　　　</div>

　　)

}

 

jsx 語法規則

遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；

遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析

const word = "1807 daydayup";

// 一個組件只能有一個頂層標籤

ReactDOM.render(

<div>

　　<h2>

　　　　react so easy 

　　　　<App />

　　　　<Home />

　　</h2>

　　<h4>

　　　　{ word }

　　</h4>

</div>

,

document.getElementById("one")

)