React 速通笔记

前言
最近刚学完 React，想着把笔记分享给大家，本笔记特别适合从事后端想要学习前端的人。我看视频是黑马最新的 React 视频（黑马程序员前端React18入门到实战视频教程，从react+hooks核心基础到企业级项目开发实战（B站评论、极客园项目等）及大厂面试全通关_哔哩哔哩_bilibili），个人觉得讲得还不错的。想要完整版可以私信我，如果对你有帮助的话就点个赞关注下吧。后面持续分享 Java 相关技术和笔记。

一、React 基础

1. 创建一个 react 项目
   1.利用 create-react-app 工具创建一个 react 项目

npx create-react-app project-name
npm start # 启动项目
2.src 目录只保留 App.js 和 index.js 文件

3.精简 App.js 和 index.js 文件

1.1 src 目录下文件的作用
index.js 是项目的入口，从这里开始运行，App 是根组件被 Index.js 导入，最后渲染到 index.html 中 root 节点上

index.js：

// 项目的核心入口 从这里开始运行

// React 必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 导入项目的根组件
import App from './App';

// 把 App 根组件渲染到 id 为 root 的 dom 节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

);
App：

// 项目的根组件

// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上
function App() {
return (

export default App;

1. jsx 基础-概念和本质
   2.1 JSX 是什么？
   JSX 表示在 JS 代码中编写 HTML 模板结构，是 React 中编写 UI 模板的方式

优势：

HTML 的声明式模板写法

JS 的可编程能力

JSX 是 JS 的拓展，浏览器不可直接识别，需要解析工具解析才可识别

2.2 JSX 编写 JS 代码
在 jsx 中可通过大括号 {} 识别 js 表达式，比如常见的变量、函数调用、方法调用等等

App.js：

// 项目的根组件
// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上

function getName() {
return 'jack';
}

const count = 100;
function App() {
return (

export default App;
2.3 JSX 中实现列表渲染
提示：在 JSX 中可以使用原生 JS 中 map 方法遍历渲染列表

// 项目的根组件
// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上

const count = 100;

const list = [
{id: 1001, name: 'Vue'},
{id: 1002, name: 'React'},
{id: 1003, name: 'Angular'},
];

function App() {
return (

export default App;
注意：

渲染哪个结构就 return 那个

循环渲染记得要加上独一无二的 key（类型为 string 或 number）

2.4 JSX 实现条件渲染
在 React 中，可以通过逻辑与运算符 &&、三元表达式（?:）实现*基础的条件渲染

类似 Vue 的 v-if

// 项目的根组件
// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上

const isLogin = true;

function App() {
return (

export default App;

2.4.1 JSX 条件渲染的 demo
// 项目的根组件
// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上

const articleType = 3; // 0 1 3 'articleType' 的取值范围

// 定义核心函数（根据文章类型返回不同的 JSX 模板）
function getArticleTemplate() {
if (articleType === 0) {
return

}

function App() {
return (

export default App;
显示：我是三图文章

1. React 基础事件绑定
   语法：on + 事件名 = {事件处理程序/函数名}，遵循驼峰命令

1.绑定事件

// 项目的根组件
// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上

function App() {
const handleClick = () => {
console.log('button 被点击了');
}

return (

export default App;
2.传递事件参数 e

// 项目的根组件
// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上

function App() {

// 拿到事件参数 e
const handleClick = (e) => {
    console.log('button 被点击了', e);
}

return (

export default App;
3.传递自定义参数

// 项目的根组件
// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上

function App() {

// 传递自定义参数
const handleClick = (name) => {
    console.log('button 被点击了', name);
}

return (

export default App;
4.同时传递自定义参数和事件参数 e

// 项目的根组件
// App -> index.js -> public/index.html(root) => App 根组件被导入到 index.js，然后渲染到 index.html 的 root 节点上

function App() {
// const handleClick = () => {
// console.log('button 被点击了');
// }

// 拿到事件参数 e
// const handleClick = (e) => {
//     console.log('button 被点击了', e);
// }

const handleClick = (name, e) => {
    console.log('button 被点击了', name, e);
}

return (

export default App;