详解React 快速上手脚手架 create-react-app

1. react 快速上手脚手架 create-react-app

为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。
当然,如果你需要 React Native 的脚手架项目,可以查看这里:create-react-native-app

使用的原因以及特性:

无需配置;

集成了对 React, JSX, ES6 和 Flow 的支持;

集成了开发服务器;

配置好了浏览器热加载的功能;

在 JavaScript 中可以直接 import CSS 和图片;

自动处理 CSS 的兼容问题,无需添加 -webkit 前缀;

集成好了编译命令,编译后直接发布成产品,并且还包含了 sourcemaps。

截图

2. create-react-app 的安装

命令行中使用 npm 执行安装命令 npm install -g create-react-app,注意需要添加 g 参数进行全局安装以及权限的问题。

截图

截图

截图

安装后执行运行命令 npm start 即可在浏览器看到运行后的结果,并且已经实现了热加载的功能。

截图

3. 需要注意的几个点

Node 的版本必须 >= 4,推荐 Node >= 6 and npm >= 3;

运行起来后浏览器已经实现了热加载刷新,修改代码保存后浏览器会自动刷新;

执行 npm test 或 yarn test 可以执行测试动作,更多请参阅这里;

编译项目执行 npm run build 或 yarn build;

更多使用向导请插件这里。

以上就是详解React 快速上手脚手架 create-react-app的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3196978.html

(0)
上一篇 2025年4月1日 03:16:50
下一篇 2025年4月1日 03:16:59

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 老凤祥金手镯回收价格怎么样呢?上手好看吗?

      人们可能对黄金首饰不太感兴趣,许多人会认为首饰是用来增强个人气质的,而像黄金首饰这样的首饰戴在身上时总不会有这种感觉,相反,他们会觉得自己更守旧。金奢易黄金回收公司小编认为,与金项链、金耳环和金戒指相比,金手镯实际上不存在这些问题。搭配…

    用户投稿 2025年5月23日
    1600
  • 一分钟快速止咳小妙招有哪些

    咳嗽是生活中比较常见的一个不适症状,很多人都会容易咳嗽,尤其是小孩子和老年人。咳嗽的种类有很多,不同症状的咳嗽适合不同的治疗方法,有些咳嗽适合食疗,有些咳嗽适合按摩,有些咳嗽适合药物治疗等等,具体要看咳嗽的症状以及类型。 一分钟快速止咳小妙…

    2025年5月17日 用户投稿
    875.2K00
  • 黄金去哪里可以快速的变现呢?

    黄金的首饰佩戴起来金灿灿的非常的好看,给人一种贵妇的既视感,很多人都喜欢金首饰,主要原因是因为黄金保值,遇到需要现金周转的时候可以快速的变现,以缓解燃眉之急,有或者是时间久了,款式不喜欢了,黄金的首饰质地比较的软,变形了以后肯定句不好看了,…

    2025年5月16日
    1600
  • 老凤祥的钻石戒指回收哪里比较快速方便估价高?

    老凤祥最让小伙伴们熟悉的其实是品牌旗下的一些金子首饰,不过也会有消费者购买老凤祥的钻戒。而钻石珠宝首饰又是可以拿到二手市场上回收变卖的一种奢侈品。最近也有朋友咨询小编老凤祥的钻戒怎么回收。可以回收二手奢侈品的平台这么多,那么老凤祥的钻石戒指…

    2025年5月16日
    1600
  • 详解在React 组件中使用Echarts的正确姿势

    本文主要介绍了在react 组件中使用echarts的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化,第一反应当然是Ec…

    2025年5月1日
    000
  • bootstrap和react区别

    在很多人眼里bootstrap和react都是前端框架,其实他们还是有很多区别的,bootstrap是前端页面框架,用于快速开发响应式页面,react的VisualDom(虚拟Dom);由React来管理Dom树的变化, 开发者只需使用Re…

    2025年5月1日
    000
  • bootstrap和react的区别是什么?

    区别:react是基于mvc模式的javascript框架,而bootstrap只是一个基于HTML、CSS、JAVASCRIPT开发的前端ui框架;bootstrap是基于html的UI构建工具,react是基于组件的工程构建方式。 了解…

    2025年5月1日
    000
  • swoole和workerman:哪个更容易上手?

    swoole和workerman:哪个更容易上手? 随着互联网的快速发展,PHP作为一种常用的编程语言,也有了许多针对高并发、高性能的解决方案。在PHP的高性能领域,swoole和workerman是两个备受关注且使用广泛的开源项目。它们都…

    2025年4月2日
    100
  • vscode怎么快速建立html结构

    1、打开vscode软件,新建一个html文档 2、输入一个叹号,点击第一个选项 3、就快速的生成了一个HTML结构了 立即学习“前端免费学习笔记(深入)”; 4、输入叹号选择第二个选项只会生成头部标识 5、输入叹号也可以直接按tab键快速…

    2025年4月2日 编程技术
    200
  • Nginx配置React项目报404怎么解决

    代码: location /demo {  root E:/;  index index.html index.htm; } 这样配置的有一个问题,只能 http://localhost/demo/来访问。  如果想访问里面的其它界面如 h…

    编程技术 2025年4月2日
    200

发表回复

登录后才能评论