搭建简单的React项目

清疚 2022-05-31 05:53 308阅读 0赞

*  [react…目录][react]

--------------------

\#\#

React学习介绍  
学习了几个星期的React,想稍微整合一下知识，所以写了这篇博文，以搭建一个基础的react的项目为线索整合学到的知识，具体很多的细节不深究。以及由于还是小白一个，可能我所提供的步骤不是最好的解决方案，甚至繁琐，但一步步操作是能够建立一个简单react项目的。对于初窥React比我还小白的小白还是有帮助的~

--------------------

华丽的分割线 \*\*\* 首先是搭环境，我这里用到nodejs，vscode编辑器。 Nodejs：官网（https://nodejs.org/zh-cn/download/）下载nodejs安装包安装。Nodejs是啥我也所不太清楚，大抵可以先认为是我们React项目运行的环境吧。会用了再去了解了解。新版本的nodejs安装后会自动帮你设置环境变量（感谢），我们就不用操作了。 ‘npm 命令’：npm是nodejs的包管理器，用于node插件管理（该命令可直接在命令提示符中执行）。可以用npm命令从外国下载所需的插件安装（react所需的各种包都是可以通过npm下载安装的）。但是因为npm安装插件是从国外服务器下载，国外国外国外，重要的事情说三遍，国外的东西不是你想拿就能轻易拿的即使是免费....不过淘宝团队帮我们拷贝了一份到国内，并且定时拷贝保证同最新的插件同步。这样我们就可以使用淘宝拷贝的插件来安装插件，但是用他们的东西就得用他们的命令cnpm。 安装：执行npm config set registry https://registry.npm.taobao.org 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误。 cnpm命令与npm命令在使用上没有任何差别，如果一定要说差别的话也有，国内的网络你用npm命令下载插件会非常慢。其后就可以用cnpm完全代替npm命令进行操作了。

vscode编辑器：好东西！首先是不要钱，其次真的是好东西。[https://code.visualstudio.com/download][https_code.visualstudio.com_download] 下载，该编辑器是微软家族的一员。之前想使用webstorm开发，但是要钱又找不到破解版所以就作罢。vscode提供了大量插件供开发使用，本身vscode是非常干净，没有什么特别的功能，但是丰富的插件提供了各种各样的功能，会用后可以慢慢研究。vscode安装好后打开会有一个配置界面，我什么都没配置，说明不配置就可以直接用了，大家放心~  
接下来就是要建立react了。React项目要配置的东西很多，作为小白我会写几行React破代码但还不会配置，但要自己一个个去写配置文件对于我这个小白来说是极不合理的。这里推荐使用create-react-app插件进行开发，这是facebook官方的脚手架工具，会帮你建立一个react项目，安装所需的包，并帮你写好配置文件。

安装命令cnpm install -g create-react-app。  
cnpm的安装插件使用很简单,cnpm install -g \[插件名\] 就可以安装该插件到本地了。-g是全局的意思，没有的话就只安装到该目录（或该项目）下。  
create-react-app 安装好之后我们（create-react-app插件）就要搭建一个简单的react项目了，在项目打算安放的路径下打开命令控制台。  
执行create-react-app xiaobai-app，一个名为xiaobai-app的React项目就建立好了（我建立的时候时间要好一会，具体为什么还没细究，可能是由于项目所需的包是默认通过npm从国外下载的缘故）。  
之后就可以用vscode的打开该项目进行编辑了。我们使用create-react-app的原因对我来说就是因为vscode没有帮你建立一个react项目的功能（插件里有没有就不知道了），但是webstorm里面是有提供创建react项目的功能，这也说明vscode工具是多么干净。。。  
项目创建好后，打开vscodem，选择xiaobai-app目录打开。

一个简单的项目结构如上图，package.json是一个最重要的配置文件。里面配置了项目依赖的包，最新开始加载的入口文件等信息。  
接下来我们就可以运行这个React项目了。Ctrl+\` 打开终端，  
cnpm install  
cnpm start  
该项目就运行起来了。

搭建结束，接下来就是编写自己的React项目了。

[react]: https://blog.csdn.net/u014296316/article/details/85484043
[https_code.visualstudio.com_download]: https://code.visualstudio.com/download