安裝腳手架： 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")
)