React基本特性和语法 React Basic

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;

1. 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)
2. 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