1.组件：函数组件、class组件、渲染组件

函数组件示例：
function Welcome(props) {
  return 
Hello, {props.name}
;
}
export default ()=>
class组件示例：
class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}
export default ()=>
渲染组件示例：
function Welcome(props) {
  return 
Hello, {props.name}
;
}

const element = ;
export default ()=>element

2.props和state

//外部传入的参数用props，内部传参用state
function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
 
  return (
    

      警告!
    
  );
}
 
class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }
 
  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }
 
  render() {
    return (
      

        
        
          {this.state.showWarning ? '隐藏' : '显示'}
        
      
    );
  }
}

export default Page

3.事件处理

示例1：
function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    

      Submit
    
  );
}
export default Form
示例2：向事件处理程序传递参数
class Popper extends React.Component{
  constructor(){
      super();
      this.state = {name:'Hello world!'};
  }
  
  preventPop(name, e){    //事件对象e要放在最后
      e.preventDefault();
      alert(name);
  }
  
  render(){
      return (
          

              
hello
              {/* 通过 bind() 方法传递参数。 */}
              Click
          
      );
  }
}
export default Popper

4.条件渲染

//示例：
function UserGreeting(props) {
  return 
Welcome back!
;
}
function GuestGreeting(props) {
  return 
Please sign up.
;
}
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return ;
  }
  return ;
}
export default ()=>

5.列表

//示例：
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

      {number}
    
  );
  return (
    
{listItems}
  );
}
 
const numbers = [1, 2, 3, 4, 5];
export default ()=>

react相关网站：

官网：https://zh-hans.reactjs.org/docs/getting-started.html
https://www.runoob.com/react/react-install.html