学习创建第一个 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如下

javascript 复制代码
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"

这里搜到了解决方法。即在对应目录创建文件夹即可

相关推荐
风无雨4 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架
安分小尧9 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员9 小时前
React安装使用教程
前端·react.js·前端框架
yanyu-yaya10 小时前
react redux的学习,单个reducer
前端·javascript·react.js
HelloRevit15 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
ohMyGod_12315 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
摸鱼仙人~19 小时前
React: hook相当于函数吗?
前端·javascript·react.js
百锦再19 小时前
React编程高级主题:错误处理(Error Handling)
前端·javascript·react.js·前端框架·vue·web·angular
FanetheDivine21 小时前
solid: react导演剪辑终极扑街版
前端·react.js
腾讯TNTWeb前端团队1 天前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js