初识React脚手架

最近接手了一个React的项目，学习和摸索了一段时间，刚好有一些心得，就记录下来。

这个项目是混合开发(Hybird)的.整体是以原生+Cordova+ReactJS 架构，下面简单说下。

原生是由Swift+OC共同实现的原生框架。有网络请求、获取设备信息、地理位置等原生功能模块。对于网络请求来说，无非就是大家耳熟能详的Alamofire和AFNetworking开源库。至于为什么会有两个相同功能的网络库存在，个人认为是历史原因吧。

也许拿历史原因来说理由，能解释清楚很多项目中实际存在现象。因为这是一个通用的、说不清楚、道不明白、没有办法反驳的理由。

当然还有设备信息和地理位置等功能模块，这些是该系统具有的功能需求，所以存在也是必然。

再说下Cordova，说起跨平台框架，其实现在有很多跨平台框架可选择。例如React Native(RN)、Flutter、Xamarin、lonic、Nativescript等等。关于跨平台框架的介绍，可以看下这篇文章。

站在现在的角度去看Cordova框架是有些过时。若现在立项并确定框架的话，一般是选择Flutter。

但是我们不能以现在的眼光去看待历史框架。因为每一个框架的确定，取决于当时的情况和架构师的认识水平和素养。切不可站在现在的角度去评价，否则有可能“后人复笑后人矣”。当然本文也不是介绍Cordova的知识的，这里就不表述了。

再说下ReactJS。说实话，这里蕴藏着很多的概念和知识点.

例如:JS和JSX、TS与TSX、TSX与JSX的区别、React脚手架、还有Redux，Saga,Router等等概念和知识点。下面简单说几个：

大家都是知道JS就是JavaScript,浏览器识别的脚本语言。

JSX就是JavaScript+XML。在表达上，又比纯粹的JS方便很多了。

TS就是TypeScript，微软开发出来的一个开发语言。比JS高大尚一些，典型的就是支持类型定义，适合大型项目等等，还有其他的一些技术点，这里不一一列举了。我打算把一些我知道的知识点放在以后的文章介绍，今天先聊一聊React脚手架。

React脚手架

脚手架，用原生开发来说，应该就是App的整体框架，只不过Web端喜欢这么叫，而原生端没有这么称呼。其实就如建房子围在房子外围的一层东西而已。如下图

其主要作用是起保护和隔离分层：

保护的意思是：“框架内的东西，不会随意飞出框架外”。例如建房子时，框架内的砖头不会掉到外面砸到人。在我们程序的角度来说，写的程序、调用的库或者方法在框架内，不会调用框架外的库或接口。

隔离分层，以建房子的例子来说，在5楼建房子所需要的材料（如砖头，工具）不需要跑到1楼来取。而是可先把砖头、工具之类的材料，从1楼搬到5楼。然后在5楼内部不同区域获取。显然地，这种方式比上下楼取材料的方式要方便得多。

具体到React脚手架来说，React帮我们封装好了很多组件，我们只要按它的规则使用即可。最简单的例子就是Router，一个Key加一个Component即可以了。Key代表了Component的唯一ID，由Action进行驱动。最终展示出这个Component的界面。至于它是怎么个路由流程，React脚手架帮我们封装并实现好了，我们只管调用。同样的例子还有npm和webpack，都是React帮我们封装好了。

若不采用React脚手架又会怎么样？其实对于功能来说，不会实现不了，只是要花很多的时间和精力，毕竟从零开始开发。

若采用React脚手架呢，那就站在别人的肩膀上开发，那又何偿不是一件省时省力的事情呢？

最后也说下，脚手架也有弊的一面。由于不清楚脚手架内部实现细节，对于实现细节，心里没有底而有所担心。更重要的是，当脚手架出现Bug的时候，那就是痛苦万分了。放弃不行，又不能解决问题。

总之，React的脚手架利弊，我以个人之见上述如上。下面演示下React脚手架。

React脚手架的安装

React脚手架安装很简单，三步骤：

在终端命令上输入(先要进入指定目录)：

1.全局安装create-react-app库。

npm install -g create-react-app

至于为什么要全局安装，而不是局部安装。因为有些权限问题。

2.进入到目录，创建项目名称

create-react-app hello_react

3.进入目录，启动React脚手架

npm start

最后，执行 npm start，就可以在浏览器上看到React的Demo页面了。

Index.html的介绍

由于React是单页面应用(SPA)。整个页面的入口就是index.html.下面介绍下index.html文件内信息。信息都是以注释说明了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><!-- 加载收藏logo。其中 %PUBLIC_URL%指的是Publick文件夹路径--><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><!-- 开启理想视图， 主要是移动端页面的适配--><meta name="viewport" content="width=device-width, initial-scale=1" /><!--适配浏览器页签+地址栏的颜色--><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><!-- 用于指定页面添加到手机主屏幕后的图标--><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!-- 用于应用加壳的配置文件--><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><title>React App</title></head><body><!--当浏览器不支持JavaScript的提示--><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
</html>

以上就是React 脚手架的知识。

初识React脚手架相关推荐

初识React及React开发依赖介绍
文章目录初识React React介绍 React特点 React的依赖介绍 React的开发依赖 Babel和React的关系 React的依赖引入初识React React介绍 React是什 ...
web前端高级React - React从入门到进阶之初识React
第一部分:React入门系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
React学习笔记3：React脚手架
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查.jsx编译.devServe ...
React脚手架搭建及目录结构介绍
react脚手架(create-react-app)搭建 npm install -g create-react-app create-react-app todolist (文件夹名) npm st ...
基于React脚手架集成Cesium
基于React脚手架集成Cesium 文章目录基于React脚手架集成Cesium 1. 安装环境 2. 创建项目 3. 引入Cesium 4. 修改文件 5. 参考链接 1. 安装环境安装Nod ...
react 引用本地js_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react 文件 md5_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react打包后图片丢失_React系列四 - React脚手架
一. 认识脚手架 1.1. 前端工程的复杂化如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分: 比如如何管理文件之间的相互依赖: 比如如何管理第三方 ...
初识react(四) react中异步解决方案之 redux-saga
回顾初识react(一) 揭开jsx语法和虚拟DOM面纱初识react(二) 实现一个简版的html redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 ...

初识React脚手架

初识React脚手架相关推荐

最新文章

热门文章