React学习(1)-create-react-app

前言

现在,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来讲,早已不是什么陌生的词

尽管三者实现业务最终的目的都能达成一致,可是各有特点,其中任何一框架,我的以为,都博大精深,可圈可点,要学习的内容有不少,我也仅仅是浅尝辄止而已.

有时候,由于工做项目的须要,本身在切换各个技术栈的时候,只要一段时间没有用,就有些陌生,说到底不得不认可本身功力不够

本文并非什么教程,只是做为本身学习过程当中的一些总结和思考,一块儿学习,共同成长~

React学习-create-react-app内有视频

React是什么?

用于构建用户界面的javascript库,MVC架构中的V层

• 声明式开发(想要实现什么目的,应该作什么,可是不指定具体怎么作,以下代码所示)

面向数据编程,只要把数据构建好了就能够了的,react会自动的帮你去构建网站,把数据能够理解为图纸,图纸作好了以后,react会自动的结合这张图纸帮助你去构建这个大厦,去构建整个页面的DOM,数据是什么,页面就显示什么,这种声明式的开发帮助咱们节约掉大量的DOM操做代码,这是react编程带来的一个优点)

/**
*
* 需求:编写一个函数，处理传入包含大写字符串的数组，返回包含相同小写字符串的数组
* 声明式编程实现toLowerCase
* 输入数组的元素传递给map函数，而后返回包含小写值的新数组
*/

let toLowerCase = arr => arr.map(function(item) {
return item.toLowerCase();
})

let aToCasesA = ['SUIBICHUANJI','ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
let aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]
复制代码

• 命令式编程(相似jQuery操做DOM,建立一个页面,一点点的告诉DOM怎么去挂载,你要怎么去作,JQ,原生也好都是命令式编程，都是在作DOM操做)

/*
* 命令式编程:按照顺序一步一步的实现
* 首先，建立一个空数组用于保存结果，而后遍历输入数组的全部元素，
将每项元素的小写值存入空数组中，而后返回结果数组
*/


var aToCasesA = ['SUIBICHUANJI', 'ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
function toLowerCase(arr) {
var res = [];
for(var i = 0; i < arr.length; i++) {
res.push(arr[i].toLowerCase());
} 
return res;
}
var aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]
复制代码

• 函数式编程:写的都是一些函数，带来了几个好处,维护起来比较容易,当一个函数比较大的时候,能够进行拆分，每个函数各司其职,便于前端自动化测试((数组中的一些map,reduce,find等方法的应用就是函数式编程))

• 视图层框架(在大型项目中,光用react是不行的,还得配合一些数据层的框架帮助咱们解决一些组件之间的父子组件传值的问题,react把本身定义成一个视图层的框架,并非什么问题都能解决,只帮助你解决数据和页面渲染的问题，至于组件之间怎么传值，交给其余组件来作.

在小型项目中,能够借助react中的父子组件传值就能够,可是在大型项目里,单单来使用react是不够的,好比说:flux，redux,mobox这样的数据层框架),react并非一个完整的框架,因此它学习的成本相对高些的.

React能作什么?

• 写web应用(网站,pc端,移动端等,例如:知乎,简书等)
• 桌面客户端应用软件(相似vscode或者一些报表软件携带窗口的应用)
• webApp--react native,混合开发应用
• 服务器端应用(java,php等后端语言能干的事情,react也能干)

只有你想不到的应用,没有实现不了的技术...

初始化一个React项目

前置条件

• 命令行坏境(windows中DOS CMD坏境或者git工具),苹果Mac电脑可用自带的Terminal,对于Linux用户,命令行工做坏境没必要赘述,这里以Windows开发坏境为例
• 下载安装NodeJS(React自己并不依赖Node.js可是项目中所须要的依赖包/工具,须要Node.js的支持),本地安完Node,默认也就安装了npm包管理工具

cmd或者git命令行下，检测Node与npm是否安装成功,若是npm下载包很慢,也可使用国内淘宝的cnpm

