React 基本介绍与项目创建

为什么使用 React 以及前端框架

工作原理

React 通过构建虚拟 DOM(Virtual DOM)来高效管理界面。当组件的状态或属性发生变化时,React 会重新渲染生成新的虚拟 DOM,并通过 Diff 算法找出新旧虚拟 DOM 树之间的差异,最终仅将发生变化的部分同步到真实 DOM 中。这种方式避免了不必要的 DOM 操作,从而提升性能。
div: App h1: Title div: Content p: Hello World button: Click Me

CDN 引入

在不使用打包工具(如 Vite、Webpack、Create React App)的前提下,你可以通过 CDN 直接引入 React 和 ReactDOM,然后在 HTML 文件中使用 React。

html 复制代码
<!-- React 和 ReactDOM CDN(必须使用 development 版本) -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<!-- Babel(用于解析 JSX) -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

随后在 script 标签添加 React 代码,JSX 是不是浏览器原生支持的语法,所以必须通过 Babel 来转译 <App /> 这样的语法。

html 复制代码
<script type="text/babel">
  // 定义一个简单组件
  function App() {
    return <h1>Hello, React + CDN!</h1>;
  }
  // 渲染组件
  const root = ReactDOM.createRoot(document.getElementById('example'));
  root.render(<App />);
</script>
项目 CDN 地址 用途
React 核心库 https://unpkg.com/react@18/umd/react.development.js 提供 React 全局对象,支持定义组件等功能
ReactDOM https://unpkg.com/react-dom@18/umd/react-dom.development.js 提供 ReactDOM 全局对象,支持将组件渲染到 DOM 上
Babel https://unpkg.com/@babel/standalone/babel.min.js 让浏览器在运行时解析 JSX

由于 unpkg 提供的 CDN 在国内没有节点,可以使用其他镜像的 CDN 提供 react 框架代码

html 复制代码
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>

!NOTE

file:/// 协议下,浏览器会出于安全考虑 禁止脚本发出网络请求或模块加载;因此如果需要预览,至少需要开启 VSCode 的 Live Server 预览插件。

NPM 脚手架

脚手架方法创建项目有两种方法,一种是

通过 NPM 脚手架方式创建 React 项目需要 Node.js 环境,首先要确保本地安装了对应环境,版本应该在 16 以上

bash 复制代码
npm -v  # 检查 node.js 环境版本

通过 Vite 创建 React 项目

bash 复制代码
npm create vite@latest
#npm create vite@4.1.0

随后输入项目名称,选择框架、语言后创建即可。创建完成后需要进入项目文件夹随后安装所有第三方依赖

bash 复制代码
cd react-demo #  这里换成刚刚创建的项目名称文件夹
npm install  # 安装所有第三方库

最后如果需要运行,可以直接运行前端服务器

bash 复制代码
npm run dev

随后进入给出的地址即可,一般是 http://localhost:5173

!NOTE

编译项目

bash 复制代码
npm build

随后在 build 文件夹中找到编译后的文件即可

基本项目结构

创建项目后,应该有以下文件

  • node_modules: 存放第三方库的文件夹,一般被加入到 gitignore 中
  • public: 公共资源,比如图片和视频等
  • src: 前端网站的源代码
    • App.tsx 作为初始项目的组件
    • index.css
    • App.css 使用 Vite 构建时自带给的样式文件,后期一般自己定义
  • index.html: 项目入口
  • package.json: 对这个 node 项目的一般信息和设置等

!NOTE

注意,除了基本的 JavaScript(.js文件)和 TypeScript(.ts文件),还有对应的扩展文件分别为 .jsx 和 .tsx

React 快速入门

创建组件

React 组件是构建 React 应用的基本单位,组件可以分为函数组件和类组件。

React 应用程序是由 组件 组成的。一个组件是 UI(用户界面)的一部分,它拥有自己的逻辑和外观。组件可以小到一个按钮,也可以大到整个页面,组件的设计让整个 UI 结构化,并且可以复用一些常用组件。React 组件现在比较流行与用返回标签的 JavaScript 函数来编写,这样更加轻便逻辑更加简单:

创建一个 Message 组件,在 src 文件夹下创建 Message.tsx

jsx 复制代码
function Message() {
    // JSX: JavaScript XML
    return <h1>Hello, World!</h1>;
}

export default Message;

在这里,似乎是在 JavaScript 中返回了一个 html 标签,但事实上,这里返回的是 JavaScript XML,属于 JavaScript 扩展的语法代码。实际上,这个代码会先转换成普通 JS 代码,再渲染到 HTML 前端中。

在这里,可以使用 <Message></Message> 来调用组件,而给出的代码使用的是自闭合标签,让组件标签更加清晰。

!NOTE

React 组件必须以大蛇式或帕斯卡(PascalCasing)命名,而 HTML 标签是小写字母,两者予以区分。

你可以在这个工具网站看看过程 babeljs.io/repl ,babel 就是在 CDN 引用方法中提到的解析工具。

tsx 复制代码
<h1>hello world</h1>
js 复制代码
import { jsx as _jsx } from "react/jsx-runtime";
/*#__PURE__*/_jsx("h1", {
  children: "hello world"
});

可以看出,扩展语法并不是简单的写入前端代码,只是将 js 的渲染更改的更加简单。

