从零开始学React--环境搭建

React官网

快速入门 – React 中文文档

1.搭建环境

下载nodejs,双击安装

nodejs下载地址

更新npm

npm install -g npm

设置npm源,加快下载速度

npm config set registry https://registry.npmmirror.com

创建一个react应用

npx create-react-app react-basic

启动

npm run start

2.清理代码

由于我们需要一个纯洁的测试环境,所以需要清理掉不需要的代码,src文件夹下只需要保留App.js和index.js

App.js代码更改如下:

function App() {return (<div className="App">this is App</div>);
}export default App;

index.js代码更改如下:

// 导入react两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入项目根组件
import App from './App';// 将根组件渲染到root节点上,root节点就是public/index.html里面id为root的div
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

这样就能得到一个纯洁的项目可以直接在App.js里面做练习了

3.路由

上面的方式有个缺点就是只能在一个文件上面测试,如果想在多个文件测试需要用到路由

安装路由

npm i react-router-dom

新建几个文件,page下面的文件表示页面组件,router表示路由数据

 Home组件可以写链接,这样有几个测试页面就有几个链接,要加个测试页面加个链接就能跳转过去了

function Home() {return (<div><a href="Article">文章</a></div>);
}export default Home;

Article是测试页面

function Article() {return (<div>this is Article</div>);
}export default Article;

router是路由数据

import {createBrowserRouter} from "react-router-dom";
import Home from "../page/Home";
import Article from "../page/Article";const router = createBrowserRouter([{path: '/',element: <Home/>},{path: 'article',element: <Article/>}
])export default router

index.js改成如下代码

// 导入react两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入路由
import {RouterProvider} from "react-router-dom";
import router from "./router";// 将根组件渲染到root节点上,root节点就是public/index.html里面id为root的div
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>
);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/18744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx的配置与调试

目录 1、安装Nginx 2、Nginx的配置文件结构 2.1 Nginx的全局配置 2.2 HTTP服务器配置 2.3 HttpGzip模块配置 2.4 负载均衡配置 2.5 server虚拟主机配置 2.6 location URL匹配配置 2.7 StubStatus模块配置 1、安装Nginx 在安装Nginx之前&#xff0c;需确保系统已经安装…

202303青少年软件编程(Python)等级考试试卷(四级)

第 1 题 【单选题】 运行下列程序, 输出的结果是? ( ) def wenhao(name = zhejiang):print(hello + name)wenhao()A :hello B :hellozhejiang C :helloname D :程序将提示运行错误 正确答案:B 试题解析: 定义函数时, 可以指定形参的默认值。 如果在调用函数时给函数…

SpringBoot如何使用日志Logback,及日志等级详解

Spring Boot默认已经集成了SLF4J&#xff08;Simple Logging Facade for Java&#xff09;作为日志的接口&#xff0c;以及Logback作为日志的实现。这意味着在大多数情况下&#xff0c;你无需做额外的配置即可开始记录日志。 下面是一个简要的指南&#xff0c;包括如何在Spring…

豆瓣内容抓取:使用R、httr和XML库的完整教程

概述 在数据分析和统计领域&#xff0c;R语言以其强大的数据处理能力和丰富的包库资源而闻名。它不仅提供了一个灵活的编程环境&#xff0c;还拥有专门用于数据抓取和处理的工具&#xff0c;如httr和XML库。这些工具使得从各种网站上抓取数据变得简单而高效。 豆瓣网站作为一个…

Android环境下Mesa初始化流程重学习之eglCreateContext

Mesa初始化流程重学习之eglCreateContext 引言 没有啥好说的了&#xff0c;直接上手撸代码&#xff01;总得找点事情干不是!我打工我快乐&#xff01;我奋斗&#xff0c;我快乐&#xff01; 一. 核心结构体之间的关联 二. eglCreateContext流程分析 eglCreateContext(...)//s…

红酒配餐中的酒杯选择与使用技巧

在红酒配餐中&#xff0c;酒杯的选择与使用技巧是影响品鉴体验的重要因素。合适的酒杯不仅能展现出红酒的优雅和风味&#xff0c;还能提升用餐的仪式感和愉悦感。云仓酒庄雷盛红酒以其卓着的品质和丰富的口感&#xff0c;成为了红酒爱好者们的首要选择品牌。下面将介绍在红酒配…

21张让你代码能力突飞猛进Python速查表(神经网络、线性代数、可视化等)(有中文版)

随着深度学习的蓬勃发展&#xff0c;越来越多的小伙伴们开始使用python作为主打代码&#xff0c;python有着种类繁多的第三方库&#xff0c;这里为大家从网络上收集了一些代码速查表&#xff0c;希望可以帮你在码代码时提速。 基础 神经网络 线性代数 Python资料 可以去VX公…

python标准库argparse,脚本传参

argparse 是 Python 的标准库之一&#xff0c;它用于编写用户友好的命令行接口。通过 argparse&#xff0c;你可以很容易地为你的 Python 脚本添加命令行参数和选项&#xff0c;并解析它们。下面是一个简单的介绍和示例 # 导入库 import argparse# 定义命令行解析器对象 parse…

