小草窝博客

切换主题

浅尝前端工程化&&REACT ​

字数
1431 字
阅读时间
6 分钟
更新日期
1/24/2019

前端的发展越来越快，而我的思维却停留在过去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

用 ♥ 撰写

© 2024 - w8ay.fun