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")

)