React入门一

React ：React 是一个用于构建用户界面的 JavaScript 库。

React脚手架：

npm i create-react-app -g

基本使用：创建元素

import React from 'react';
import ReactDOM from 'react-dom';

const element = React.createElement('div', { className: 'list' }, [
  React.createElement('h1', null, '水果'),
]);

ReactDOM.render(element, document.getElementById('root'));

JSX使用：

import React from 'react'
import ReactDOM from 'react-dom'
const div = (
    <div className="box">
        <h1>JSX=</h1>
        <ul>
            <li>tom</li>
            <li>tom</li>
            <li>tom</li>
        </ul>
    </div>
)
ReactDOM.render(div, document.getElementById('root'))

注意事项（语法点）：

1. 使用{ 变量/表达式 } 渲染数据=》【注意：对象不能直接渲染，对象不能作为react元素】=》【布尔值渲染不出来，但是作为判断有效】
2. 标签必须要闭合【注意：hr、br、input、image等】
3. 一些标签的属性发生了变化=》class变成了className=》label的for属性 变成htmlFor=》多个单词组成的属性要变成驼峰命名
4. 标签的嵌套一定要符合严格的语法要求
5. 属性绑定 <标签 属性={ 变量 } 属性={ '字符串' + 变量 }>

import React from 'react'
import ReactDOM from 'react-dom'

const num = 100
const desc = <>
<p>你好</p><h1>标题</h1>
</>
const person = {
    name:'zs',
    age:20
}
const state = false
const link = "https://www.baidu.com"
const fn = ()=>{
    return '可以'
}
const div = (
    <div className="box">
        {desc}
       {1 + 1} == {num} == {state?"对":"错"}
       <hr/>
       {/* 注意 */}
       {fn()} == {JSON.stringify(person)}
       <hr/>
       <a href={link} title={'链接地址是'+link}>去百度</a>
       <table  width='200' cellPadding='0' cellSpacing='0' border='1'>
           <tbody>
               <tr>
               <td>11</td>
               <td>22</td>
           </tr> 
           </tbody>
       </table>
       <input type='checkbox' id='agree'/>
       <label htmlFor='agree'>同意</label>
    </div>
)

ReactDOM.render(div, document.getElementById('root'))

条件渲染：

import React from 'react'
import ReactDOM from 'react-dom'
const loading = false
const getContent = ()=>{
    if(loading) {
        return <div>正在加载中...</div>
    }else {
        return <div>加载完成</div>
    }
}
const div = (
    <div className="box">
      {getContent()}
      <hr/>
      {loading?<div>正在加载中...</div>:<div>加载完成</div>}
      <hr/>
      {loading && <div>正在加载中...</div>}
      {loading || <div>加载完成</div>}
    </div>
)

ReactDOM.render(div, document.getElementById('root'))

列表渲染：

import React from 'react'
import ReactDOM from 'react-dom'
const arr = ['张三', '李四', '王五']
const arr2 = [<li key={0}>张三</li>, <li key={1}>李四</li>, <li key={2}>王五</li>]
const arr3 = arr.map((item, index) => {
    return <li key={index}>{item}</li>
})
const div = (
    <div className="box">
        {arr}
        <hr />
        <ul>{arr2}</ul>
        <hr />
        <ul>{arr3}</ul>
        <hr />
        <ul>
            {arr.map((item, index) => {
                return <li key={index}>{item}</li>
            })}
        </ul>
    </div>
)

ReactDOM.render(div, document.getElementById('root'))

样式：

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
const isActive = true
const isBlock = true
const div = (
    <div className="box">
      <div className={isActive?'button active' : 'button'}>按钮</div>
      <div className={`button ${isBlock?'block' :''}`}>按钮</div>
    </div>
)

ReactDOM.render(div, document.getElementById('root'))

函数组件：

import React from 'react'

const Loading = () => {
    const isloading = false
  return (
      <div>
           {isloading ? <div>加载中</div> : <div>加载完成</div>}
      </div> 
  )
}

export default Loading

类组件：

import React, { Component } from 'react'

export default class Loading extends Component {
  state = {
    isloading : false,
    title:'数码产品',
    list:['电脑','手机','相机']
  }
  renderList(){
    return this.state.list.map((item,index)=>{return <li key={index}>{item}</li>})
  }
  render() {
    console.log('loading被调用了');
    return (
      <div>
         {this.state.isloading ? <div>加载中</div> : <ul>{this.renderList()}</ul>}
      </div>
    )
  }
}

react16.8版本之前 函数组件就是无状态组件，类组件就是有状态组件

react16.8版本之后 提供了Hooks，函数组件也可以拥有自己的状态

创建组件的快捷键rcc、rafce