Skip to content

浅尝前端工程化&&REACT

字数
1431 字
阅读时间
6 分钟

前端的发展越来越快,而我的思维却停留在过去jquery时代,但是现在流行一句话,“始于颜值”,一个好看的外观才能让人愉悦,让人赏心悦目啊。而nodejs,electron的流行,让一个前端页面可以一统各大操作系统。比如AntSword 蚁剑的界面,让人看一眼就想用,所以感觉自己有必要跟上节奏,重新学习前端。本文就谈谈自己学习前端的故事~

前端很简单?

很多人有这样一个印象,前端很简单,网络上大量的框架模板,我们要做的只是多看看官方的操作文档,复制粘贴代码就行了。是的,我也是这样认为的,但是,越简单不是越好吗?为什么要弄得如此复杂呢?

选择困难

前端的轮子太多,有时候,为了学习一个框架或库,又要学习其他的框架和库。所以我们学习前端,有必要知道前端的发展历史,某个轮子对应前端某个时期独领一阵风骚,然而一段时间以后,又会有新的轮子来继承它,像极了马克思哲学所说的发展规律,新事物继承旧事物中好的东西,取代了旧事物。所以说回来,也没有什么选择苦难之说了,用新的就完了!~

说道这里,不得不再提一个我深恶痛绝的现象:计算机技术随着互联网发展日益更新,有时候你写一本书,用了一年,呕心沥血,但是一年之后,这本书的内容已经过时了。但是,这本书还是流传了出来,被越来越多的人当做学习的工具,但是它已经out了呀。就拿我学习前端的视频来说,很多视频两三年前所使用的工具现在已经更新换代好几次,用法已经面目全非了,就像拿着“前朝的剑⚔砍本朝的官”一样,白白浪费学习时间。

所以我认为,英语很重要,快速接手第一手文档很重要!

复杂的标准

JavaScript的语法也已经变更了,目前广泛采用的是一个叫ES6语法的东东。简单记录下它语法相比之前的改变吧。

Let

let是声明一个“块级作用域”的对象,和var的区别在于,var声明的变量是全局或整个函数块的。

javascript
// let被限制在大括号里{}
function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

数组解构

类似python的语法,可以按照一定模式,从数组和对象中提取值。

javascript
let [a,b,c] = [1,2,3]

注意 ,let数组里的值,可以是数字、变量、对象、函数等、但无法拿到空格占位。

js
let [a,b,c,d,,] = [1,"aaa",{name:'sayname'},function(){}];
console.log(a,b,c,d);

其他例子:

js
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

⚔箭头函数

ES6允许使用“箭头”(=>)定义函数。

js
let [函数名] = (参数) => (
    返回值
)

等同于下面函数

js
function [函数名]([参数]){
    return (
    返回值
    )
}

模块化

导入 import './app'

导出 export default App export { a,b,person }

REACT Todo List

一开始我还是按照传统的思维,新建一个html,引入js脚本,在其中编写相关的代码,但我很快意识到这不是流行的写法,于是我寻找大量的资料,找到了“工程化”写法的demo,在此记录。

本源

在此之前我想声明一下,我并不是推崇这种一键化的写法,尤其是初学者更不推荐。我们需要关注的是,这种写法本质上是将所有代码打包成一个js脚本,回归本源,我们发现这和之前的流行写法并无不同,不同的是nodejs的流行,让这种一键化的写法使用JavaScript就可以完成,否则,使用c、c++、python、ruby不能完成吗?

1. 环境配置

写前端需要有仪式感,得需要配置好环境,才好放心大胆的写~这里说下我目前的环境

  • 操作系统:mac
  • 编辑器:vscode
  • 相关环境
    • nodejs npm nrm(用于配置npm各种源,方便下载)

初始化项目

前端很喜欢用todo list来作为第一个开发项目,我也不例外。因为使用“一键生成代码”的模式,官方叫做脚手架,和Django的命令行create app有异曲同工之妙。

  • npm install -g create-react-app 安装脚手架

  • 生成项目,运行

    javascript
    create-react-app react-todo
    cd react-todo/
    npm start

这样项目就初始化好了。

image-20190120154736879

End

先记录这么多吧,其他的之后在写。我的2019年计划里给自己立一个flag,前端达到了解水平。我认为达到“了解前端”至少需要知道下面的如何做。

  • 能使用开源组件库(antd elementui)完成demo
  • 前端路由操作
  • 数据异步响应,axios

撰写