一、环境搭建

npx create-react-app react-basic

按照提示：cd react-basic，npm start 启动项目

删除多余文件，src下只保留App.js和index.js

清理index.js文件内容：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

清理App.js文件内容：

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

export default App;

清理后页面如下：

二、文件说明

2.1 index.js

2.2 App.js

三、JSX 基础

3.1 概念

3.2 本质

3.3 表达式

// 项目的根组件
// App -> index.js -> public/index.html(root)

const count = 100

function getName(){
  return 'jack'
}

function App() {
  return (
    <div className="App">
      {/* 使用引号传递字符串 */}
      {'this is msg'}
      <br/>

      {/* 识别js变量 */}
      {count}
      <br/>

      {/* 函数调用 */}
      {getName()}
      <br/>

      {/* 方法调用 */}
      {new Date().getDate()}
      <br/>

      {/* 使用js对象 */}
      <div style={{color:'red'}}>this is div</div>
    </div>
  );
}

export default App;

3.4 列表渲染

const list = [{
  id:1001,
  name:"zhangsan"
},{
  id:1002,
  name:"lisi"
},{
  id:1003,
  name:"wangwu"
}]

function App() {
  return (
   <div className='App'>
    this is app
      <ul>
        {list.map(item=><li key={item.id}>{item.name}</li>)}
      </ul>
   </div>
  );
}

export default App;

3.5 条件渲染

3.5.1 逻辑与运算符&&

3.5.2 三元表达式(?:)

3.5.3 自定义复杂渲染

const type = 1 // 0 1 3

// 定义核心函数
function getType(){
  if(type==0){
    return <div>我是无图文章</div>
  }else if(type==1){
    return <div>我是单图文章</div>
  }else{
    return <div>我是多图文章</div>
  }
}


function App() {
  return (
   <div className='App'>
    
    {getType()}

    </div>
  );
}

export default App;

3.6 事件绑定

3.6.1 使用

3.6.2 传递事件对象

3.6.3 自定义传参

3.6.4 同时传递事件对象和自定义参数

四、组件

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可

五、useState

5.1 基础使用

useState 是一个React Hook(函数)，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

// useState 实现计数器按钮
import {useState} from 'react'

function App() {
  // 调用 useState 添加一个状态变量
  // count 状态变量
  // setCount 修改变量的方法
  const [count,setCount] = useState(0)

  // 点击事件回调
  const handleClick = ()=>{
    setCount(count+1)
  }

  return (
   <div>
    <button onClick={handleClick}>{count}</button>
   </div>
  );
}

export default App;

React 基础使用（一）