React 指引

最近在学 React, 看到一篇博客写的不错，可惜是英文版，正巧无事，翻译过来吧。

原文地址： https://www.taniarascia.com/getting-started-with-react/

准备

在开始使用 React 之前，有一些事情需要准备好：

对 HTML & CSS 有一个基本的了解；
了解 JavaScript;
对 DOM 有基本的认识；
熟悉 ES6 语法和特征；
安装好 Node.js 和 npm.

注：HTML, CSS, JS, DOM 可以通过 W3School 学习；Node.js 和 npm 的安装教程网上一大堆。

目标

掌握基本的 React 概念和有关的组件，例如 Babel, Webpack, JSX, components, props, state, lifecycle.
通过以上概念建立一个简单的React app.

什么是 React

React 是 JavaScript 中最流行的库；
不同于 Angular, React 并不是一个框架；
React 是 Facebook 创建的一个开源项目；
React 用来构建 UI 界面；
React 是 MVC 的视图层；

安装

两种安装方式：

静态 HTML 文件

首先要明白，这种方式并不常用，但可以帮助我们快速使用 React.

首先，我们建立一个index.html文件，通过head标签下的三个script，可将 React, React DOM, Babel 加载到其中。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Hello React!</title><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script></head><body><div id="root"></div><script type="text/babel">// React code will go here</script></body>
</html>

在<div>标签下的<script>,可以输入代码，不妨写一个 Hello World:

class App extends React.Component{//使用ES6类来创建React组件render() {return <h1>Hello World</h1>;//JSX语法}
}ReactDOM.render(//使用该方法来调用 App 类<App/>,document.getElementById('root')
)

用浏览器打开上述 html 文件，结果为：

在这里插入图片描述

创建 React App

方法 1 并不高效，这里介绍更常用的方法。

首先确保电脑安装了 Node.js

打开终端（Windows下的cmd），输入指令 npx create-react-app react-tutorial, 稍等，安装好后，会出现一个 react-tutorial文件夹，用指令cd react-tutorial打开该文件夹，在该文件下，输入指令npm start便启动了该项目，随后，会弹出一个地址为localhost:3000的浏览器窗口。

样式如下：

在这里插入图片描述

下面，来看文件夹 react-tutorial的结构。

在这里插入图片描述

/public,最重要的文件是index.html.
/src文件夹中存放了 React 代码。

现在，为了编写我们自己的项目，需要删除/src文件夹下的所有文件，然后在该目录下创建我们自己的代码文件：index.css和index.js.

css格式是负责样式，因此对于index.css文件，可以自己写一个布局，也可以直接copy别人的代码，并无大碍。这里选择原作者给的样式，地址为：https://taniarascia.github.io/primitive/css/main.css 将该文本的内容直接拷贝到index.css中即可。

对于index.js,首先需要导入一些头文件：

import React,{Component} from "react";
import ReactDOM, {render} from "react-dom"
import './index.css'    //调用index.css

下面开始编辑内容，从Hello React开始：

注意，在下属代码中，我们用className取代HTML中的class.这是因为以下代码皆为 JavaScript 代码，而不是HTML代码。

class App extends React.Component{render() {return(<div className="App">   <h1>Hello React</h1></div>);}
}ReactDOM.render(<App />,document.getElementById('root')
);

此时，在浏览器中输入地址http://localhost:3000/将会看到：
在这里插入图片描述

插件：React Developer Tools

为了更好地在浏览器中调试 React 代码，建议使用浏览器插件 React Developer Tool. 例如Chrome中，直接打开Chrome商店下载即可。

下载完成后，当使用 F12 进入调试界面即可。

在这里插入图片描述

JSX: JavaScript + XML

在上述index.js中，我们使用了一种类似于 HTML 的代码：

<div className="App">   <h1>Hello React</h1>
</div>

但它并不是HTML, 而是JSX: JavaScript XML.

首先，需要讲清楚的是：JSX 在 React 中是可用可不用的，但是为了方便，我们采用 JSX 格式。

这里给出使用 JSX 时需要注意的几点：

className用来代替class,因为class在JS中是一个关键字。
JSX 采用骆驼明明法，例如: onclick在JSX中应该变为onClick.
单括号必须用’/'结束，例如<img/>.
在JSX中，可以使用’{}'来代表变量。

