React从入门到项目--第四天（React脚手架搭建项目）

Love The Way You Lie 2023-06-07 12:08 8阅读 0赞

什么是脚手架呢，我刚听到这个词的时候也是一脸懵逼，连忙去搜了一下，就找到了它的百度百科，介绍就是下面这样。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70][]

在了解了脚手架之后，就不去吐槽这个百科了，对于项目的脚手架，其实也是一个独立的包，它可以帮助你，通过特定的命令去下载一个别人整理好的空白项目，说是空白项目也不完全正确，项目的基本结构已经搭好了，相关的配置已经完成了，只是欠缺项目内容相关代码。

其实两个脚手架还真的有相似之处，盖房子就好比写项目一样，都是帮助我们进行项目的构建的工具。

不乱扯了，说正经的，之前了解过Vue的脚手架，是vue-cli，而对于React来说，它的脚手架是**create-react-app**，真的是见名知意：创建React应用程序。创建程序步骤：

create-react-app 项目名
    
    cd 项目名
    
    npm start

运行create-react-app加项目名称，会在当前目录下创建一个为项目名的文件夹，就是初始化生成的项目，这时候通过cd进入项目目录，通过**npm start**运行项目，这时候这个初始化的项目就会运行在本地服务器的8080端口下，可以通过localhost:3000进行访问，会看见一个基本的界面。

项目的基本目录如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70 1][]

node\_modules：大家都知道的，第三方依赖模块，属于一个项目里最大的文件夹，包括第三方的包，和第三方包依赖的模块，里边每一个文件夹都是一个独立的项目。

public下的index.html是项目的主页面，通常对于一个单页应用来说，是只包含一个div的页面。

src是项目的源码文件夹，我们定义的组件，项目的主要代码都在这个文件夹下。

.gitignore是GitHub的忽略文件，包含项目不需要提交的东西，比如说node\_modules还有idea，通常是需要被忽略的，因为在执行npm init的时候，会重新下载这些包的。

package.json是项目的配置文件，包括项目名称，作者，版本号，依赖包等信息。

README.md是每个项目都有的描述文件，是基于Markdown的，是项目的描述文件，在GitHub上会直接的加载展示在页面上，对项目进行描述。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70]: /images/20230601/4c105aa9418d4c17afeb2c9f9d1b0055.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70 1]: /images/20230601/37b74bd1bfca461abc3161a1f2aeba88.png