React学习(一)React开发环境搭建,使用create-react-app创建一个demo

Dear 丶 2023-06-20 06:10 159阅读 0赞

**本系列文章实属学习笔记，刚刚接触，若有错误之处望指正，非常感谢，大佬轻拍**  
React开发过程中会使用大量node.js提供的各种库（就像Java开发需要使用大量的jar包一样），我们在开发Java程序时使用Maven来管理开发过程中使用的jar包，相应的在开发React程序时我们需要使用npm (这里给个npm的全称吧，node package manager，Node 包管理器，看翻译过来的意思就知道是干什么的) 来管理node提供的各种库。

## 第一步：安装node.js ##

去[官网][Link 1]下载安装node.js，我这里搭建的环境纯属学习使用，所以我安装当前的最新版本。一路next就行，这里我就不截图了。当我们使用官网下载的安装包进行安装时会自动帮助我们安装好npm。

有朋友可能会问，我怎么知道安装好没有？别急

node -v
    npm -v

运行截图如下：  
![在这里插入图片描述][20191208102055130.png]  
控制台上已经显示了我们安装的node和npm的版本。  
这里我们已经把环境搭建好了，接下来安装好我们喜欢的开发软件就可以进行开发了。

## 第二步：把官方默认的镜像修改为淘宝镜像（你也可以不这么做，那就跳过这一步，如果跳过，请把后文中提到的cnpm替换为npm，但是有可能出现下载库很慢或者卡死的现象） ##

react这个是老外的东西，所以我们开发过程中使用的各种库都要从国外服务器去下载，经常卡死，所以我们可以使用国内的镜像，操作方法如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]  
检查一下镜像是否修改成功：

cnpm -v

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]  
镜像已经修改好了。

## 第三步：安装create-react-app工具 ##

我们在开发Java、Android等项目时需要配置很多运行环境、编译环境等配置，React开发也是相同的，但是React开发团队为我们提供了一个一键创建React项目的工具，就是create-react-app。

cnpm install -g create-react-app

上面命令中的 \-g 是全局安装的意思，这样执行命令后create-react-app这个创建项目的工具在这台设备上任何地方都可以使用，如果把命令中的 \-g 去掉后执行，我们依然可以使用create-react-app工具创建项目，但是之后每一次新建react项目我们都要执行这条命令。  
检查工具是否安装成功：

create-react-app -v

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]  
可以看到工具已经安装成功！

## 第四步：创建react项目 ##

create-react-app react-demo
    后面这个react-demo为新项目名称

我给我这个新react项目命名为：react-demo  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]可以看到语句执行时其实已经做了大量的工作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 4]  
到这里项目已经创建好了，可以到相应路径下 （文章中涉及到的路径大家可以根据自己机器情况调整，不是一成不变的） 看一下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 5]  
这里可以看到，项目已经创建好了。  
我们分析一下项目结构：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 6]  
不同版本的create-react-app创建的项目结构略有差异  
node\_modules 这个文件夹包含了所有通过 npm 安装的 node 包  
public 这个文件夹包含了所有项目构建出的产品文件。最终所有你写在 src/ 文件夹里面的代码都会在项目构建的时候被打包放在 public 文件夹下。  
src 我们编写的所有程序文件都在这个文件夹下  
.gitignore  
package.json 这个文件包含了 node 包依赖列表和一些其他的项目配置  
package-lock.json  
README.md == .md 表示这是一个 markdown 文件，包含了这个项目的一些基本的指令和介绍==  
**到这里我们就已经创建了一个react项目，可以运行起来稍微开心一下了。**

进入项目根目录react-demo
    cd react-demo
    运行项目
    cnpm start

这时原来的cmd黑窗口会自动关闭，然后自动打开一个新的dos命令窗口如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 7]  
dos界面提示很详细，这时务必不要关闭这个黑窗口，一旦关闭，项目运行进程就会关闭，项目就停了。  
这时浏览器会自动打开一个页面，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 8]  
到此一个新的react项目就已经创建成功。  
但是我们不能一直在dos界面操作，需要选择一款IDE，这里我选择使用微软的VSCode.

## 第五步：选择一款编辑器，这里我选择VSCode ##

官网下载安装包，仍然是一路next,安装后的界面如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 9]  
File—Open Folder—选择刚刚我们新建项目的根目录，打开，就是下面了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 10]  
到这里就可以自由飞翔了！！！！  
后面就开始编码了，要是看到项目结构不知道从哪儿下手的小伙伴可以看我React系列笔记二：[React学习(二) React学习之demo分析][React_ React_demo]

[Link 1]: https://nodejs.org/en/
[20191208102055130.png]: https://img-blog.csdnimg.cn/20191208102055130.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191208103049953.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191208103325421.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191208110457945.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191208114824367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191208114904440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191208115046515.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191208134146713.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191208145617407.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191208145653931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191208145857824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191208150038219.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9sdW1pbmc=,size_16,color_FFFFFF,t_70
[React_ React_demo]: https://blog.csdn.net/sun_luming/article/details/103445251