学习创建第一个 React 项目

news2024/11/14 3:04:06

目标

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

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

相关文章

基于未来搜索算法优化的BP神经网络(预测应用) - 附代码

基于未来搜索算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于未来搜索算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.未来搜索优化BP神经网络2.1 BP神经网络参数设置2.2 未来搜索算法应用 4.测试结果&#xff1a;5…

MLCC产生噪音的原因及解决方案

1.内部构造及工作原理 MLCC是Multilayer Ceramic Capacitor多层片式陶瓷电容 决定电容容值大小的主要参数&#xff1a; 真空介电率 相对介电常数K&#xff1a;和MLCC使用材料有关的常数 有效面积S 介电层厚度d 堆叠层数N 所以面积越大堆叠层数越多的MLCC容值越高 2.MLCC产生啸…

shell数据结构

less可以创建一个文件分页 3次a&#xff0c;是不是连续的 重定向输出>会清空文件内容 cp一份新的&#xff0c;或者新建一个 journalctl 查看启动日志 将前面id传给 xargs 通过journalctl -b 查找对应的日志&#xff0c; pi好像的地址 &#xff1f;&#xff1f;&#xff1f…

用Cmake build OpenCV后,在VS中查看OpenCV源码的方法(环境VS2022+openCV4.8.0) Part III

用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法(环境VS2022openCV4.8.0) Part III 用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法&#xff08;环境VS2022openCV4.8.0&#xff09; Part I_松下J27的博客-CSDN博客 用Cmake build OpenCV后&…

C++设计模式_01_设计模式简介(多态带来的便利;软件设计的目标:复用)

文章目录 本栏简介1. 什么是设计模式2. GOF 设计模式3. 从面向对象谈起4. 深入理解面向对象5. 软件设计固有的复杂性5.1 软件设计复杂性的根本原因5.2 如何解决复杂性 ? 6. 结构化 VS. 面向对象6.1 同一需求的分解写法6.1.1 Shape1.h6.1.2 MainForm1.cpp 6.2 同一需求的抽象的…

时序预测 | MATLAB实现基于TSO-XGBoost金枪鱼算法优化XGBoost的时间序列预测(多指标评价)

时序预测 | MATLAB实现基于TSO-XGBoost金枪鱼算法优化XGBoost的时间序列预测(多指标评价) 目录 时序预测 | MATLAB实现基于TSO-XGBoost金枪鱼算法优化XGBoost的时间序列预测(多指标评价)预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现基于TSO-XGBoost金枪鱼算…

Android学习之路(11) ActionBar与ToolBar的使用

自android5.0开始&#xff0c;AppCompatActivity代替ActionBarActivity&#xff0c;而且ToolBar也代替了ActionBar&#xff0c;下面就是ActionBar和ToolBar的使用 ActionBar 1、截图 2、使用 2.1、AppCompatActivity和其对应的Theme AppCompatActivity使用的是v7的ActionBa…

数据分析基础(1)——超实用‼️Excel 常用函数和实用技巧

学习教程&#xff1a;☑️ 懒人Excel - Excel 函数公式、操作技巧、数据分析、图表模板、VBA、数据透视表教程 目录 一、Excel知识体系✨ 二、Excel 常用函数&#x1f4a1; 三、Excel 技巧 &#x1f914; 补充&#xff1a; 1、自学数据分析学习路线 2、数据查询网站 一、…

服务器安全-增加clamav杀毒

1.安装epel源 yum install epel-release 2.安装 clamav yum install clamav clamav-server clamav-data clamav-update clamav-filesystem clamav-scanner-systemd clamav-devel clamav-lib clamav-server-systemd pcre* gcc zlib zlib-devel libssl-devel libssl openssl …

代码随想录第32天|122.买卖股票的最佳时机 II,55. 跳跃游戏 ,45. 跳跃游戏 II

