学习创建第一个 React 项目

目标

本篇的目标是配置好基础的环境并创建出第一个 React 项目。
由于之前没接触过相关的知识,所以还需要了解其依赖的一些概念。

步骤主要参考First React app using create-react-app | VS code | npx | npm - YouTube

0. 简单了解相关概念

JavaScript

一种语言

TypeScript

JavaScript的超集,主要补充了静态类型检查。
(这里讨论了为什么要用TypeScript)
(这里比较了TS/JS关系对比C++/C关系)

Node.js

一个基于 Chrome V8 引擎的 Javascript 运行环境
详细讨论可看:什么是 Nodejs ? - 知乎

npm

全称:Node Package Manager。
随同Node.js一起安装的包管理工具

React

一个JavaScript库,用于开发动态交互UI。
可参考《React Tutorial for Beginners - YouTube》 中的 “What is React?” 部分

Create React App (CRA)

React官方工具,用于创建React项目

1. 安装 Node.js

从Node.js官网下载安装。

安装后可以在控制台中输入node -vnpm -v确认安装成功以及当前版本:
在这里插入图片描述

2. 使用 Create React App 创建一个React项目

打开控制台,先cd到希望将项目放入的目录。
然后使用 npx create-react-app react-test1创建一个名字是“react-test1”的项目。(注意:项目名字不能包含大写字母,否则会报错)

(此处我遇到了一个问题,详见附录)

第一次用会提示安装 “create-react-app” ,输入y就行。
在这里插入图片描述
经过一段时间后,创建完成
在这里插入图片描述
项目文件夹中层级如下:
在这里插入图片描述

3. 尝试启动和修改

接着,在控制台中,cd到项目目录
然后输入npm start后,就会在浏览器中打开这个项目
在这里插入图片描述


尝试修改项目路径的/src/App.js如下

import logo from './logo.svg';
import './App.css';function App() {return (<div className="App"><hl> yaksue test</hl></div>);
}export default App;

保存文件后,可以直接能看到浏览器中的修改:
在这里插入图片描述

附录:找不到目录

我第一次使用npx create-react-app命令时有如下报错:
在这里插入图片描述
提示找不到 “C:\Users\godhz\AppData\Roaming\npm”

在这里搜到了解决方法。即在对应目录创建文件夹即可
在这里插入图片描述

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

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

相关文章

Python Qt(七)Listview

源代码&#xff1a; # -*- coding: utf-8 -*-# Form implementation generated from reading ui file qt_listview.ui # # Created by: PyQt5 UI code generator 5.15.9 # # WARNING: Any manual changes made to this file will be lost when pyuic5 is # run again. Do not…

CLICK HOUSE

一、clickhouse简介 MPP架构的列式存储数据库&#xff08;DBMS&#xff1a;Database Management System&#xff09;&#xff0c;能够使用 SQL 查询实时生成分析数据报告。ClickHouse的全称是Click Stream&#xff0c;Data WareHouse。 ClickHouse的全称由两部分组成&#xf…

爬虫逆向实战(二十一)-- 某某点集登录与获取数据

登录 一、数据接口分析 主页地址&#xff1a;某某点集 1、抓包 通过抓包可以发现登录接口是phonePwdLogin 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现有pwd和sig两个加密参数 请求头是否加密&#xff1f; 无响应是否加密&#x…

ICCV 2023 | 小鹏汽车纽约石溪:局部上下文感知主动域自适应LADA

摘要 主动域自适应&#xff08;ADA&#xff09;通过查询少量选定的目标域样本的标签&#xff0c;以帮助模型从源域迁移到目标域。查询数据的局部上下文信息非常重要&#xff0c;特别是在域间差异较大的情况下&#xff0c;然而现有的ADA方法尚未充分探索这一点。在本文中&#…

C#2010 .NET4 解析 json 字符串

