安装创建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调用
学习的时光总是短暂,又到了时候说拜拜
欢迎关注公众号 oldCode
获取新鲜教程资料