小白快速上手React 看这篇就够了！！（基础篇）

置顶

一朵好运莲

已于 2024-11-26 11:10:55 修改

阅读量6.1k

点赞数 96

CC 4.0 BY-SA版权

文章标签： react.js 前端前端框架

于 2024-11-23 15:59:30 首次发布

本文链接：https://blog.csdn.net/xiaolouuuu/article/details/143987244

本篇可以快速了解React的基础语法，便于遗忘时快速复习，里面的小案例通俗易懂，没有废话，只有简单、简单、还是简单！

一、为什么要学React？

组件化架构：React的核心思想之一就是组件化。通过将用户界面拆分成一个个独立的、可复用的组件，React极大地提高了代码的模块性和可维护性。
JSX语法：React允许在JavaScript中编写HTML，这种JSX语法简化了HTML与JavaScript的融合，使得代码更加直观和易于理解。
虚拟DOM：React使用虚拟DOM技术，通过比较虚拟DOM树的差异，最小化DOM操作，提高性能和渲染效率。
单向数据流：React遵循单向数据流的原则，父组件向子组件传递数据通过props，子组件通过回调函数向父组件传递数据，使得数据流清晰可控。
生命周期方法：React组件具有生命周期方法，可以在组件挂载、更新、卸载等不同阶段执行特定操作，方便开发者管理组件的状态和行为。

二、 React入门

中文官网：快速入门 – React 中文文档

1、使用React脚手架初始化项目

(1)初始化项目

create-react-app 这个是脚手架名称，my-pro 自己定义的项目名称

npx 是一个包运行器，它与 npm 一起安装，并且是 npm 5.2.0 及更高版本的一部分。npx 允许用户直接运行 npm 注册表中的包，而无需先安装它们。create-react-app 是一个官方支持的命令行工具，用于快速启动一个新的 React 应用。

npx create-react-app my-pro

成功如下：

(2)启动项目

npm start

成功如下：

2、脚手架中使用React

（1）在src下的index.js中写入

import React from "react"; 这行代码导入了 React 库，使得你可以使用 React 提供的各种功能和 API。
import ReactDOM from "react-dom"; 这行代码导入了 ReactDOM 库，它是 React 的一个附属库，专门用于将 React 元素渲染到 DOM（文档对象模型）中。

// 导入react和react-dom两个包
import React from "react";
import ReactDOM from "react-dom";
// 创建元素
// 1. 元素名称
// 2. 元素属性 传递的是个对象
// 3. 元素内容
let h1 = React.createElement("h1", null, "我是标题");
// 渲染到页面
ReactDOM.render(h1, document.getElementById("root"));

（2）页面中就会出现

三、 JSX语法

JSX 是 React 的一个语法扩展，它允许你在 JavaScript 代码中写类似 HTML 的标记

1、使用JSX创建元素

需要注意的是：在 React 18 中，ReactDOM.render 方法已经被弃用，取而代之的是 ReactDOM.createRoot 方法

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

// 使用JSX创建元素
const element = <h1>Hello, JSX</h1>;

// 获取根元素
const rootElement = document.getElementById('root');

// 创建根
const root = ReactDOM.createRoot(rootElement);

// 将元素渲染到页面中
root.render(element);

成功如下：