Components

在index.js中，我们创建了App组件。

但是对于许多 React 而言，通常存在多个小组件，为了方便，每个组件通常都有自己对应的文件，我们的项目也需要改一下：

在同目录下（即/src目录下）新建一个App.js, 将index.js中的 class App extends React.Component移动到App,js中，最后，两个文件的代码如下：

App.js:

import React,{Component} from "react";class App extends React.Component{render() {return(<div className="App"><h1>Hello React</h1></div>);}
}export default App

index.js:

import React,{Component} from "react";
import ReactDOM, {render} from 'react-dom'
import './index.css'    //调用index.css
import App from './App.js'ReactDOM.render(<App />,document.getElementById('root')
);

Class Components

下面，我们创建一个 Table 组件。

首先，在 src 目录下创建 Table.js, 其代码如下所示：

import React,{Component} from "react";class Table extends React.Component{render() {return (<table><thead><tr><th>Name</th><th>Job</th></tr></thead><tbody><tr><th>张三</th><th>码农</th></tr><tr><th>李四</th><th>程序员</th></tr></tbody></table>);}
}export default Table

返回到 App.js中，为了加载 Table.js, 在导入头文件的代码上添加一行import Table from './Table'.
添加上述代码后，在 App.js中可以使用 <Table/>.

在之前，我们输出了 “Hello React”, 现在删除App类中的<h1>Hello React</h1>，将其内容更改为<Table/>.

此时，App.js全部内容为：

import React,{Component} from "react";import Table from './Table'class App extends React.Component{render() {return(<div className="App"><Table/></div>);}
}export default App

再登入http://localhost:3000/，展示的内容为：
在这里插入图片描述

到目前为止，我们创建了一个表格 Table。

Simple Components

Components 包含两类：1. Class Components; 2. Simple Components.

上一节我们介绍了Class Components, 这一节我们介绍 Simple Components.

Simple Components 是一个函数，不使用关键字class.

例如，对于上一小节的Table.js,使用 Class Components 时有一个class Table.

我们使用 Simple Components 可以将其更改为两个函数: table header 和 table body.

更改后的Table.js:

import React,{Component} from "react";const TableHeader = () =>{return (<thead><tr><th>Name</th><th>Job</th></tr></thead>)
};const TableBody = () =>{return(<tbody><tr><th>张三</th><th>码农</th></tr><tr><th>李四</th><th>程序员</th></tr></tbody>    )
};class Table extends Component {render() {return (<table><TableHeader /><TableBody /></table>)}
}export default Table

此时，在网页上现实的结果并不发生变化。正如你所看到的，simple/class components 可以混合使用。

Props

现在，我们有了 Table 组件，但数据是不可修改的。React 的使用 props 和 states 操控数据，现在我们首先来看 props.

首先，将组件 TableBody 中的数据全部剪贴：

const TableBody = () =>{return <tbody/>
};

然后数据以列表的形式移动到App.js：

class App extends React.Component{render() {const characters = [{name: '张三',job: '码农',},{name: '李四',job: '程序员',},];return(<div className="container"><Table/></div>);}
}

现在，我们要将数据传递给 Table, 我们将传递的属性名定义为 characterData，它的作用是传递变量characters.

App.js中的return语句更改为如下：

return(<div className="container"><Table characterData={characters}/></div>
);

现在，数据已经传递到Table中了，我们需要在Table.js中访问这些数据。

在Table.js中，我们将其中 Table 类的代码更改为如下：

class Table extends Component {render() {const {characterData} = this.props;return (<table><TableHeader /><TableBody characterData={characterData}/></table>);}
}

现在，登入到浏览器中，使用 React 开发者工具，可以看到：
在这里插入图片描述
这表明数据已经以虚拟DOM的形式存储下来，但是并不是真正的DOM. 因此，此时在浏览器上无法显示表格。

为了显示表格，我们应该在 TableBody 中接受数据，在这里，我们使用map来返回一个表格航。

更改后的 Table.js 的 TableBody 如下：

const TableBody = props =>{const rows = props.characterData.map((rows, index)=>{return (<tr key={index}><td>{rows.name}</td><td>{rows.job}</td></tr>)})return <tbody>{rows}</tbody>
}

