React基础速通计划：React基础与JSX

b站React学习计划启动

React入门到实战2022

React基础搭建与目录简化

采用creat-react-app手脚架来搭建react应用

终端输入命令

1	npx create-react-app react-basic

一些说明：

npx create-react-app 是固定命令，create-react-app是React脚手架的名称
react-basic表示项目名称
npx命令会临时安装create-react-app包，初始化项目完成后会自动删掉

在安装完成后终端输入npm start启动项目

我们可以在页面中看到一个转动的react图标和几行字

打开项目目录，coding文件主要在src文件夹中，首先将src文件中多余的内容删除，保留三个核心的入口文件：App.js,index.css和index.js

然后删除App.js和index.js中和一些删除文件的关联，保留内容如下

/* App.js */
function App() {
  return (
    <div className="App">
      app
    </div>
  );
}

export default App;

/* index.js */
// 引入框架核心包
import React from 'react'
// 引入渲染相关的包
import ReactDOM from 'react-dom'
// 引入全局样式文件
import './index.css'
// 引入根组件App
import App from './App'

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

之后JSX的学习均在App.js中进行

JSX基础

JSX (JavaScipt XML) 就是react中的HTML，通过js的自身可编程能力来创建HTML结构

将命令式写法简化为声明式写法 (就是咱写简单的声明写法，编译器会将其转化为命令式写法后运行)

JSX表达式

语法： { JSX表达式 }

例子:

const name = '常规变量'
const getDate = ()=>{
  return '2022.6.16'
}
const flag = false
const str = 'beautiful'


function App() {
  return (
    <div className="App">
      { name }
      { getDate() }
      { flag? '真' : '假' }
      { str.split('').join('-') }
    </div>
  );
}

export default App;

注意switch-case/if条件判断/变量声明语句属于语句，而非表达式

JSX列表渲染

采用map进行

例子：

const list = [
  { id: 1, item: "条目1" },
  { id: 2, item: "条目2" },
  { id: 3, item: "条目3" },
];

function App() {
  return (
    <div className="App">
      <ul>
        {list.map((list) => (
          <li key={list.id}>{list.item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

遍历列表需要类型为number/string的不可重复的key来提高diff性能, key只在内部使用，不会在真实dom中出现

JSX条件渲染

就用刚才那个列表继续做例子：

const list = [
  { id: 1, item: "条目1" },
  { id: 2, item: "条目2" },
  { id: 3, item: "条目3" },
];

// 满足条件才显示列表
const flag = true;

function App() {
  return (
    <div className="App">
      <ul>
        {flag ? list.map((list) => <li key={list.id}>{list.item}</li>) : null}
      </ul>
    </div>
  );
}

export default App;

也可以用逻辑判断语句更简单地完成这个任务

const list = [
  { id: 1, item: "条目1" },
  { id: 2, item: "条目2" },
  { id: 3, item: "条目3" },
];

const flag = false;

function App() {
  return (
    <div className="App">
      <ul>
        {flag && list.map((list) => <li key={list.id}>{list.item}</li>)}
      </ul>
    </div>
  );
}

export default App;

JSX样式

JSX样式分为行内样式和类名样式，如下示例所示，style1是行内样式，style2是类名样式

优先级同css优先级：行内样式 > 类名样式

1
2
3

.style2 {
  color: green;
}

import "./App.css";

// 行内样式，直接在元素上绑定一个style属性
const style1 = { color: "red", fontSize: "50px" };

function App() {
  return (
    <div className="App">
      <span style={style1}>span1</span>
      <span className="style2">span2</span>
    </div>
  );
}

export default App;