React基础——快速搭建开发环境
近年来各大前端框架流行,基本上已经变成了React,Vue和Angular“三足鼎立”的状况。其中React依赖于完整的生态环境,Facebook巨大影响力以及国内BAT等各大公司的纷纷推崇,不得不承认React已经成为最火的前端框架了(当然现在Vue作为后起之秀也是很厉害的,这里大家就不要纠结了,仅仅代表个人观点)。
开发React你的几种选择:
- 使用一些在线编辑的网站,在线快速学习,如
CodePen
,jsfiddle
等
优点:快速便捷不需要过多配置
缺点:这种方式也就是让你尝个鲜,写一写demo用的
code snippet
- 使用webpack从零开始编写webpack配置文件,根据项目需要配置各种loader,plugin以及对于生产环境的一些优化
优点:好吧其实除了学习webpack到底做了什么,好像都是缺点。。。
缺点:配置复杂(Webpack的配置开一节课来讲应该都没有问题),官网文档写的不接地气
- 使用React官方提供的的脚手架
Create-React-App
(后面简称CRA)
优点:傻瓜式,典型的
out-of-the-box
,你不用太关心到底做了什么(不过有些定制化还是要自己搞得,后面的文章再说)
缺点:满足不了你的好奇心,
eject
之后来查看好像代码有点多
综上所述,如果你是React新手,那么直接推荐你用第三种方式,这也是这篇文章接下来要讲的。
如何使用Create-React-App
首先我们需要保证电脑上面拥有NodeJS环境,安装过npm包管理,如果不清楚怎么弄,Google或者Baidu一下有很多教程这里就不多说了
- 全局安装create-react-app 命令行工具
npm install -g create-react-app
复制代码
- 创建项目
create-react-app my-app
复制代码
耐心等待之后(国内可能网速不好,可以FQ或者使用淘宝镜像源,推荐使用nrm命令快速切换各种镜像源),就会看到我们新创建的目录,展开目录大概结构如下:
├── README.md---------------------------介绍文档
├── node_modules------------------------第三方安装包
├── package.json------------------------npm项目配置
├── .gitignore--------------------------git配置
├── public------------------------------公共资源
│ └── favicon.ico
│ └── index.html----------------------首页html
│ └── manifest.json
└── src---------------------------------源码目录└── App.css└── App.js└── App.test.js└── index.css└── index.js------------------------入口js文件└── logo.svg└── registerServiceWorker.js
复制代码
- 启动项目
cd my-app
npm start 或者 yarn start (个人比较推荐后者比较快)
复制代码
Here we go! 打开浏览器,输入 http://localhost:3000
就能看到我们的第一个React应用了,这里CRA
帮我们在后台启动了一个测试服务器来实现页面的预览以及热更新,修改对应的文件就会更新到浏览器上。对于开发真正的项目这还远远不够,后面文章会讲如何加入Hot-Module-Replacement
更加高效的来完成开发工作。
CRA帮我们做了什么呢?
就像官方定义的那样Create React apps with no build configuration.
。create-react-app帮我们省去了很多环境的配置,提供了一个开箱即用的工具,假设我们自己要配置React开发环境大概需要做以下几步:
- 安装webpack(用于打包应用),webpack-dev-server(一个开发服务器来预览应用)
- 创建webpack配置文件,一般分为开发配置和生产配置两个文件
- webpack配置文件指定了应用的入口文件,各种文件的处理loader(babel, css-loader,style-loader,less-loader,sass-loader, url-loader, file-loader等等)和各种插件(htmlwebpackplugin, uglifyjsplugin等等)的配置,这些配置根据个人用到的东西因人而异。
- 等等(只能用等等呢个来描述了,有很多种需求)...
更多学习链接: Create-React-App Github主页
React基础——快速搭建开发环境相关推荐
- ecology9 后端开发环境搭建_利用Vagrant快速搭建开发环境
Docker大家应该都了解吧,一个非常方便的技术,可以让我们随时随地部署应用.但是部署应用虽然方便了,开发环境的搭建还是那样的,要自己安装一大堆软件.那么有没有类似的工具可以方便我们呢?这就是本文要的 ...
- 快速搭建开发环境(Vs Code)
使用VS Code + Maven 快速搭建简易开发环境 (Maven很强大,这里我是用Maven主要目的,省去了对jar包的管理) (VS Code也很强大,这里我是用VS Code主要目的,感觉比 ...
- Teamcenter(Enterprise 2007) 开发之- 快速搭建开发环境(windows)
一直在培训新人,也总是在配置TC的开发环境. 首先得安装正常环境,一般状况下正常环境的安装步骤有: 1. 执行exe 解压安装档 2. 安装(Db 创建) 等一系列的步骤 耗时比较长, 如果有补丁包的 ...
- Atlas 200 DK 系列 -- 快速搭建开发环境
一 .PC虚拟机上安装Ubuntu (系统版本为(ubuntu-16.04.3-desktop-amd64.iso),与版端系统版本必须对应(ubuntu-16.04.3-server-arm64.i ...
- Python基础:搭建开发环境(1)
1.Python语言简介 2.Python环境 Python环境产品存在多个. 2.1 CPython CPython是Python官方提供的.一般情况下提到的Python就是指CPython,CPy ...
- 云主机快速搭建开发环境
1.添加用户与用户组 groupadd admin useradd -m -g admin admin passwd admin 2.安装docker 使用root帐号安装 # 安装yum-utils ...
- (001) RN开发之Mac搭建开发环境
接触RN第一步:React Native中文网 搭建开发环境 必须安装的依赖有:Node.Watchman 和 Xcode. 我们推荐使用Homebrew来安装 Node 和 Watchman.在命令 ...
- 深入浅出Docker(五):基于Fig搭建开发环境
本文原创版权归 infoq 肖德时 所有,此处为技术收藏,如有再转,请于篇头保留原创作者及出处,以示尊重! 作者: 肖德时 原文: http://www.infoq.com/cn/articles/d ...
- stm32f4 hal 4位数码管_STM32裸机开发基础篇01开发环境搭建(HAL库)
前言 众所周知,在32位单片机中,STM32占有重要市场份额,其社区活动频繁,网上相关资料也比较多,无论是学习入门,还是工作使用,都无疑是极好的选择,本节开始,我们将学习如何使用STM32,首先,我们 ...
最新文章
- 祛除雀斑的健康方法 - 健康程序员,至尚生活!
- 介绍微软一个罕为人知的无敌命令
- yolov3 python_Python 3 Keras YOLO v3解析与实现
- GNU编译优化级别-O -O1 -O2 -O3
- Vue---mock.js 使用
- 光动能表怎么维护_西铁城手表推荐,西铁城光动能表推荐选购指南
- 小程序 微信红包封面后台独立版 带测评积分功能源码
- android olhttp 缓存,android okhttp 缓存设置
- go mod管理golang包
- Android 渗透测试学习手册 第九章 编写渗透测试报告
- Tomcat配置和使用——详解
- 装机——2021年底装机推荐,附9000元DIY介绍
- pycharman使用小结
- 数学分析教程(科大)——2.5笔记+习题
- linux红帽8怎么安yum,RedHat Linux 8本地Yum源配置方法
- 将大文本文件分割成多个小文件
- Linux命令 磁盘管理——了解磁盘、磁盘分区
- 解决 NDP40-KB2468871不能安装
- ab的plc跟西门子哪个好些_周报61期 | 西门子全系列及博图软件常见问题解答
- js关闭谷歌浏览器的当前页面