整个项目的入口从index.js开始，在index.js中需要导入React和ReactDOM两个核心包，且要导入项目的根组件App.js,把App根组件渲染到id为root的dom节点上。

React使用JSX语法，可以在js函数中编写dom元素。

一、识别js表达式

1、使用引号传递字符串

function App() {
    return (
        <div className="App">
            {'this is message'}
        </div>
    )
}

2、识别js变量

const count = 100
function App() {
    return (
        <div className="App">
            { count }
        </div>
    )
}

3、函数调用

function getName(){
  return 'jack'
}
function App() {
    return (
        <div className="App">
            { getName() }
        </div>
    )
}

4、方法调用

function App() {
    return (
        <div className="App">
            { new Date().getDate() }
        </div>
    )
}

5、使用js对象

function App() {
    return (
        <div className="App">
            <div style={{color:'red'}}>this is js对象</div>
        </div>
    )
}

二、实现列表渲染

实现列表渲染使用map方法，map循环哪个结构，就return此结构

要加上独一无二的key，字符串或者number、id等，key作用：react框架内部使用，提升更新性能的

const list = [
  { id: 1001, name: 'Vue' },
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' }
]
function App() {
    return (
        <div className="App">
            <ul>
            {list.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
        </div>
    )
}

三、实现基础条件渲染

1、逻辑与 && 控制一个元素展示与隐藏

const isLogin = true
function App() {
    return (
        <div className="App">
            {isLogin && <span>this is span</span>}
        </div>
    )
}

2、三元运算 控制两个元素的展示与隐藏

const isLogin = true
function App() {
    return (
        <div className="App">
            {isLogin ? <span>jack</span> : <span>loading</span>}
        </div>
    )
}

3、调用函数渲染不同模板：自定义函数+if else不同条件返回不同结构，控制三个及以上元素展示与隐藏

//定义文章类型
const articleType = 3 //0 1 3
//定义核心函数（根据文章类型范文不同的JSX模板）
function getArticleTem(){
  if(articleType === 0){
    return <div>我是无图模式</div>
  }else if(articleType === 1){
    return <div>我是单图模式</div>
  }else {
    return <div>我是三图模式</div>
  }
}
function App() {
    return (
        <div className="App">
            {getArticleTem()}
        </div>
    )
}

四、点击事件

1、普通无参点击事件

const handleClick1 = () => {
  console.log('button被点击了')
}
function App() {
    return (
        <div className="App">
            <button onClick={handleClick1}>点击事件</button>
        </div>
    )
}

2、点击事件-传递参数e

//事件参数e
const handleClick2 = (e) => {
  console.log('button被点击了',e)
}
function App() {
    return (
        <div className="App">
            <button onClick={handleClick2}>点击事件</button>
        </div>
    )
}

3、点击事件-传递自定义参数 要用箭头函数的方式

//传递自定义参数
const handleClick3 = (name) => {
  console.log('button被点击了',name)
}
//传递e和自定义参数
const handleClick4 = (name,e) => {
  console.log('button被点击了',name,e)
}
function App() {
    return (
        <div className="App">
            <button onClick={() => handleClick3('jack')}>点击事件-传递自定义参数</button>
            <button onClick={(e) => handleClick4('jack',e)}>点击事件-传递e和自定义参数</button>
        </div>
    )
}

五、调用渲染组件-组件的基础使用

1、自闭和

//组件封装
//定义组件--组件就是一个首字母大写的函数，包含逻辑和ui
//也可以写成箭头函数的形式 const Button = () => {}
function Button(){
  //业务逻辑组件逻辑
  return <button>click me!</button>
}
function App() {
    return (
        <div className="App">
            <Button/>
        </div>
    )
}

2、成对标签

function App() {
    return (
        <div className="App">
            <Button></Button>
        </div>
    )
}

六、useState基础使用

1、修改数据状态

useState：数据驱动视图实现双向绑定 usetState中传的值是状态变量的初始值，返回一个数组，数组的第一个值是状态变量名，第二个值是修改状态变量的方法如若想要实现数据的双向绑定，必须用修改状态变量的方法进行替换，而不是直接赋值修改，例如下：

import {useState} from 'react'
function App() {
    //实现一个计数器按钮
    //1、调用useState添加一个状态变量
    //count 状态变量
    //setCount 修改状态变量的方法
    const [count,setCount] = useState(0)
    //2、点击事件回调
    const handleClick = () => {
        //作用：1、用传入的新值修改count
        //     2、重新使用新的count渲染ui
        //状态不可以直接修改而是用新值去替换 不能用count++，不能引发视图的更新，但是可以打印出值，必须用setCount
       setCount(count+1)
    }
    return (
        <div className="App">
            <button onClick={handleClick}>{count}</button>
        </div>
    )
}

2、修改对象状态

import {useState} from 'react'
function App() {
    const [form,setForm] = useState({name:'jack',age:18})
    const changeForm = () => {
        //错误写法：直接修改  form.name = 'john
        //正确写法：setForm 传入一个新对象
        setForm(
            ...form,
            name:'john'
        )
    }
    return (
        <div className="App">
            <button onClick={changeForm}>修改form{form.name}</button>
        </div>
    )
}

七、基础样式控制

1、行内样式控制,多单词写成驼峰式

function App() {
    return (
        <div className="App">
            <span style={{color:'red',fontSize:'50px'}}>this is span</span>
        </div>
    )
}

2、通过定义变量控制--代码整洁

const style = {
  color:'red',
  fontSize:'50px'
}
function App() {
    return (
        <div className="App">
            <span style={style}>this is span</span>
        </div>
    )
}

3、通过class类名控制

import './index.css'  //在index.css中定义了foo的样式
function App() {
    return (
        <div className="App">
            <span className='foo'>this is foo className</span>
        </div>
    )
}

编外知识：

lodash是一个功能强大的js库，在实现某些复杂js功能时，可以拿来即用； classnames是一个可以将多个动态class简写的js库 例如，实现排序：

import _ from 'lodash' // 安装并导入lodash库
import classnames from 'classnames' //安装并导入classnames库
const App = () => {
    const [commentList,setCommentList] = useState(_.orderBy(list,'like','desc'));//orderBy是lodash的方法，参数第一个是变量名称，第二个是按照什么字段排序，第三个是升序还是降序
    const handleTabChange = (type) => {
        setType(type)
        if(type == 'hot') {
          //根据点赞数量排序
          //lodash 一个js库，有很多功能
          setCommentList(_.orderBy(commentList,'like','desc'))
        }else {
          //根据创建时间排序
          setCommentList(_.orderBy(commentList,'ctime','desc'))
        }
    }
    return (
        <div className="app">
            <ul>
                {tabs.map(item => 
                <span key={item.type}
                onClick={() => handleTabChange(item.type)}
                className={`nav-item ${type === item.type && 'active'}`}>
                {item.tabName}
                </span>)}
                //如果用classnames插件就写成,classnames方法里面第一个参数是静态class名，第二个参数是动态class，key是active即动态的class名称，value是条件：
                //className={classnames('nav-item',{active:type === item.type})}
            </ul>
        </div>
    )
}