Start a react app
https://github.com/facebook/create-react-app
or. google create react app 找一个
React Basic Features & Syntax React基本特性和语法
JSX
syntactic sugar for JS, allowing you to write HTMLish code instead of nested React.createElement(...) calls
class App extends React.Component{
render(){
return(
<div>
<h1>Hi, I’m a React app</h1>
</div>
)
}
//=>return React.createElement(‘div’,null,React.createElement(‘h1’,null,‘Hi’))
}
JSX restriction
1.class=>className
2.one root element
<>...</>
functional component
//const => low case
import React from 'react'
const person = () => {
return <p>I'm a Person!</p>
}
export default person;
-
Functional components (also referred to as "presentational", "dumb" or "stateless" components - more about this later in the course) =>
const cmp = () => { return <div>some JSX</div> }(using ES6 arrow functions as shown here is recommended but optional) -
class-based components (also referred to as "containers", "smart" or "stateful" components) =>
class Cmp extends Component { render () { return <div>some JSX</div> } }
- dynamic content
- working with props
- ‘children’ prop
<Person>myasasas</Person>
...
class Person(props){
Hi {props.children}
}
props allow you to pass data from a parent (wrapping) component to a child (embedded) component.
state Whilst props allow you to pass data down the component tree (and hence trigger an UI update), state is used to change the component, well, state from within. Changes to state also trigger an UI update.
useState() react hooks
useState() react hooks
import React,{useState} from ‘react’
const app props=>{
const stateArr = useState({
persons:[
{name:'max',age:28},
],
otherState:'s o v'
})
}
import React,{useState} from ‘react’
const app props=>{
const [personsState,setPersonsState] = useState({
persons:[
{name:'max',age:28},
],
otherState:'s o v'
})
}
const [othState,setOthState] = useState('asasa asa ')
const switchNameHandler = () =>{
setPersonState({
persons:[{name:'a',age'11'}]
})
}
方法父传子 passing method references between components
class Person(props){
...
render(){
return(<>
<h1 onClick={click}>Hi {this.props.name}</h1>
</>)
}
}
<Person click={this.swichNameHandler}/>
swichNameHandler=(newName)=>{
this.setState({persons:[{name:'asa',age:23}]})
}
<button onClick={this.swichNameHandler.bind(this,'Max')}/>
<Person click={this.swichNameHandler.bind(this,'kk'}/>
Two way binding 通过input动态传值
changeNameHandler=(event)=>{
this.setState({persons:[{name:event.target.value,age:23}]})
}
<Person click={this.swichNameHandler.bind(this,'kk'} changed={this.changeNameHandler}/>
const person = (props)=>{
return(
<div>
<p onClick={props.click}>I'm {props.name} and I am {props.age}> </p>
<p>{props.children}</p>
<input type='text' onChange={props.changed} value={props.name}/>\
</div>
)
}
working with inline styles
render(){
const style={
backgroundColor:'#ccc';
font:'inherit';
border:'1px solid blue;
cursor:'pointer'
};
return(<div>
<button style={style}></button>
</div>)
}
Useful Resources & Links
- create-react-app: https://github.com/facebookincubator/create-react-app
- Introducing JSX: https://reactjs.org/docs/introducing-jsx.html
- Rendering Elements: https://reactjs.org/docs/rendering-elements.html
- Components & Props: https://reactjs.org/docs/components-and-props.html
- Listenable Events: https://reactjs.org/docs/events.html
Lists and conditionals
根据条件渲染组件
this.state.showPerson&& <></>
//or
this.state.showPerson? <></>:null
利用取反实现toggle
togglePersonsHandle=()=>{
const show = this. state.showPerson;
this.setState({showPerson:!show})
}
让代码clean：推荐的
render(){
let persons = null;
if(this.state.showPerson){
persons = (
<div>
<Person name=... age=.../>
<Person name=... age=.../>
<Person name=... age=.../>
</div>
)
}
return(
{persons}
)
}
Output Lists
{this.state.persons.map(person=>{
return:<Person name={person.name} age={person.age}/>
})}
- index
splice删除数组元素
deletePersonHandler = (personIndex)=>{
const persons = this.state.persons;
persons.splice(personIndex,1);
this.setState({persons:persons});
}
...
{this.state.persons.map((person,index)=>{
return:<Person name={person.name} age={person.age} click={90=>this.deletePersonHandler(index)} />
})}
......
Person
onclick={props.click}
- Updating State Immutably 推荐的
deletePersonHandler = (personIndex)=>{
//const persons = this.state.persons;
const persons = [...this.state.persons];
persons.splice(personIndex,1);
this.setState({persons:persons});
}
...
{this.state.persons.map((person,index)=>{
return:<Person name={person.name} age={person.age} click={()=>this.deletePersonHandler(index)} />
})}
......
Person
onclick={props.click}
- key
deletePersonHandler = (personIndex)=>{
//const persons = this.state.persons;
const persons = [...this.state.persons];
persons.splice(personIndex,1);
this.setState({persons:persons});
}
...
{this.state.persons.map((person,index)=>{
return:
<Person
name={person.name}
age={person.age}
click={()=>this.deletePersonHandler(index)}
key={person.id} />//key=>use sth unique=>effective
})}
......
Person
onclick={props.click}
- flexible Lists
nameChangedHandler = (event,id)=>{
const personIndex = this.state.persons.findIndex(p=>{
return p.id === id;
}
const person ={ ...this.state.persons[personIndex]};
//const person = Object.assign({},this.state.persons[personIndex])
person.name = event.target.value;
const persons = [...this.state.persons];
persons[personIndex]=persom;
this.setState({persons:persons});
}
deletePersonHandler = (personIndex)=>{
//const persons = this.state.persons;
const persons = [...this.state.persons];
persons.splice(personIndex,1);
this.setState({persons:persons});
}
...
{this.state.persons.map((person,index)=>{
return:
<Person
name={person.name}
age={person.age}
click={this.deletePersonHandler}
key={person.id}
changed={}/>//key=>use sth unique=>effective
})}
......
Person
onclick={props.click}
- tips 简单的function component
function component
const validation = (props)=>{
}
Link
- Conditional Rendering: https://reactjs.org/docs/conditional-rendering.html
- Lists & Keys: https://reactjs.org/docs/lists-and-keys.html