D:\公开课\2019>node -v
v10.13.0
D:\公开课\2019>npm -v
6.4.1
复制代码

固然,你也能够安装cnpm,使用国内的地止,下载依赖包会快一些的

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码

安装完cnpm后与npm使用并无什么区别

• chrome浏览器(应用商店里下载React Developer Tools调试工具)

create-react-app脚手架工具

create-react-app(建立react应用),它是一个经过npm发布的安装包,也是一个命令,在安装好nodejs后,在命令终端下执行npm或者cnpm命令,全局安装create-react-app这个脚手架工具

D:\公开课\2019 npm install --global create-react-app
或者
D:\公开课\2019 cnpm install -g create-react-app
其中-g是--global的缩写
复制代码

在安装好create-react-app脚手架工具后执行create-react-app命令,这个命令会在当前目录下建立指定的参数名的应用目录,建立react项目应用有三种方式 方式一:create-react-app 应用名称(推荐使用这种方式)

D:\公开课\2019  create-react-app myfirstreactapp
D:\公开课\2019  cd myfirstreactapp
D:\公开课\2019  npm start
复制代码

方式二:npm init react-app my-first-react-app

D:\公开课\2019 npm init react-app myfirstreactapp
D:\公开课\2019 cd myfirstreactapp
D:\公开课\2019 npm start
复制代码

方式三:使用yarn,yarn create react-app my-react-app

D:\公开课\2019 yarn create react-app myfirstreactapp
D:\公开课\2019 cd myfirstreactapp
D:\公开课\2019 npm start
复制代码

方式四:npx create-react-app 应用名称,与方式一是等价的,当你运行npx create-react-app my-app时，它会自动安装最新版本的Create React App,若是你以前全局安装过create-react-app,请全局卸载

npx create-react-app myfirstreactapp
复制代码

注意事项

