react语法

本系列讲解React相关知识，涉及绝大部分React知识点。并创建一个具有现代网站元素的电子游戏网站。

先决条件

我们无需了解React，但要能理解html，css，javascript。我们要用到Typescript，它是Javascript的超集，增加了静态类型，实质上是为了能在开发过程及早发现错误。您如果从未用过Typescript，也是没关系的，本系列会逐步讲解。

什么是React

React是一个Javascript库，用于创建动态和交互的用户界面，2011年由Facebook创建，是目前应用最广的前端Javascript库。

那为什么要创建React呢？

我们知道Html页面是由一些元素组成树型结构，称之为Dom（Document Object Model）

Vanilla Javascript不使用第三方库，明确控制页面的Dom元素并呈现给用户，javascript需要查询相应的Dom元素并进行更新, 一个按钮的点击控制代码就类似下面的这样。

当项目逐渐增长，这些Dom的控制会越来越复杂，管理成为了大挑战，所以就出现了React。

使用React，我们不再关心Dom的查询和更新，而是描述我们页面由哪些可重用的组件组成，React则在后台自动高效地帮我们做好创建、更新Dom的工作。

使用组件可以帮助我们写出可重用的、模块化的、组织更好的代码！

我们来看一个真实的电子游戏网站，它是由导航条、左边栏、主区域的游戏网格组成，主区域又有游戏卡片组成，游戏卡片又包含一个喜欢按钮。

我们可以单独设计各个组件，然后将他们组合起来形成页面。所以本质上，一个React应用程序就是一个以应用为根组织起来的组件树。

设置开发环境

开发React项目需要node环境，版本建议高于16.0，通过命令行可以查询版本.

node -v

如果低于16.0，建议去https://nodejs.org下载安装。windows和Mac比较简单，安装过程就略过了。

Linux稍有些不同。官方的软件库版本可能会比较低，可以考虑用PPA安装，比如ubuntu可以参考这个说明：

https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04

首先删除之前的nodejs：

sudo apt remove nodejssudo apt purge nodejs

然后开始安装node，并用node -v 和 npm -v 确认node和npm已安装好。

curl -sL https://deb.nodesource.com/setup_19.x -o nodesource_setup.shsudo bash nodesource_setup.shsudo apt install nodejsnode -vnpm -v

您可以选择自己喜欢的编辑器，这都是可以的。本系列使用的是vscode，如果您也使用vscode，强烈建议安装Prettier插件。然后再从File->Preferences->Settings，查找 “Format on save”并选中，这样在保存时会自动格式化。

创建一个React应用

有两种方法创建React应用：

• Create React APP (CRA)。这是React官方团队出品。

• Vite。近年来，该方法越来越流行。它速度更快，生成的包也更小。

  
  

我们用Vite创建。运行npm命令创建，可以用vite@latest表示使用最新版本，但一般还是指定特定的版本比较好,这里就指定4.1.0。然后根据提示设定项目名称react-app，选择框架为React，选择语言为Typescript。

npm create vite@4.1.0

接着我们进入reacat-app，再安装依赖的第三方组件，然后运行项目。

  cd react-app  npm install  npm run dev

这样就生成了一个react应用，根据提示访问网页，就能到React页面了。

项目结构

我们看一下项目的文件结构。

• node_modules。这里存放第三方库，比如react等相关工具，我们不碰这里面的文件。

• public。存放网站公用的资产，比如图片、视频等。

• src。存放我们项目的源码，目前已有一个app.tsx组件。

• index.html。这是一个基本的html页面。body里有一个id为root的div，它指向了src/main.tsx，也就是我们的应用程序入口点。

• package.json。标注了应用程序的一些信息，以及依赖的组件、开发依赖组件。

• tsconfig.json。告诉typescript编译器如何将typescript转换成javascript，除非是高级用户，一般不要碰这个文件。

• vite.config.ts。vite的配置文件。同样的，不要碰它。

创建一个React组件

我们在src文件夹下新建文件Message.tsx。Typescript文件扩展名一般为ts或tsx，一般而言，纯粹的typescript文件使用ts，而React组件使用tsx。

有两种方法创建组件： 一种用Javascript类，另一种则是Javascript函数。近来，使用Javascript函数越来越流行，它更简洁也更容易写。注意函数名使用Pascal命名方法，也就是所有单词首字母大写。在创建组件时，我们也应该遵守使用Pascal命名法。

我们简单地输出Hello World。并用export default Message使其他模块可以调用。

function Message(){    return <h1>Hello World</h1>}
export default Message;

上面的代码，你有可能点奇怪：这不就是在javascript里嵌入html语言吗？

实际上，这里面的“<h1>Hello World</h1>”叫jsx语法, 是javascript xml的简写。我们打开 https://babeljs.io/repl，能看到它是会转成javascript代码的。

我们再到App.tsx里，删除原来的所有内容，再添加代码。App组件函数引入前面的 Message 组件，用法与传统html一样。

import Message from "./Message"function App(){  return <div><Message /></div>}
export default App

我们在修改App.tsx代码时，在控制台能实时看到“hmr”字样的相关信息，hmr是hot module replacement的简写，表示页面能自动体现修改的效果。

我们的React网页目前已显示Hello World了。

用这种语法，我们能很方便动态控制页面，我们修改下Message.tsx，当我们提供名字Kelemi时就显示Hello Kelemi。

function Message(){    const name = 'Kelemi';    if(name)        return <h1>Hello {name}</h1>    return <h1>Hello World</h1>}
export default Message;

React工作原理

目前我们的项目两个组件App和Message，当应用启动时，React会根据组件相应地建立Javascript数据结构，叫虚拟DOM。虚拟DOM与在浏览器显示的实际DOM是不同的，它是组件树在内存中的表示，每一个节点表示一个组件及其属性。当组件的状态或者说数据变化时，相应的虚拟DOM节点也作相应的更新反映新的状态，然后虚拟DOM再比较当前版本与之前的版本，以决定是否需要更新实际的DOM。

从技术上讲，更新DOM不是由React完成的，而是由它的同伴React DOM完成的。我们查看package.json，发现目前依赖的就是两个库：React和React DOM。

  ...  "dependencies": {    "react": "^18.2.0",    "react-dom": "^18.2.0"  },  ...

我们来看看它们是如何一起工作的。

我们之前说到过的index.html指向src/main.tsx，是我们的应用的入口点。查看main.tsx发现，ReactDOM负责渲染我们整个组件树，根组件 App 包含在另一个叫React.StrictMode的组件里，这个组件不用于显示，而是用于发现一些问题。

...ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(  <React.StrictMode>    <App />  </React.StrictMode>,)

在手机App中，渲染画面使用的是另一个库：ReactNative。React没有跟具体平台绑定，它对平台是透明的，React创建的应用可以在Web、手机或桌面上使用。

React生态系统

React是一个javascript库，作为比对，Angular和Vue则是框架。React是工具，而Angular和Vue则是工具集。

React只负责创建动态交互的页面，仅用React是不能完成现代网站搭建的，还要使用其他额外的库来完成Routing、HTTP、Mannaging app state等其他功能。

React的一个伟大之处是，它没有限制应该用什么其他功能库。项目需要时，我们可以从其他工具库挑一些好用的工具，加进React项目即可。

小结

本文是React的入门介绍，我们了解了什么是React，它的工作原理是什么，它的生态系统又是如何，并创建了一个简单的React应用。

下一篇将开始介绍组件的创建。