此时再看前端网页，数据已经显示上了：
在这里插入图片描述

props 是一个高效的传递数据的方法，但可惜，这样传递数据的方式仅仅是只读的。

State

在上一节中，我们将数据以序列变量的形式通过 props 传递。但是，如果我们想删除从表格中删除一行，props 是无法做到的。

因此我们需要 state.

首先，我们在App.js中创建一个 state对象：

class App extends React.Component{state = {characters: [],};
}

接着，将数据移动到 characters 中，同时删除 render() 里的 character.

class App extends React.Component{state = {characters: [{name: '张三',job: '码农',},{name: '李四',job: '程序员',},],};
}

为了实现删除一行的目的，我们在 App 类中添加一个removeCharacter方法：

removeCharacter = index => {const { characters } = this.statethis.setState({characters: characters.filter((character, i) => {return i !== index}),})
}

此处，filter的实现和功能不再赘述。

之后，我们需要将函数传递到组件中，具体做法是在render中添加一个 button 来调用者函数。

为实现上述需求，首先将App.js中的removeCharacter函数以 props 的方式传递到Table中，先将App.js的 render() 更改为如下：

render() {const { characters } = this.statereturn(<div className="container"><Table characterData={characters} removeCharacter={this.removeCharacter}/></div>);
}

此时，对于Table.js文件，在Table中接受该函数：

class Table extends Component {render() {const {characterData, removeCharacter} = this.props;return (<table><TableHeader /><TableBody characterData={characterData} removeCharacter={removeCharacter}/></table>);}
}

之后，需要从 Table 中传递到 TableBody 中，同时添加一个删除的按钮：

const TableBody = props =>{const rows = props.characterData.map((rows, index)=>{return (<tr key={index}><td>{rows.name}</td><td>{rows.job}</td><td><button onClick={ () => props.removeCharacter(index)}>Delete</button></td></tr>)})return <tbody>{rows}</tbody>
};

登入浏览器后，显示结果如下：
在这里插入图片描述
点击第一个 delete 后的结果为：

提交表格数据

我们将数据存储到 state 中，并且实现了删除表项，然而，我们如何添加新的数据到 state 中？

首先，为了方便，我们将App.js中App类下的state中的所有表项删除：

    state = {characters: [],};

接下来我们创建一个Form.js用来存储Form组件，在该组件中，首先使用一个构造函数constructor, 用来接受父亲的props.
另外，给Form中的对象一个初始化，并将该初始化赋值给state.

此时，Form.js的代码如下：

import React, { Component } from 'react'class Form extends Component {constructor(props) {super(props)this.initialState = {name: '',job: '',}this.state = this.initialState}
}export default Form;

我们的目标是，当Form中的state每次发生变化时提交表格，将数据传递给App中的 state, 接着再从App中传递到Table,更新表格。

首先，我们在Form.js中创建一个函数 handleChange，每次有提交时便运行该函数。

handleChange = event =>{const {name, value} = event.targetthis.setState({[name]:value,})
}

之后，在Form.js创建render, 将上述构建的 name, value 转化为 name, job:

render() {const { name, job } = this.state;return (<form><label for="name">Name</label><inputtype="text"name="name"id="name"value={name}onChange={this.handleChange} /><label for="job">Job</label><inputtype="text"name="job"id="job"value={job}onChange={this.handleChange} /></form>);
}

随后，在App.js中，render更改为如下：

render() {const { characters } = this.statereturn(<div className="container"><Table characterData={characters} removeCharacter={this.removeCharacter}/><Form/></div>);
}

此时来看前端页面：
在这里插入图片描述
此时，随便输入一个name 和 job, 在 React 开发者工具中，我们已经可以看到，并没有submit。仅仅是在Form中更新了。

之后，让我们开始书写submit代码。