• 应用名称不能包含大写字母(不能驼峰式,只能是小写字母

D:\公开课\2019  create-react-app myFirstReactApp  X
D:\公开课\2019  a project called "myFirstReactApp" because of npm naming restrictions
* name can no longer contain capital letters
复制代码

• 当使用npx create-react-app命令建立react应用失败,更改淘宝镜像,替换成国内下载，更改完后,在使用npm或者cnpm以及一些其余命令时,下载依赖包会快不少 查看npm的镜像源

D:\公开课\2019  npm config get registry 
 // 默认是：https://registry.npmjs.org/
复制代码

修改为淘宝的镜像源

D:\公开课\2019 npm config set registry https://registry.npm.taobao.org
复制代码

create-react-app建立项目

D:\公开课\2019  npx create-react-app 应用名称
复制代码

以上的命令能够建立react项目应用,在这个目录下回自动的建立一个应用框架的代码结构

你能够在src中建立子目录。为了加快重建速度

注意:Webpack只处理src中的文件。你须要将任何JS和CSS文件放在src中，不然Webpack将不会看到它们的

借助这个create-react-app工具建立的应用程序能够避免那些麻烦的手工配置工做,react技术依赖webpack工具,这也是个技术

当一切就绪好后,执行npm start命令会启动一个本地开发模式的服务,同时会自动的打开一个网页,指向本地地止http://localhost:3000 以下图所示：

接下来用你喜欢的代码编辑器打开项目:这将是本节最重要的内容

myfirstreactapp
├── package-lock.json // 锁定安装时的包的版本号，而且须要上传到git，以保证其余人在npm install时你们的依赖能保证一致,对整个文件的描述,为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标示的具体版本下载依赖库包，就能确保全部库包与你上次安装的彻底同样，它是npm install自动生成的一文件
├── package.json // 对整个应用程序的描述,应用名称,版本号,一些依赖包,以及项目的启动,打包，测试配置，锁定大版本
├── public
│   ├── favicon.ico  // icon图标
│   ├── index.html   // 主页面,首页模板
│   └── manifest.json // 定义成app应用的方式来使用,快捷方式的图标,能够配置icons，定义快捷方式的图标,定义快捷方式跳转的网址到哪里,主题颜色,用于指定应用的显示名称、图标、应用入口文件地址及须要使用的设备权限等信息，相似于android里面的manifest.xlm配置文件
├── README.md // 说明文档
└── src       // 源码目录
    ├── App.css // App应用组件的样式
    ├── App.js  // App应用组件的逻辑代码,构成一个react组件的基本组成部分
    ├── App.test.js // App自动化测试文件
    ├── index.css   // 首页入口index的样式
    ├── index.js    // 整个程序运行的入口文件
    ├── logo.svg    // 图标,资源
    └── serviceWorker.js // 引入这个是为了帮助咱们借助网页去写手机app应用这样的一个功能,若是上传到https协议的服务器上,在断网的状况下,依然能够看到以前的页面
复制代码

React中的组件

在react中一个重要的思想就是经过组件(Component)来开发应用,所谓组件,就是指可以完成某个特定功能的独立的,可重用的代码(页面中的某一部分)

基于组件的应用开发是普遍使用的软件开发模式,用分而治之的方法,把一个大的应用分解成若干个小的组件,每一个组件只关注于某个小范围的特定的功能,可是把组件组合起来，就可以构成一个功能庞大的应用

应用只是一个会渲染其余组件的组件而已

也能够说,react应用是由组件构成的,你能够将组件理解为一种教浏览器认识新的HTML标签的方式,实现组件的好处就是它拓展了原生HTML标签的功能,例如:组件之间的数据流等。

若是你有用过AngularJS的话,能够把组件理解为相似指令的概念,在现今的开发模式里,基于组件化开发是很是流行的

react很是适合构建用户交互组件

一个react应用其实就是一颗由组件构成的树

在这颗树的根结点,最顶层的组件就是该应用的自己,它会在浏览器启动,也叫引导应用的时候被渲染

因为组件都是以树结构组织起来的,当每一个组件被渲染时,它都会递归地渲染下级组件

React特色

• 虚拟DOM

经过DOM diff算法,只会更新有差别化的部分,不用渲染整个页面提升效率

• 组件化

把页面分红若干个组件,组件中包含逻辑结构和样式 组件只包含自身逻辑,更新组件的时候能够预测,利于维护整个页面拆分多个组件,能够作到重用

• 单向数据流(父组件容许向子组件传值,可是子组件你只能去使用父组件),子组件并不能直接的去改写这个值,只能单向的传递,可是你不能反过来的给我修改,想要达成这一目的,子组件调用父组件的方法,经过在父组件中改变本身来操做,维护代码起来比较方便)
• 能够与其余框架并存(Jq,Angular等) 数据是从顶层组件传递到子组件中 数据可控

写一个react应用的基本流程

其实不光是react仍是vue,甚至是Angular,遵循的流程都是同样的

基于产品经理给的原型图或者UI设计师提供的设计稿,首先要作的不是开始写代码,而是基于页面,按照不一样大小细粒度,把页面拆分红若干个组件

对页面的内容进行分组,并抽象成一个个的组件,从上至下,组合咱们的应用,从而构成一个完整的软件系统应用

从creact-react-app脚手架中学到的

• 一切皆是js,之前讲究是内容(html),层叠样式(css),行为(js)进行分离,这种分离仅仅是物理层文件的分离,若是视为一个总体,那么css是能够和js同样,经过模块的形式嵌入到js里面去的
• ,构成组件的方式

总结

本文主要讲到了react是什么,以及经过creact-react-app脚手架工具搭建一个react初始化的项目,其中初始化一个react应用,有多种方式

其中最重要的是,初始化项目目录文件的含义,以及构建一个react组件的方式,以及react中的组件,react的特色,写一个react应用的基本流程,从一个初始化项目里,学到了react编程方式