从零开始学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;需确保系统已经安装…

豆瓣内容抓取:使用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公…

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;…

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

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

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

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

计量和测量的区别有哪些?两者的关系是什么样的?

计量和测量在行业内经常被混用&#xff0c;更不用说外行人对计量和测量的定义不够清晰&#xff0c;无论是看字面还是定义&#xff0c;似乎两者没有什么太大的区别&#xff0c;但实际上&#xff0c;两者还是有区别的&#xff0c;不过又存在千丝万缕的联系&#xff0c;那么计量和…

【数据结构】冒泡排序、直接插入排序、希尔排序详解!

文章目录 1. 冒泡排序&#x1f34e;2. 直接插入排序&#x1f34e;3. 希尔排序&#xff08;缩小增量排序&#xff09;&#x1f34e; 1. 冒泡排序&#x1f34e; &#x1f427; 基本思想&#xff1a; 比较相邻的元素。如果第一个比第二个大&#xff0c;就交换他们两个。 大的数据…

适合能源企业的文档安全外发系统应该是什么样的?

能源企业是市场经济中的重要组成&#xff0c;也是社会可持续长远发展的关键组成之一&#xff0c;能源行业在开拓新能源业务线、提升产能的日常经营中&#xff0c;也需要与外部合作伙伴、客户间进行密切的业务往来&#xff0c;文档可能涉及多个领域多个类型。 能源供应合同&…

Vue3 之 动态组件和KeepAlive组件

一、动态组件 1、简介 ​ 在某些业务场景下&#xff0c;页面的某模块具有多个组件但在同一时间只显示一个&#xff0c;需要在多个组件之间进行频繁的切换&#xff0c;如&#xff1a;tab切换等场景。除了可以使用v-if、v-show根据不同条件显示不同组件之外&#xff0c;还可以通…

深入理解模型驱动测试:优点、挑战与应用场景

本文翻译自&#xff1a;Understanding Model-Based Testing: Benefits, Challenges, and Use Cases 原文作者&#xff1a;Qt Group质量保证市场营销主管Sebastian Polzin 审校&#xff1a;Jinjing Li 对于那些寻求系统化和条理化测试方法的测试工程师而言&#xff0c;模型驱动…

ROS2 Topics和Services

本文主要介绍ROS的Topics概念&#xff0c;如何创建Publisher和Subscriber&#xff0c;通过Topic在ROS程序间通信&#xff1b;介绍ROS的Services概念&#xff0c;如何创建Client和Server并建立通信。 更多内容&#xff0c;访问专栏目录获取实时更新。 ROS Topics Topics可以被视…

做电商,错过了2020年的抖音!那2024一定要选择视频号小店!

哈喽~我是电商月月 电商老板们集合了&#xff0c;问大家一个问题: 如果能让你回到三四年前&#xff0c;抖音才步入大众视野&#xff0c;这时候让你去做抖音小店&#xff0c;你愿意吗&#xff1f; 我敢相信&#xff01;很多&#xff0c;错过当年抖音红利的商家&#xff0c;一…

Docker HTTPS api V2 Manifest V 2, Schema 2 下的免装docker下载镜像的方法

目录 前言 下载镜像代码 使用方法 原代码中无法适配 Schema 2 的原因浅析 如何解决 相对原代码改动的东西 前言 本文提供代码主要是基于 https://github.com/NotGlop/docker-drag 提供的代码修改的。链接中提供的代码应该是是基于HTTPS api V2 Manifest V 2, Schema 1实…

面试必备:应对 “为什么离职” 的万能回答

使用PC端的朋友&#xff0c;请将页面缩小到最小比例&#xff0c;阅读最佳&#xff01; 面试官问到你为什么从上一家公司离职时&#xff0c;你会怎么回答&#xff1f;这个问题我觉得很有意思&#xff0c;也很有必要去探讨一下。 很多专业人士都会建议你&#xff0c;最好不要直接…

C++---迭代器介绍

迭代器的介绍 使用迭代器需要引用头文件,但一般的容器都引用了这个头文件。 这五种迭代器的声明如下: struct output_iterator_tag { };//输出迭代器 struct input_iterator_tag{ };//输入迭代器 struct forward_iterator_tag : public input_iterator_tag {};//向前迭代器 …

基于序列深度学习模型的向量海岸线形状分类方法 2024.05

本文中提出了一个数据驱动的方法来分类的形状矢量海岸线&#xff0c;该方法利用基于序列的深度学习算法对海岸线矢量分段进行建模和分类。具体而言&#xff0c;首先将复杂的海岸线划分为一系列弯曲&#xff0c;并进一步提出了一组不同的特征来描述每个弯曲的形态特征。然后&…

强化学习——学习笔记2

在上一篇文章中对强化学习进行了基本的概述&#xff0c;在此篇文章中将继续深入强化学习的相关知识。 一、什么是DP、MC、TD&#xff1f; 动态规划法&#xff08;DP&#xff09;&#xff1a;动态规划法离不开一个关键词&#xff0c;拆分 &#xff0c;就是把求解的问题分解成若…