122.买卖股票的最佳时机 II 122. 买卖股票的最佳时机 II 思路比较简单 class Solution {public int maxProfit(int[] prices) {int res0,sum0;for(int i0;i<prices.length-1;i){if(prices[i1]-prices[i]>0){sumprices[i1]-prices[i];}ressum>res?sum:res;}return …

比较重合点的排斥能

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由5张二值化的图片组成&#xff0c;让A中有2个1&#xff0c;B中有1个1&#xff0c;有一个点重合&#xff0c;排列组合&#xff0c;统计迭代次数并排序。 得到数据 构造平均列A 构造平均列…

JDK介绍

JDK,JRE和JVM之间的关系 JVM是运行环境&#xff0c;JRE是含运行环境和相关的类库&#xff0c;跟node环境是一个意思 JDK目录介绍 目录名称说明bin该路径下存放了JDK的各种工具命令。javac和java就放在这个目录。conf该路径下存放了JDK的相关配置文件include该路径下存放了一些…

DevOps系列文章 之 Python基础

流程控制和循环 if语句 它由三部分组成: 关键字本身, 用于判断结果真假的条件表达式, 以及当表达式为真或者非零时执行的代码块 可支持else和elif;条件表达式并不需要用括号括起来 1、标准if 条件语句的语法如下&#xff1a; if expression:expr_true_suite 如果表达式的值…

Java获取环境变量和运行时环境信息和自定义配置信息

System.getenv() 获取系统环境变量 public static void main1() {Map<String, String> envMap System.getenv();envMap.entrySet().forEach(x-> System.out.println(x.getKey() "" x.getValue())); } System.getenv() 获取的是操作系统环境变量列表&…

nginx-获取客户端IP地址

上有服务器与客户端中间是有nginx代理服务器的&#xff0c;上游服务器如何获取客户端真实ip地址&#xff1f; nginx代理服务器设置X-Forwarded-For的header参数&#xff0c;代理服务器通过remote_addr获取客户端ip地址&#xff0c;将ip地址写入nginx代理服务器的X-Forwarded-Fo…

激活函数总结(二十一):激活函数补充(APL、Inverse Cubic)

激活函数总结&#xff08;二十一&#xff09;&#xff1a;激活函数补充 1 引言2 激活函数2.1 Adaptive piecewise linear&#xff08;APL&#xff09;激活函数2.2 Inverse Cubic激活函数 3. 总结 1 引言 在前面的文章中已经介绍了介绍了一系列激活函数 (Sigmoid、Tanh、ReLU、…

JS-this知识点、面试题

一、this指向什么 1.简介 2.规则一&#xff1a;默认绑定 3.规则二&#xff1a;隐式绑定 4.规则四&#xff1a;new绑定 5.规则三&#xff1a;显式绑定 call、apply、bind 6.内置函数的绑定 7.规则优先级 8.this规则之外--es6剪头函数 9.ES6剪头函数this 二、This面试题 面试题…

哔哩哔哩 B站 bilibili 视频视频音效调节 清澈人声

视频音效调节方式&#xff1a;直接视频播放内容界面内鼠标右键点击视频音效调节 注意&#xff1a;需要使用的是谷歌浏览器&#xff0c;我的火狐浏览器试了不行&#xff0c;都没选项&#xff0c;火狐的出来的界面是这样的&#xff1a; 目录 具体操作如下&#xff1a; 1、谷歌…

FreeSWITCH 1.10.10 简单图形化界面3 - 阿里云NAT设置

FreeSWITCH 1.10.10 简单图形化界面3 - 阿里云NAT设置 0、 界面预览1、 查看IP地址2、 修改协议配置3、 开放阿里云安全组4、 设置ACL5、 设置协议中ACL&#xff0c;让PBX匹配内外网6、 重新加载SIP模块7、 查看状态8、 测试一下 0、 界面预览 http://myfs.f3322.net:8020/ 用…

【数据结构】手撕顺序表

一&#xff0c;概念及结构 顺序表是用一段物理地址连续的存储单元依次存储数据元素的线性结构&#xff0c;一般情况下采用数组存储&#xff1b; 在数组上完成数据的增删查改。 1&#xff0c; 静态顺序表&#xff1a;使用定长数组存储元素。 2.&#xff0c;动态顺序表&#xff1…