学习创建第一个 React 项目

news/2025/3/31 11:48:29/

目标

本篇的目标是配置好基础的环境并创建出第一个 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.ppmy.cn/news/1073642.html

相关文章

python之pip更新开源工具分享

今天推荐一个github的开源工具 pkgu&#xff0c;支持罗列当前python环境下的package的版本信息以及全部和部分更新这些已经过期或者有新版的库。 该工具目前还提供了 cache 功能&#xff0c;会将当前python环境下的过期包信息保存在数据库内&#xff0c;数据库采用了python的 …

【Vue3+Ts】项目启动准备和配置项目代码规范和css样式的重置

项目启动准备 创建项目&#xff08; 使用Vite 构建工具创建项目模板&#xff09;目录介绍插件安装创建别名编译说明项目配置配置icon和标题配置项目别名配置ts.config.json检测vscode的插件是否配置 配置项目代码规范集成editorconfig配置prettier工具库ESLint检测配置 CSS样式…

【Interaction交互模块】LinearTransformDrive线性变换驱动

文章目录 一、预设位置二、案例&#xff1a;建一个按下后可自动抬起的按钮三、留有疑问 一、预设位置 交互——可控制物体——变换——线性变换驱动 二、案例&#xff1a;建一个按下后可自动抬起的按钮 按钮的结构和设置如下图 为了让它碰触时&#xff0c;往下走——预设体…

【项目 计网7】4.20 多进程实现并发服务器 4.22 多线程实现并发服务器

文章目录 4.20 多进程实现并发服务器server_process.cclient.c4.22 多线程实现并发服务器客户端代码&#xff1a;服务端代码&#xff1a; 4.20 多进程实现并发服务器 要实现TCP通信服务器处理并发的任务&#xff0c;使用多线程或者多进程来解决。 思路&#xff1a; 1、一个父进…

基于Java的论坛管理系统,ssm+jsp,MySQL数据库,用户+管理员,完美运行。

基于Java的论坛管理系统&#xff0c;ssmjsp&#xff0c;MySQL数据库&#xff0c;用户管理员&#xff0c;完美运行。 用户&#xff1a;注册登录、热门帖子、精品帖子、论坛版块、帮助、发帖子、评论、个人中心修改信息、查看公告等&#xff1b; 管理员&#xff1a;用户管理、帖…

Redis 数据类型详细解析

Redis是一个开源的、内存中的数据结构存储系统&#xff0c;可用作数据库、缓存和消息代理。Redis支持多种类型的数据结构&#xff0c;包括字符串&#xff08;String&#xff09;、哈希&#xff08;Hashes&#xff09;、列表&#xff08;Lists&#xff09;、集合&#xff08;Set…

2023年7月京东牛奶乳品行业品牌销售排行榜(京东数据挖掘)

牛奶乳品作为饮食结构的重要组成部分&#xff0c;愈发受到消费者重视。近期&#xff0c;鲸参谋监测的京东平台7月份牛奶乳品的销售数据也已出炉&#xff0c;我们一起来讨论牛奶乳品市场7月份的销售表现&#xff01; 根据鲸参谋平台的数据可知&#xff0c;7月份&#xff0c;京东…

Spring Boot Dubbo Zookeeper(含ZK安装脚本)

文章目录 Spring Boot Dubbo Zookeeper&#xff08;含ZK安装脚本&#xff09;简介DubboCommonProviderConsumer Zookeeper Spring Boot Dubbo Zookeeper&#xff08;含ZK安装脚本&#xff09; 简介 Dubbo Common 公共依赖 <!-- Spring Boot Starter --> <dependen…