在```App.js``中，添加一个 handleSubmit函数：

handleSubmit = character => {this.setState({ characters: [...this.state.characters, character] })
}

之后将render中return的<Form>更改为<Form handleSubmit={this.handleSubmit} />.

现在，返回到Form.js,创建一个函数submitForm(),然后将Form的state传递出去。

submitForm = () => {this.props.handleSubmit(this.state)this.setState(this.initialState)
}

最后，在render中添加一个“提交按钮”：

render() {const { name, job } = this.state;return (<form><label for="name">Name</label><inputtype="text"name="name"id="name"value={name}onChange={this.handleChange} /><label for="job">Job</label><inputtype="text"name="job"id="job"value={job}onChange={this.handleChange} /><input type="button" value="Submit" onClick={this.submitForm} /></form>);
}

最终显示的效果如下：
在这里插入图片描述

随便写两个表格提交后的效果：
在这里插入图片描述

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

c++的学习——判断能否被3，5，7整除
判断能否被3，5，7整除描述给定一个整数，判断它能否被3，5，7整除，并输出以下信息： 1、能同时被3，5，7整除（直接输出3 5 7，每个数中间一个空格）； 2、只能被其中两个数整除（输出两个数，小的在前，大的在后。例如：3 5或者 3 7或者5 7,中间用空格分隔）； 3、只能被其…...
2024/3/29 13:10:48
PLSQL-游标
文章目录一、为什么使用游标二、定义三、游标的用途四、游标的分类1. 隐式游标：不用声明也可以使用2. 显示游标：由程序员声明，存储select返回的数据，可以返回多条记录五、带参数的游标一、为什么使用游标返回多条记录时使用游标更简便二、定义游标（cursor）是Oracle系…...
2024/3/29 13:10:47
vue-router
写在前面用户进行了交互操作，现在要对页面内容进行变更，此时可以通过javascript进行动态替换DOM，但是其不便于分享、收藏，对于搜索引擎和用户来说都是不友好的！什么是前端路由？根据不同的 url 地址展示不同的内容或页面，无需依赖服务器根据不同URL进行页面展示操作…...
2024/3/29 13:10:45
centos 7.7 配置环境的时候安装对应gd库扩展（项目中有需要用到验证码的切记）
在项目中有用到验证码一类的图片功能的切记安装gd库扩展，centos7.7中默认的扩展可能和你安装的PHP版本不匹配先查看一下你PHP对应版本的扩展源 yum list | grep php72w-gd复制扩展源名称直接安装 yum install php72w-gd.x86_64安装成功之后重启服务 systemctl restart httpd...
2024/4/14 15:59:19
vue中v-model与.sync修饰符的使用差异
v-model 使用方式父组件：父组件通过v-model绑定值。如需根据v-model传入的值改变，而触发其他更新需要通过watch监听。子组件：声明model对象设置事件event和prop字段通过porps接受父组件传送值修改是通过this.$emit广播事件示例代码:// 父组件 <template><child…...
2024/4/16 11:07:09
做了一个 address book通讯录，大家看看如何？
最近做了一款互联网通讯录web应用程序，也就是《共享通讯录》。大家可以了解看看，有意见请留言一起交流学习。演示地址：http://address-book.cn/demo.aspx源码下载：http://address-book.cn/《共享通讯录》是一款在线的轻量级互联网通讯录，也是办公和官方公告发布的好平台，…...
2024/4/10 3:10:00
wireshark抓包实战（三），界面菜单管理
1.默认列的增删查改（1）增加列选中某个关键词，然后右键应用为列（2）修改列选中某个列，右键编辑列（3）删除列选中某个列，然后选择移除该列2.修改时间显示格式依次选中“视图”==>"时间显示格式"3.设置参考时间/相对时间右键选择“设置/取消时间参考”3....
2024/4/25 13:44:05
SpringBoot定时任务
@Component @Configuration // 1.主要用于标记配置类，兼备Component的效果 @EnableScheduling // 2.开启定时任务 public class TimingTask {// 添加定时任务//@Scheduled(cron = "0 0 3 * * *") // 每天3点执行一次@Scheduled(cron = "0/20 * * * * ?…...
2024/4/28 12:09:37
WordCount(3)
文章目录1. 性能分析1.1 性能分析工具1.2 性能分析2. 结果展示3. PSP指路软工项目开发-WordCount(1) 软工项目开发-WordCount(2) github地址1. 性能分析 1.1 性能分析工具本项目选择vs自带的性能探查器进行性能分析。 1.2 性能分析对-s -a操作进行性能分析。通过观察分析图…...
2024/5/6 8:15:33
VScode中配置使用LeetCode(Ubuntu)
目录安装配置Node.js安装LeetCode插件并更改设置即将步入为准备找工作而刷题阶段，听说可以不用打开浏览器而直接在VScode中刷题，这么酷的事情当银要试试啦！安装配置Node.js 在VScode中安装LeetCode插件前，要先安装Node.js(其实我也不懂这是干嘛的哈哈哈哈)。具体安装方法…...
2024/3/29 7:31:49
思维找规律题--CodeForces - 603A
题目链接：https://vjudge.net/problem/CodeForces-603A题目大意：给你一个长为n的串，只包含0和1字符，求这个串的最长的交替子序列（不连续），例如010，1，1010等都是交替序列，1001，11等都不是。还可以对串的一个连续子串做一个操作，将子串中的0都反转为1，或着，将子串中…...
2024/4/17 21:29:48
C++ primer plus学习-学习笔记-#include用法
新建控制台项目：添加头文件及源文件头文件：xxxprintf("hello world!\n");源文件：main.cpp#include <stdio.h> int main() { #include "xxx"return 0; }运行结果：...
2024/5/2 23:33:58
Swing程序设计（三）——常用面板
常用面板面板也是一种容器,以下为继承关系: java.lang.Object ↓ java.awt.Component ↓ java.awt.Container ↓ javax.swing.JComponent ↓ javax.swing.JPanelJPanel 继承java.awt.Container,可以添加组件、布局、设置背景颜色、边框等一系列特性,可将JPanel添加到窗体中作为…...
2024/4/26 1:07:57
C++ Primer：数组隐式转换成指针的5种例外。
C++ Primer：数组隐式转换成指针的5种例外。1. 背景2. 例外2.1 decltype关键字2.2 取地址符（&）2.3 sizeof关键字2.4 typeid关键字2.5 数组的引用1. 背景在大多数包含数组的表达式中，数组自动转换成指向数组首元素的指针。 #include <iostream> using namespace st…...
2024/3/29 13:10:38
Token
//校验token(新)public static CheckResult validateJWT(String jwtStr) {CheckResult checkResult = new CheckResult();Claims claims = new DefaultClaims();try {Map jwtClaims = parser(jwtStr);String id = MapUtils.getString(jwtClaims, ID);String user_name = MapUt…...
2024/3/29 13:10:37
JsonUtility储存多条信息并解析
//每个关卡过关情况 [System.Serializable] public class PassLevel {public int levelNum;public int isPass; }public class JsonData {public List<PassLevel> PassLevelList = new List<PassLevel>(); }public void Save(){JsonData jsonData = new JsonData()…...
2024/4/30 13:21:44
装系统
准备材料电脑一个不用的U盘一个，容量至少比系统大 rufus软件（制做U盘启动工具）。制做U盘启动工具 https://jingyan.baidu.com/article/4f7d57122267eb1a20192794.html这是如何制做U盘启动工具安装系统将U盘插入电脑重新开机电脑，在开机时，按电脑自身的热键进入BIOS,具体…...
2024/3/29 13:10:35
oracle 查看死锁和解锁
1.下面的语句用来查询哪些对象被锁：select object_name,machine,s.sid,s.serial#from v$locked_object l,dba_objects o ,v$session s where l.object_id　=　o.object_id and l.session_id=s.sid;2.下面的语句用来杀死一个进程：alter system kill session 1634,6813;...
2024/3/29 13:10:34
Selenium使用（Python）
使用Selenium、PO模式写的UI自动化测试框架可以参考地址 https://github.com/fengyibo963/DemoUITest 介绍 Selenium是一个用于Web应用程序测试的工具。框架底层使用JavaScript模拟真实用户对浏览器进行操作，直接在浏览器中运行，就像真实用户所做的一样。最初是由ThoughtWo…...
2024/4/25 13:28:07
HTTP API接口安全设计
HTTP API接口安全设计API接口调用方式HTTP + 请求签名机制HTTP + 参数签名机制HTTPS + 访问令牌机制有没有更好的方案？OAuth授权机制 OAuth2.0服务的几种授权流程--------------------------------------------------------------------------------------------------------…...
2024/4/24 10:33:11

React 指引

React 指引

准备

目标

什么是 React

安装

插件：React Developer Tools

JSX: JavaScript + XML

Components

Class Components

Simple Components

Props

State

提交表格数据

相关文章

最新文章