安装创建React项目
方法一：创建
全局安装
yarn global add create-react-app
创建项目
create-react-app 23react-demo-1
运行项目
yarn start
方法二：引入链接
需要引入react和reactDom库
<script src="https://cdn.bootcdn.net/ajax/libs/react/16.10.2/umd/react.production.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script> <script src="src/index.js"></script>
无论是创建还是引入都要获取React对象和ReactDOM对象 在index.js中引入
//获取React对象ReactDOM对象 const React = window.React; const ReactDOM = window.ReactDOM; //获取根元素 const root = document.querySelector("#root"); let n = 0; //创建一个名为App的节点 标签名 节点的class名为red 节点的内容要用[]括住 const App = React.createElement("div", { className: "red" }, [ n, //在节点里添加一个按钮 方法{} 内容 React.createElement('button', { onClick:()=>{ n+=1; } }, '+1'), ] ); //将节点渲染到根节点里 ReactDOM.render(App, root);
React创建组件的两种方式
类组件
先在调用他的里面标签里输入数据，使用{ }输入变量，使用“常量”：messageForSon=“儿子”
<Son messageForSon={55*2} />
类组件一定要使用constructor初始化数据，并且要有super()方法
class Son extends React.Component{ constructor(){ super() this.state={ n:0 }; }; add(){ // this.state.n+=1 this.setState({ n: this.state.n + 1 }); }; render(){ return( <div className="Son"> 儿子 n:{this.state.n} <button onClick={()=>this.add()}>+1</button> + {this.props.messageForSon} <Grandson message="孙子"/> </div> ) } };
类组件的constructor()与add()方法和render()渲染是并列的
函数组件
函数组件使用props接收参数，直接使用props.message调用 n时原始值：读，setN是修改值：写
const Grandson = (props)=>{ const [n,setN] = React.useState(0) return( <div className="Grandson"> 孙子 n:{n} <button onClick={()=>setN(n+1)}>+1</button> + {props.message} </div> ) }
两种方式的props
类组件使用props渲染数据时，要使用this.props.变量名接收父组件调用传入的参数；使用本组件内部的数据时用this.state.变量
函数组件使用数据时，不用this，直接使用props调用
