让你三分钟内掌握React基础知识

React基础知识要点

1.React是一款用于构建用户界面的 JavaScript 库
2.React特点：

• 声明式设计
• 高效
• JSX
• 虚拟DOM
• 单向数据流
• state
• view
• actions
• diff算法
  3.React的基本语法，
  4.React的快速入门实例：

<script type="text/babel">
   // 接收 2 个参数：JSX（视图的描述）、绑定的根元素
   ReactDOM.render(<h1>Hello.React</h1>,document.getElementById('app'));
 </script>

在React中，我们是使用的createElement方法来创建试图的，但使用这种方法很复杂，
所有后来使用JSX来书写

<script type="text/babel">
  const ele = (
    <div>
    <h1>欢迎学习 React</h1>
    <p>React 是由 facebook 推出的一个 UI 库</p>
    <ul>
    <li>1.vue</li>
    <li>2.React</li>
    <li>3.Angular</li>
    </ul>
    </div>
  );

ReactDOM.render(ele, document.getElementById('app'));
</script>

5.React组件

1. 函数组件 书写函数组件时首字母大写，还有返回一段JSX

<script type="text/babel">
  function Test(){
    return (
      <h1>Hello</h1>
    )
  }
ReactDOM.render(<Test />, document.getElementById('app'));
</script>

2. 类组件

<script type="text/babel">
  class Test extends React.Component{
    render(){
      return (
        <p>this is a test</p>
      )
    }
  }
ReactDOM.render(<Test />, document.getElementById('app'));
</script>

当然了类组件中也可以嵌套