安装
npm install -g create-react-app
create-react-app my-app
cd my-app
yarn start
不要使用官网的
jsx
import React from "react"
const myname = 'react';
const imgUrl= "//img03.51jobcdn.com/im/2016/logo/logo_blue.png"
function aFun(name){
return name+' used in Fun!!!';
}
function Home(){
return (
<div clas="home">
<p>i {myname} am in homepage!</p>
<img src={imgUrl} />
<h2>{aFun('hahha')}</h2>
</div>
);
}
export default Home;
注意,jsx里面的class需要写成className,tabindex需要写成tabIndex
props和组件
home.js
function Home(props){
return (
<div className="home">
<p className="hahah">i {myname} am in homepage!</p>
<img src={imgUrl} />
<h2>{aFun('hahha')}</h2>
<p>我是从props里面获取的值:{props.page}</p>
</div>
);
}
app.js
import Home from './home'
<Home page="home"></Home>
avatar.js
import React from 'react'
function Avatar(props){
return (
<div className="box">
<div className="logo">
<img src={props.user.url} />
</div>
<div className="title">
<p>{props.user.title}</p>
</div>
</div>
);
}
export default Avatar;
app.js
<Home page="home" obj={{url:'xxx.jpg',title:'app to avatar'}}></Home>
home.js
<Avatar user={props.obj} />
注意,不能去修改props的值
class组件式
// class组件式
class Avatar extends React.Component{
render(){
return (
<div className="box">
<div className="logo">
<img src={this.props.user.url} />
</div>
<div className="title">
<p>{this.props.user.title}</p>
</div>
</div>
)
}
}
export default Avatar;
State
/*
* @Author: cyany_blue
* @Date: 2020-04-21 16:57:46
* @Last Modified by: cyany_blue
* @Last Modified time: 2020-04-21 17:08:18
*/
import React from "react"
class Stated extends React.Component{
constructor(props){
super(props);
this.state = { date :new Date() };
}
render(){
return (
<div className="wrapper">
<h2>It is { this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
export default Stated;
生命周期
componentDidMount(){
console.log('componentDidMount');
this.timer = setInterval(()=>{
this.tick();
},1000);
}
componentWillUnmount(){
console.log('componentWillUnmount');
this.timer = null;
}
tick(){ //注意不要写成function tick()
this.setState({
date:new Date()
});
//更改state必须使用setState()
}
事件
1.需要主要绑定this
constructor(props){
super(props);
this.state = {
date :new Date(),
flag:true
};
this.handleClick = this.handleClick.bind(this);
}
2.方法更新state
handleClick(){
this.setState(state=>({
flag:!state.flag
}))
}
3.调用
onClick={this.handleClick}
如果需要传递参数和事件参数
onClick={(e)=>this.handleClick('adsa16a5dsa5',e)}
handleClick(id,e){
e.persist();//必须要有,要不然都是null的
console.log(id,e);
this.setState(state=>({
flag:!state.flag
}))
}
条件渲染
handleClick(id,e){
e.persist();
console.log(id,e);
this.setState(state=>({
flag:!state.flag,
w:'wuwuwu'+Math.random()
}))
}
{this.state.flag
?<div className="hahha">hahhah</div>
:<div className="wuwuwu">wuuwuwu</div>}
获取通过函数或类里面判断里面判断渲染
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
-
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
列表循环
this.state = {
date :new Date(),
flag:true,
w:'wwww',
numberList:[1,2,3,4,5]
};
<ul>
{this.state.numberList.map((item,index)=>
<li key={item.toString()}>{item}--{index}</li>//注意添加key
)}
</ul>
表单
change(e){
this.setState({
value:e.target.value
})
}
handleSubmit(event) {
alert('提交的名字: ' + this.state.value);
event.preventDefault();
}
<div className="form">
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.change} />
<textarea value={this.state.value} onChange={this.handleChange} />
<input type="submit" value="submit" />
</form>
</div>
其余参考:https://react.docschina.org/docs/forms.html