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

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

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

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

最终得到的项目目录如下:

效果图是这样的:

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、但是个人不会满足于这样的结构,很不适合开发。
下面这个是我进行一个初始化的一个改造:

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

React教程(六)——使用 create-react-app 快速构建 React 开发环境相关推荐

  1. 0基础用vagrant 快速构建larval开发环境 (我杨某人尽力描述了,都有从0介绍)

    vagrant 快速构建larval开发环境 历史背景 今天闲来无事又从头写了一遍,这玩意能干嘛?从0开始,5分钟自动化部署larval框架项目(取决于你网速),无论是windows,mac,linu ...

  2. react打包后图片丢失_如何快速构建React组件库

    俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险〜 目前团队内已经有较为成熟的 Vue 技术栈的 ...

  3. mathcal 对应于什么库_如何快速构建React组件库

    前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

  4. 五分钟用Docker快速搭建Go开发环境

    挺早以前在我写过一篇用 Docker搭建LNMP开发环境的文章:用Docker搭建Laravel开发环境,里面详细介绍了将 nginx. mysql和 php三个容器用 docker-compose编 ...

  5. 修正《用Docker快速搭建Go开发环境》文章中的一处错误

    上周写的文章<五分钟用Docker快速搭建Go开发环境>,文章发出去后有不少阅读量,而且从后台看的数据 60%的人都读完了.今天我自己用下面命令往 容器里的 Go 项目里下载包时发现了一处 ...

  6. python开发环境有哪些特点_快速了解Python开发环境Spyder

    Spyder简介 Spyder (前身是 Pydee) 是一个强大的交互式 Python 语言开发环境,提供高级的代码编辑.交互测试.调试等特性,支持包括 Windows.Linux 和 OS X 系 ...

  7. EclipseLink+H2 快速搭建JPA开发环境

    JPA是Java Persistence API, 是Java提供的持久层开发的统一API.但是JPA只是定义的规范接口,并没有提供具体实现, JPA的具体实现有Hibernate .EclipseL ...

  8. XamarinForms教程构建XamarinForms开发环境

    构建XamarinForms开发环境 所谓Xamarin.Forms的开发环境,就是指在基本硬件和数字软件的基础上,为支持系统软件和应用软件的工程化开发和维护而使用的一组软件,简称SDE.对于任何的程 ...

  9. SpringMVC学习(二)——快速搭建SpringMVC开发环境(注解方式)

    文章目录 说明 1.工程搭建 2.注解配置 2.1.context:annotation-config说明 2.2.context:component-scan配置说明 2.3.mvc:annotat ...

最新文章

  1. HDU 5606 tree 并查集
  2. ThinkPHP5验证码不显示的原因及解决方法
  3. Windows Live Windows Phone 7
  4. 论文浅尝 | 图神经网络的对抗攻击和防御相关文献集
  5. 为什么我的IP地址经常变化
  6. java键盘控制英雄左右移动_js实现键盘操作实现div的移动或改变的原理及代码
  7. SAP HANA Express Edition (HXE)-二进制安装使用步骤
  8. 固定表头和固定列表格解决方案
  9. wifi密码破解软件,谨慎使用!
  10. 历史大数据证“低薪薄俸”易诱发腐败
  11. Unity 的 Scroll View组件
  12. MarkdownPad2自动生成侧边导航栏目录
  13. php圆角的度数计算公式,角度数换算公式(三角函数计算换算角度)
  14. linux 文件755权限的意思,Linux文件和目录的777、755、644权限解释
  15. Vue 使用jsPlumb 实现连线绘图
  16. CIKM 2022|FwSeqBlock: 一种在序列建模中增强行为表征的方法
  17. idata 单片机 新唐_请教新唐单片机N76E003内存空间不足的问题
  18. E.03.22 Learning Apps Have Boomed in the Pandemic. Now Comes the Real Test.
  19. 真·富文本编辑器的演进之路-Span开胃菜
  20. 15单片机通过WIFI模块ESP8266实现手机远程监控可燃气体浓度

热门文章

  1. c语言注释含义,C语言编程规范——注释
  2. blg_统考,打印准考证 网页代码!
  3. EfficientNetV2 Smaller Models and Faster Training
  4. 墨客FileStorm生态与四块科技生态联合发布会
  5. java中怎么让字体可以显示下划线呢_数字文字中的下划线(Java 7特性)
  6. $oracle什么意思,oracle惯用缩写的含义
  7. 小车运料c语言编程,西门子PLC编程实例及技巧(运料小车控制系统)
  8. 合理使用百度开放平台(一)---动物识别
  9. 无乐不作android手机版,酷狗音乐9.4.4版本
  10. 网站用户体验研究:新窗口打开链接还是当前窗口打