前言

React,Facebook开发的前端框架。当时Facebook对市面上的前端框架都不满意,于是自己捣鼓出了React,使用后觉得特别好用,于是就在2013年开源了。

我也用React开发了一个简单的博客:

Dvorak Chen的博客

在原生的HTML中,是不存在组件化的,为了开发便利,人们使用各种方法来模拟组件。如将HTML封装在一段JS代码中,通过调用这段JS代码来操作界面。无奈碍于前端三大件:HTML、JS、CSS的限制,无法真的做到专注于组件。

React框架就很好地解决了这个问题。

前置知识

这是个适用于没有React基础的人群的React教程

你需要熟悉HTML、JS、CSS的相关知识,懂得如何安装node、npm

如果你会typescript,那就更好了。

在这个教程中,我们将着重介绍需要用的知识,遵循发现问题-思考问题-解决问题的思路来学习React的用法。对于一些我们用到的,但是在当前不那么重要的东西,我会一笔带过。

环境搭建

在开发React之前,我们需要能够开发React的环境,为此需要安装node,和npm。node是用于运行JS代码的环境,npm是用于管理JS项目的包管理器。

在这里我们使用 vs code 编辑器来编写代码。

安装node

前往nodejs官网下载并安装,在本文中使用的是16.15.0 LTS版本

安装好后,在终端中输入node -v查看是否安装成功,如果有显示出node的版本号,就是成功了。

在这个教程中,确保你的node版本大于12.0.0

安装 npm

在你安装好了nodejs后,你就可以使用npm,同样,在终端中输入npm -v查看版本号,如果有输出版本号,就是安装成功了。

如果需要更新到最新的npm,只需要在终端中输入:npm install -g npm然后等待即可。

创建react项目

在终端中输入以下命令来创建一个React项目:

npm create vite@latest my-react-app -- --template react

这个命令将使用npm,来调用vite包,来为我们创建一个项目,vite后面的后缀@latest表示使用你vite的最新版本,my-react-app是我们要创建的项目名,可以替换为你喜欢的名字,后面跟着的 -- --template react表示创建的项目所适用的模板是react。

vite是一个前端构建工具,在这里我们使用了vite这个包来创建项目。在很多教程中使用的不是vite,而是 npx create-react-app@latest my-app的命令来创建项目,这种方式使用的构建工具默认是webpack;我推荐使用上面的vite方式,它的构建工具使用的是vite。如果你不懂什么是构建工具,那么在现在也不需要去了解

创建完成后,你会在当前目录下看到名为my-react-app的文件夹,。

打开该文件夹,你应该看到的是以下的文件结构:

先不管这一堆文件和文件夹是干什么的,我们在终端里输入 npm i 安装所有依赖的包,这可能需要一些时间。安装好了后,项目根目录下会多了一个名为node_modules的文件夹,这个文件夹里就是项目依赖的包。安装了依赖的包后,我们的项目就能运行起来了。在终端里输入npm run dev,这个命令将启用开发用的服务器,有什么用?就是说你可以一边修改代码,一边查看最新的页面效果了。

在输入输入 npm run dev 后,终端里会应该会有如下的提示:

vite v2.9.9 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

我们可以在浏览器中打开上面显示的本地地址:http://localhost:3000/来查看效果,页面效果如下图:

这个页面的代码,是写在什么呢?

我们打开./src/App.jsx

这个文件,我们将看有一个方法:function App(),这个方法返回了一段HTML代码!等等,为什么JS代码里能够返回HTML代码?

function App() {
// ...
return (
<div className="App">
{/* ... */}
</div>
);
}

这种JS和HTML混合的写法是React的重要语法,叫做jsx,如果你是用typescript的话那就是tsx。

叫什么不重要,重要的是理解它代表了什么。这种写法,可以在JS代码的函数里返回一段HTML代码,同时可以附加上一些用于控制这些HTML的逻辑。而这个函数,我们就叫做React的组件

组件

/**
* 在React里,你经常会看到如下的方法
* 这是一个组件
*/
function ComponentFunction() {
// 逻辑
return (
<div>
返回的HTML代码
</div>
);
}

那么,这个组件,我们要怎么使用,让它显示到页面上呢?

使用组件

这个组件看起来像一个方法,但是我们却不是要用调用方法的方式去使用。现在,请记住在App.jsx中的App组件。我们现在再回头看看目录,目录下有一个main.jsx,在这个文件中,我们能看到以下代码:

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

注意中间的<App />写法,我们的App组件,就是以这种HTML的写法来调用。

好了,现在这个main.jsx文件我们不要动他,忘了它吧。回到我们的App.jsx里,我们把这个组件里的内容全部删掉,改成如下的代码:

function App() {
return (
<div>
Hello React!
</div>
);
} export default App

保存后刷新页面,你就会看到页面发生了变化,左上角出现了Hello React!字样。我们的HTML代码,都可以写在组件的返回值里,当我们调用组件,就会使用返回值里的HTML代码,替换到你使用这个组件的地方。

子组件

现在,我们已经简单认识了组件,我们可以仿照着,自己新建一个组件了。

其实就是写一个方法,该方法返回HTML。我们要将一个组件单独放在一个文件里,这是一个好习惯。在src下新建一个文件my-sub-component.jsx,在里面写上我们的新组件:

//  记得 export 导出,不然别的地方用不了
export function MySubComponent() {
return <div>这是一个新组件,也是一个子组件</div>;
}

一个组件,是不是子组件,只是相对于其他组件而言的。如果A组件中内嵌了了B组件,那么B组件就是A组件的子组件

回到我们的App.jsx,要使用别的组件,首先要引用它,引用my-sub-component.jsx并在App组件中使用HTML的写法来使用组件:

