欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

什么是create-react-app?create-react-app构建React开发环境的应用

程序员文章站 2022-05-31 22:25:29
...

什么是create-react-app?create-react-app又能做些什么?本篇文章将给大家来分享关于create-react-app构建React开发环境的方法。

1、create-react-app是什么?
做一个react项目,构建其开发环境对初学者来说是很困难的!所以,facebook专门出了create-react-app命令,用于react项目开发环境的构建!

create-react-app是基于webpack+ES6创建的。

2、如何使用。
依次在命令行执行以下命令就能完成项目的构建。

cnpm install -g create-react-appcreate-react-app my-app 
//这里的my-app是随便起的一个项目名称而已。
cd my-app/
npm start

最终得到的项目目录如下:
什么是create-react-app?create-react-app构建React开发环境的应用
效果图是这样的:
什么是create-react-app?create-react-app构建React开发环境的应用
3、关于项目目录的说明:
public文件夹:里面的index.html,是整个react项目最终打包的index入口页面的项目模板。但是和我们的代码编写无关,和最终的页面展示是相关的。

src文件夹:是我们编写代码的地方。

src/index.js:是整个项目的入口js文件。
src/app.js:是被index引入的一个组件,也用一个js文件表示。
src/index.css:index.js中的的样式文件。
src/app.css:是app.js的样式文件。
logo.svg:是一个svg的图片文件。用于界面展示使用。

4、但是个人不会满足于这样的结构,很不适合开发。
下面这个是我进行一个初始化的一个改造:
什么是create-react-app?create-react-app构建React开发环境的应用

改好目录,改好项目路径,在这样的目录下,继续我们的项目开发工作。

相关推荐:

微信小程序 教程之小程序配置

微信小程序和支付宝小程序对比区别介绍

以上就是什么是create-react-app?create-react-app构建React开发环境的应用的详细内容,更多请关注其它相关文章!

相关标签: create-react-app