如何使用create-react-app脚手架快速搭建一个react项目

create-react-app是一个react工程脚手架,可快速构建一个react应用。内置webpack、babel、es6等特性,开发者无需关注配置,关注业务模块的开发即可

环境:

nodejs环境

步骤:

第一步:

打开cmd命令行窗口,输入npm -version,查看当前的npm版本
如何使用create-react-app脚手架快速搭建一个react项目_第1张图片

第二步:

如果npm版本是5.2以上版本,在cmd中输入 npx create-react-app my-app,当前目录下创建一个名为my-app的工程,命令行窗口中将会显示依赖库的一些日志,看第四步。
如何使用create-react-app脚手架快速搭建一个react项目_第2张图片

第三步:

如果npm版本低于5.2,则全局安装create-react-app,cmd输入npm install -g create-react-app;create-react-app下载完成后,cmd中输入create-react-app my-app
如何使用create-react-app脚手架快速搭建一个react项目_第3张图片

第四步:

此时,相关依赖开始下载安装,如图所示
如何使用create-react-app脚手架快速搭建一个react项目_第4张图片

第五步:

工程创建成功后,可以在系统文件目录看到my-app工程。
如何使用create-react-app脚手架快速搭建一个react项目_第5张图片

第六步:

打开my-app工程,目录结构比较简单,没有任何配置文件(无需配置)
如何使用create-react-app脚手架快速搭建一个react项目_第6张图片

第七步:

cmd命令行窗口中输入cd my-app进入my-app目录

第八步:

输入npm start, 以开发模式启动服务
如何使用create-react-app脚手架快速搭建一个react项目_第7张图片

第九步:

服务启动成功后,将会自动弹出浏览器,并访问工程
如何使用create-react-app脚手架快速搭建一个react项目_第8张图片
到此,react项目已经搭建完毕

我们可以来测试一下这个项目

打开my-app的App.js文件,做一些简单的修改,比如我们在后面加上“JavaAlliance”字符串:
如何使用create-react-app脚手架快速搭建一个react项目_第9张图片,工程将会实时响应你的修改
如何使用create-react-app脚手架快速搭建一个react项目_第10张图片
至此,一个简单的react工程已经搭建完成,开发者无需关注项目的配置,只需关注业务模块的开发。

你可能感兴趣的:(React)