掌握React(一)--React入门

admin 2023-05-13 07:18:11 1511

本系列讲解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 nodejs
sudo apt purge nodejs

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

curl -sL https://deb.nodesource.com/setup_19.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt install nodejs
node -v
npm -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
# 选择react
# 选择typescript
Need to install the following packages:
  create-vite@4.1.0
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编辑 ,原因:
可爱猫?Telegram电报群 https://t.me/ikeaimao

社区声明 1、本站提供的一切软件、教程和内容信息仅限用于学习和研究目的
2、本站资源为用户分享,如有侵权请邮件与我们联系处理敬请谅解!
3、本站信息来自网络,版权争议与本站无关。您必须在下载后的24小时之内,从您的电脑或手机中彻底删除上述内容
最新回复 (0)

您可以在 登录 or 注册 后,对此帖发表评论!

返回