下载Newtonsoft.Json.dll using System; using System.Collections.Generic; using System.Linq; using System.Text;using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; namespace ConsoleApplication1 {class Program{static void Main(string[] args){strin…

SpringBoot+MyBatisPlus+MySql+vue2+elementUi的案例、java访问数据库服务、java提供接口服务

文章目录 前言后端关键代码前端关键代码完整代码 前言 1、项目不使用前后端分离。 2、在创建SpringBoot的时候要注意各个插件间的版本问题。 3、后端技术SpringBootMyBatisPlusMySql。 4、前端技术vue2elementUi。 后端关键代码 简单介绍 1、数据库名称ssm_db 2、表名称tbl_bo…

Centos 7 安装系列(8):openGauss 3.0.0

安装依赖包&#xff1a; yum -y install libaio-devel flex bison ncurses-devel glibc-devel patch redhat-lsb-core readline-devel openssl-devel sqlite-devel libnsl 安装插件&#xff1a; yum install -y bzip2 net-tools为什么要安装这两个&#xff1f; 安装bzip2 是…

关于使用远程工具连接mysql数据库时,提示:Public Key Retrieval is not allowed

我在使用DBeaver工具连接 数据库时&#xff0c;提示&#xff1a;Public Key Retrieval is not allowed&#xff0c; 我在前一天还是可以连接的&#xff0c;但是今天突然无法连接了&#xff0c; 但是最后捣鼓了一下又可以了。 具体方法&#xff1a;首先先把mysql服务停了&#x…

在编辑器中使用正则

正则是一种文本处理工具&#xff0c;常见的功能有文本验证、文本提取、文本替换、文本切割等。有一些地方说的正则匹配&#xff0c;其实是包括了校验和提取两个功能。 校验常用于验证整个文本的组成是不是符合规则&#xff0c;比如密码规则校验。提取则是从大段的文本中抽取出…

5G NR:PRACH时域资源

PRACH occasion时域位置由高层参数RACH-ConfigGeneric->prach-ConfigurationIndex指示&#xff0c;根据小区不同的频域和模式&#xff0c;38.211的第6.3.3节中给出了prach-ConfigurationIndex所对应的表格。 小区频段为FR1&#xff0c;FDD模式(paired频谱)/SUL&#xff0c;…

人工智能学习专栏

这个专栏就专门用来记录自己的深度学习的历程吧。从做MCU开始、Soc、Linux系统转行到AI领域&#xff0c;其过程是痛苦的。至少数学这块&#xff0c;那是花了很多时间去从头去学。但是还是有很多不懂的地方。坚持&#xff01;&#xff01;&#xff01;&#xff01;

LLMs 缩放指令模型Scaling instruct models FLAN(Fine-tuned LAnguage Net,微调语言网络)

本论文介绍了FLAN&#xff08;Fine-tuned LAnguage Net&#xff0c;微调语言网络&#xff09;&#xff0c;一种指导微调方法&#xff0c;并展示了其应用结果。该研究证明&#xff0c;通过在1836个任务上微调540B PaLM模型&#xff0c;同时整合Chain-of-Thought Reasoning&#…

打架斗殴行为识别算法

打架斗殴行为识别算法通过yolov7网络模型深度学习算法&#xff0c;打架斗殴行为识别算法对提取到的信息进行分析和比对&#xff0c;判断是否存在打架斗殴行为。打架斗殴行为识别算法一旦打架斗殴行为识别算法识别到打架斗殴行为&#xff0c;系统会立即生成预警信息&#xff0c;…

Android JNI系列详解之CMake编译工具的使用

一、CMake工具的介绍 如图所示&#xff0c;CMake工具的主要作用是&#xff0c;将C/C编写的native源文件编译打包生成库文件&#xff08;包含动态库或者静态库文件&#xff09;&#xff0c;集成到Android中使用。 二、CMake编译工具的使用 使用主要是配置两个文件&#xff1a;CM…

Ansible学习笔记12

playbook&#xff1a; playbook&#xff08;剧本&#xff09;&#xff1a;是ansible用于配置、部署和管理被控节点的剧本&#xff0c;用于Ansible操作的编排。 使用的是yaml格式&#xff0c;&#xff08;saltstack、elk、docker、docker-compose、k8s都会使用到yaml格式。&am…

js对url进行编码解码(三种方式)

第一种&#xff1a;escape 和 unescape escape()不能直接用于URL编码&#xff0c;它的真正作用是返回一个字符的Unicode编码值 它的具体规则是&#xff0c;除了ASCII字母、数字、标点符号" * _ - . /"以外&#xff0c;对其他所有字符进行编码。在u0000到u00ff之间…

【模拟】算法实战

文章目录 一、算法原理二、算法实战1. leetcode1576 替换所有的问号2. leetcode495 提莫攻击3. leetcode6 N字形变换4. leetcode38 外观数列5. leetcode1419 数青蛙 三、总结 一、算法原理 模拟就是用计算机来模拟题目中要求的操作&#xff0c;模拟题目通常具有代码量大、操作…

Java稀疏数组

目录 1.稀疏数组 2.稀疏数组的使用 2.1 二维数组转换为稀疏数组 2.2 稀疏数组转换为二维数组 1.稀疏数组 稀疏数组&#xff08;Sparse Array&#xff09;&#xff1a;当一个数组中的大部分元素为相同的值&#xff0c;可使用稀疏数组来保存该数组&#xff0c;可以将稀疏数组…