react-1 创建一个最简单的可运行的 react 项目

素颜马尾好姑娘i 2022-03-19 04:44 276阅读 0赞

（测试环境：windows）

1. 第一步，需要一个目录，即一个文件夹， 这里我在 f 盘下建立了一个临时的 react-app-delete 目录，

目录里已经存在两个子目录 my-app  和  my-app-example ， 这里不用管（如下图）；

2. 使用命令   npm install -g create-react-app  安装 create-react-app 这个东西，它是下面帮助我们创建

一个简单项目的工具，我们先安装一下，下面图片中没有显示这一步，因为我已经提前装好了，这里

不重复安装； 在 react-app-delete 目录中使用命令：npm install -g create-react-app 即可；

有的时候安装可能会出现 error ，那么我们需要解决下这个问题，这里可以尝试使用命令：

npm cache clean --force   ， 命令执行之后，再次安装即可，本人遇到的是这个问题，如果是其它的

问题或者这个命令不能解决问题，那么自行搜索对应的解决方案尝试即可；

3.  安装完 create-react-app 之后，我们就可以利用这个工具帮助我们创建项目了，

我这里创建一个测试的项目 my-app-level2  ，

使用命令： create-react-app  my-app-level2  即可，创建成功如下图；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70][]

4. 项目创建完成，我们测试下是否能够正常启动，

先进入我们的项目， cd my-app-level2

在项目中执行命令 ： npm start

等待一会，项目自己启动；

如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1][]

这样一个简单的 react 项目就创建完成，我们就可以利用这个项目进行其它内容的学习了，

这是我们继续学习的基础，先搞定这个；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70]: /images/20220319/cb89974c90f5401cae7dbb79e7134da4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N2cGVy_size_16_color_FFFFFF_t_70 1]: /images/20220319/12ec62ae36754a29b631803f6cf04923.png

发表评论取消回复

表情：

评论列表（有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

相关 React项目的创建

React环境准备及项目的创建环境准备：vscode或其他软件、node、yarn 核心思想;组件化开发（js、es6） node.js [点击我去下载][

╰半夏微凉°/ 2023年01月13日 01:38/ 0 赞/ 162 阅读

相关创建react项目

之前搭建reactnative环境node.js、cnpm、npm、yarn都安装好了，所以下面只是查一下版本。安装cnpm npm install -g

╰+哭是因爲堅強的太久メ/ 2022年12月11日 07:46/ 0 赞/ 156 阅读

相关 ⑤ React 基于react脚手架构建简单项目

查看专栏其它文章： [① React 介绍及JSX简单使用][React _JSX] [② React 面向组件编程(state、props、refs)、事件处理][Rea

灰太狼/ 2022年10月29日 09:24/ 0 赞/ 209 阅读

相关 REACT_react创建项目

npm install -g create-react-app create-react-app my-app ————创建my-app项目 cd my-ap

ゝ一世哀愁。/ 2022年10月11日 00:59/ 0 赞/ 185 阅读

相关从0到0.1：最简单的React项目搭建

本文原创地址：[http://blog.csdn.net/zhou\_xiao\_cheng/article/details/54677689][http_blog.csdn.

Dear 丶/ 2022年07月11日 09:29/ 0 赞/ 265 阅读

相关学习react.js最简单的入门demo1

一、HBuilder+谷歌浏览器我学习 React 时，就很苦恼。有的教程讨论一些细节问题，对入门没帮助；有的教程写得不错，但比较短，无助于看清全貌。我断断续续学了几

刺骨的言语ヽ痛彻心扉/ 2022年06月07日 23:41/ 0 赞/ 138 阅读

相关创建React项目

> 1，安装好node.js > 2，安装好npm > 3，创建react项目：安装脚手架，创建项目名，进入项目，启动项目 > > npm install -

小灰灰/ 2022年05月10日 08:22/ 0 赞/ 174 阅读

相关 react-6 react-router-dom 的简单使用（1）

之前我们了解了react-router-dom是路由的组件，下面看看这个路由的组件的使用；我们之前使用create-react-app 创建了简单的项目目录：my-app-

曾经终败给现在/ 2022年04月23日 11:50/ 0 赞/ 172 阅读

相关 react-1 创建一个最简单的可运行的 react 项目

（测试环境：windows） 1. 第一步，需要一个目录，即一个文件夹，这里我在 f 盘下建立了一个临时的 react-app-delete 目录，目录里已经存

素颜马尾好姑娘i/ 2022年03月19日 04:44/ 0 赞/ 277 阅读

相关 react项目的笔记1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2021年12月03日 03:59/ 0 赞/ 312 阅读