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