JavaScript 日期和时间的格式化

JavaScript 日期和时间的格式化 一、日期和时间的格式化 1、原生方法 1.1、使用 toLocaleString 方法 Date 对象有一个 toLocaleString 方法&#xff0c;该方法可以根据本地时间和地区设置格式化日期时间。例如&#xff1a; const date new Date(); console.log(date.toL…

buuctf_RE

[WMCTF2020]easy_re 简单输入flag 但是下断点后&#xff0c;还没走几步就报错退出了。 确实没有打印的字符串 main函数也看不懂在干嘛 int __cdecl main(int argc, const char **argv, const char **envp) {__int64 v4; // r13char v5; // r12__int64 v6; // rax_QWORD *v7;…

python计算开始时间到结束时间步长一个小时

为了计算从开始时间到结束时间&#xff0c;每隔一小时的时间间隔&#xff0c;你可以使用Python的datetime模块来处理日期和时间。以下是一个简单的例子&#xff0c;它生成从开始时间到结束时间每隔一小时的时间列表。 from datetime import datetime, timedelta# 开始时间 sta…

SylixOS 版本与 RealEvo-IDE 版本对应关系说明

SylixOS 版本与 RealEvo-IDE 版本对应关系说明 SylixOS 版本IDE 版本发布日期1.4.13.1.52017/01/171.5.23.5.12017/10/121.7.13.8.32018/06/221.8.33.9.52018/10/081.9.9-103.9.102020/01/021.11.63.10.22020/05/131.11.73.10.x2020/06/121.12.93.11.02020/09/111.12.11&#…

多输入多输出 | MATLAB实现BiTCN(双向时间卷积神经网络)多输入多输出预测

多输入多输出 | MATLAB实现BiTCN(双向时间卷积神经网络)多输入多输出预测 目录 多输入多输出 | MATLAB实现BiTCN(双向时间卷积神经网络)多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现BiTCN双向时间卷积神经网络多输入多输出预测 1.data为数据…

json格式文件备份redis数据库 工具

背景&#xff1a; 项目组要求使用 json备份redis缓存数据库内容。 附件里工具是一个包含redis-dump工具的镜像文件&#xff0c;方便用户在局域网中使用容器备份redis缓存数据库。 使用步骤&#xff1a; 解压tar文件&#xff0c;导入镜像 docker load < redis_dump_of_my…

【八股系列】HTTP请求特征是什么?

文章目录 1. HTTP&#xff08;超文本传输协议&#xff09;请求具有以下主要特征&#xff1a;1.1 请求行(Request Line):1.2 请求头(Request Headers):1.3 请求正文(Request Body):1.4 状态码(Status Code):1.5 无状态性(Statelessness):1.6 缓存支持(Cacheability):1.7 方法多样…

力扣刷题--2535. 数组元素和与数字和的绝对差【简单】

题目描述 给你一个正整数数组 nums 。 元素和 是 nums 中的所有元素相加求和。 数字和 是 nums 中每一个元素的每一数位&#xff08;重复数位需多次求和&#xff09;相加求和。 返回 元素和 与 数字和 的绝对差。 注意&#xff1a;两个整数 x 和 y 的绝对差定义为 |x - y| 。…

JWT下token过期的处理策略

策略1 最简单最直接的方式 用户再次输入他们的登录凭证&#xff0c;如用户名和密码&#xff0c;得到一个新的token 策略2 采用单token的方式&#xff1a; 设置 token 过期时间&#xff1b; 前端发起请求&#xff0c;后端验证 token 是否过期&#xff08;JWT工具类有一个&a…

面试专区|【DevOps-46道DevOps高频题整理(附答案背诵版)】

简述什么是 DevOps工作流程 &#xff1f; DevOps工作流程是一种将开发和运维团队紧密结合起来的方法&#xff0c;旨在实现软件开发和交付的高效性和可靠性。它强调自动化和持续集成&#xff0c;以便频繁地进行软件交付和部署。 DevOps工作流程通常包括以下阶段&#xff1a; …

【最优化方法】实验三 无约束最优化方法的MATLAB实现

实验的目的和要求&#xff1a;通过本次实验使学生进一步熟悉掌握使用MATLAB软件&#xff0c;并能利用该软件进行无约束最优化方法的计算。 实验内容&#xff1a; &#xff11;、最速下降法的MATLAB实现 &#xff12;、牛顿法的MATLAB实现 &#xff13;、共轭梯度法的MATLAB…

请简述vue2和vue3的区别

Vue2和Vue3作为Vue.js框架的两个主要版本&#xff0c;在多个方面存在显著的差异。以下是它们之间主要区别的详细概述&#xff1a; 生命周期函数钩子&#xff1a; Vue2&#xff1a;包含了一系列的生命周期钩子函数&#xff0c;如beforeCreate、created、beforeMount等&#xff0…