import { MySubComponent } from './my-sub-component'

function App() {
return (
<div>
Hello React!
<MySubComponent />
</div>
);
} export default App

如同使用<App />一样使用<MySubComponent />,保存后刷新,我们能够在页面上看到我们的子组件!

如果你的子组件和上面一样显示了出来,太棒了!It's work!

你学会了React最重要的两个东西之一:组件,React所有的界面显示,都是靠一个一个的组件组合起来而成,返回值的HTML写法上和原生HTML的写法有一点区别,我们将在下一章介绍。


告辞!

React简单教程-1-组件的更多相关文章

  1. React简单教程-2-ts和组件参数

    前言 在上一章:React 简单教程-1-组件 我们知道了 React 的组件是什么,长什么样,用 js 和 HTML 小小体验了一下组件.在这一章,我们将使用 typescript(简称 ts) 来 ...

  2. React简单教程-6-单元测试

    前言 我想大部分人的前端测试,都是运行项目,直接在浏览器上操作,看看功能正不正常.虽然明明有测试库可以使用,但是因为"要快"的原因,让好好做测试变成了一件影响效率的事. 因为这种无 ...

  3. React简单教程-4-事件和hook

    前言 在上一章 React 简单教程-3-样式 中我们建立了一个子组件,并稍微美化了一下.在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind ...

  4. React简单教程-3-样式

    前言 在上一章 React 简单教程-2-ts 和组件参数 中我们新建的子组件 Displayer 没有样式,显得平平无奇,这一篇我们将给他美化一下. CSS 文件 一般的做法,是在你的组件级目录下新 ...

  5. React简单教程-4.1-hook

    前言 虽然我们简单感受了一下 useState 的用法,但我想你还是对 React 里的 hook 迷迷糊糊的.本文我们将明确下 React 的概念. HOOK 前生今世 在我示例中,写的 React ...

  6. React简单教程-3.1-样式之使用 tailwindcss

    前言 本文是作为一个额外内容,主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架,我在以前的文章里有描述为什么使用功能类优先:为什么我在 css 里使用 ...

  7. React简单教程-5-使用mock

    前言 一个前后端分离的项目,前端人员需要对接后端的接口.如果在后端的接口没有开发好,或者没有测试版可以对接的情况下,前端人员也不能坐等后端接口写好后再开始开发. 一个项目的,理想情况下接口的规范应该是 ...

  8. react开发教程(三)组件的构建

    什么是组件 组件化就好像我们的电脑装机一样,一个电脑由显示器.主板.内存.显卡.硬盘,键盘,鼠标.... 组件化开发有如下的好处:降低整个系统的耦合度,在保持接口不变的情况下,我们可以替换不同的组件快 ...

  9. FusionCharts简单教程(八)-----使用网格组件

            有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...

随机推荐

  1. 《头号玩家》AI电影调研报告(四)

    五. 现实中对于技术的实现 1.自由变身 电影中,主人公借助"魔幻眼镜"让自己快速变成另一个人的模样,现实中我们一样也能做到! 在今年游戏开发者大会(GDC)上,一个名为" ...

  2. tracert命令简述

    1. 路由跟踪在线Tracert工具说明 Tracert(跟踪路由)是路由跟踪实用程序,用于确定 IP 数据报访问目标所采取的路径.Tracert 命令用 IP 生存时间 (TTL) 字段和 ICMP ...

  3. Redis快速入门到精通

    Redis Redis是一个开源的使用ANSI C语言编写.支持网络. 可基于内存亦可持久化的日志型.Key-Value型 NoSQL数据库,并提供多种语言的API.从2010年3 月15日起,Red ...

  4. c++对c的拓展_增强

    一:新增bool类型关键字:c中bool类型需要添加stdbool.h头文件,c++则可直接使用 void test(){ bool a=true; //c++可直接定义而c需添加头文件 true和f ...

  5. python关于变量介绍

    python变量 一.变量分为两种解释 1.随时可以变化的量 称之为变量 (变化多端嘛) 2.不会被变化的量 称之为常量 (常常不动嘛) #我们学习的python中没有真正定义的常量 #只有在绑定一个 ...

  6. 用户USER_HZ与内核HZ的值

    HZ和Jiffies系统定时器timer能够以可编程的方式设定频率,来中断cpu处理器.此频率即hz,为每秒的定时器节拍(tick)数, 对应着内核变量HZ.选择合适的HZ值需要权衡. tick为两个 ...

  7. nacos集群模式搭建踩坑记录

    首先数据库使用的本地的mysql 1.看日志提示no set datasource,使用虚拟机ping本地后发现无法ping通,原因是本地没有关闭防火墙. 2.看日志提示不允许建立数据库连接,原因是r ...

  8. 使用Visual Studio 2019开发Qt程序

    安装Qt 如标题,你首先需要到 http://download.qt.io/ 去下载并安装Qt,并在引导下安装MSVC组件(这里不做过多解释) Visual Studio 2019 配置 打开VS20 ...

  9. Python 一网打尽<排序算法>之先从玩转冒泡排序开始

    1. 前言 所谓排序,就是把一个数据群体按个体数据的特征按从大到小或从小到大的顺序存放. 排序在应用开发中很常见,如对商品按价格.人气.购买数量--显示. 初学编程者,刚开始接触的第一个稍微有点难理解 ...

  10. Python简单爬取Amazon图片-其他网站相应修改链接和正则

    简单爬取Amazon图片信息 这是一个简单的模板,如果需要爬取其他网站图片信息,更改URL和正则表达式即可 1 import requests 2 import re 3 import os 4 de ...