本系列讲解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
Linux稍有些不同。官方的软件库版本可能会比较低，可以考虑用PPA安装，比如ubuntu可以参考这个说明：
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04
首先删除之前的nodejs：
sudo apt remove nodejs
sudo apt purge nodejs然后开始安装node，并用node -v 和 npm -v 确认node和npm已安装好。
curl -sL https://deb.nodesource.com/setup_19.x 您可以选择自己喜欢的编辑器，这都是可以的。本系列使用的是vscode，如果您也使用vscode，强烈建议安装Prettier插件。然后再从File->Preferences->Settings，查找 “Format on save”并选中，这样在保存时会自动格式化。
创建一个React应用
有两种方法创建React应用：
我们用Vite创建。运行npm命令创建，可以用vite@latest表示使用最新版本，但一般还是指定特定的版本比较好,这里就指定4.1.0。然后根据提示设定项目名称react-app，选择框架为React， 选择语言为Typescript。
npm create [email protected]
# 选择react
# 选择typescript
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ Project name: … react-app
✔ Select a framework: › React
✔ Select a variant: › TypeScript
Scaffolding project in /Users/ieras/go/projects/react-app...
Done. Now run:
cd react-app
npm install
npm run dev接着我们进入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应用。
下一篇将开始介绍组件的创建。
下一篇
最后于 2023-5-13
被admin编辑
，原因：
社区声明
1、本站提供的一切软件、教程和内容信息仅限用于学习和研究目的用户分享 ，如有侵权请邮件与我们联系处理