编写完组件之后,需要将这个组件作为默认对象从其中导出,这样在其他代码中就可以复用这个组件。export default 关键字指定了文件中的主要组件。如果对 JavaScript 某些语法不熟悉,可以参考 MDNjavascript.info

应用组件,在 App.tsx 中重新编写一个利用 Message 组件来打印 hello world 的页面。

jsx 复制代码
import Message from './Message';

function App() {
  return <div><Message /></div>;
}

export default App;

随后运行网站,直接访问给出地址,就可以看到定义在 Message 中的 helloword 信息。

在 tsx 代码中,可以通过变量来动态修整显示信息,创建变量的方法与 js 类似,而在标签内显示变量需要用花括号括起来。

tsx 复制代码
function Message() {
    const name = "Cacciatore";
    return <h1>Hello, {name}!</h1>;
}
export default Message;

引入样式

首先通过 npm 为本项目下载前端样式框架

bash 复制代码
npm install bootstrap  # Bootstrap

随后在 main.tsx 中可以看到默认引用了 index.css 现在更改成之前下载的框架,修改后如下。

tsx 复制代码
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import 'bootstrap/dist/css/bootstrap.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

这样就直接导入了 Boostrap 作为前端样式框架

现在创建一个新的组件,比如创建一个列表组件,首先在 src 文件夹创建一个 components 文件夹用于存放所有组件代码,这样子更加方便项目的源代码管理。

tsx 复制代码
function ListGroup() {
  return (
    <ul className="list-group">
      <li className="list-group-item">123</li>
      <li className="list-group-item">321</li>
      <li className="list-group-item">abc</li>
      <li className="list-group-item">xyz</li>
    </ul>
  );
}

export default ListGroup;

这是一个创建列表的组件,首先利用一般的 HTML 语法创建了一个列表,其次将元素的类赋予 Bootstrap 样式预先定义的类,这样子就可以生成一个带有定义样式的列表组件,将其载入到 App.tsx 后即可在前端查看。

!NOTE

  • 如果你使用 VSCode 作为 IDE,你可能会知道它自带了格式化文档的功能,让代码直接格式化成符合缩进的样子,快捷键 ctrl + shift + I,除了自带的格式化样式,还可以安装插件 Prettier ,这个插件提供了更好的格式化功能,当下载好后第一次去格式化文档 IDE 会让你设置使用普通的还是 Prettier 提供的进行格式化。

  • class 在 js 中属于关键字,因此在这里的返回标签应该使用 className 作为类的引用。

组件函数返回与碎片

组件函数只能返回一个根元素,如果说,在上面的列表,我们想要添加一个 h1 元素作为这个列表的名称,是不可行的,因为这样将包含一个 h1 元素和 ul 列表元素,这是因为在上文提到,这里返回的不是一个简单的 HTML 前端代码,这些会被转换成 js 代码,因此必须只有一个根元素作为参数然后渲染。如果通过在这两个元素外套一个 div 元素将他们包裹,一起返回这一个外面的 div 元素给 react, 虽然可以解决这个问题,但是这里多出一个 div 元素,只是为了让参数正确是不必要的,而且会增加文件结构的复杂度。因此,这里引入碎片来解决这个问题。

tsx 复制代码
import { Fragment } from "react";

function ListGroup() {
  return (
    <Fragment>
      <h1>List group</h1>
      <ul className="list-group">
        <li className="list-group-item">123</li>
        <li className="list-group-item">321</li>
        <li className="list-group-item">abc</li>
        <li className="list-group-item">xyz</li>
      </ul>
    </Fragment>
  );
}

export default ListGroup;

当然,你也可以直接使用空标签来使用碎片

tsx 复制代码
<>
  <h1>List group</h1>
  <ul className="list-group">
    <li className="list-group-item">123</li>
    <li className="list-group-item">321</li>
    <li className="list-group-item">abc</li>
    <li className="list-group-item">xyz</li>
  </ul>
</>

标记内的动态渲染

在组件的返回中,作为标记无法使用其他 js 代码,因此需要通过用 {} 对标记进行动态渲染

tsx 复制代码
import { Fragment } from "react";

function ListGroup() {
  const cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];

  return (
    <Fragment>
      <h1>List group</h1>
      <ul className="list-group">
        {cities.map((city) => (
          <li className="list-item" key={city}>{city}</li>
        ))}
      </ul>
    </Fragment>
  );
}

export default ListGroup;

或者,在返回前定义好需要显示的内容,避免对返回的标记的结构进行太大的破坏

tsx 复制代码
import { Fragment } from "react";

function ListGroup() {
  let cities = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix"];
  cities = [];
  const message = cities.length === 0 ? "No cities found" : null;

  return (
    <Fragment>
      <h1>List group</h1>
      {message}
      <ul className="list-group">
        {cities.map((city) => (
          <li className="list-item" key={city}>{city}</li>
        ))}
      </ul>
    </Fragment>
  );
}

export default ListGroup;

或者,你可以使用逻辑符号

tsx 复制代码
cities.length === 0 && <p>No city found</p>

当前者条件为真时,将会返回第二个元素

相关推荐
zwjapple37 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说3 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴4 小时前
简单入门Python装饰器
前端·python