一个后端程序员的React进击之路

时间  2019-11-07
标签 一个 后端 程序员 react 进击 之路 栏目 快乐工作 繁體版
原文   原文链接

引言

Web前端

本文讨论的前端仅表明Web前端css

前端三座大山

前端基础无非就是HTML、CSS、JavaScript，但凡是程序员，说对此不了解几乎是不可能的，这样想一想，看来咱们都具有成为前端程序员的潜质（偷笑）。html

后端中的前端

Web开发中，难道后端程序员就不会接触前端内容了吗，固然不是！Web后端中有个叫作模板引擎的技术 —— 即在服务端将数据渲染到HTML页面的技术，该技术是Web后端程序员的基本技能之一。前端

例如：Java中的JSP、Thymleaf、FreeMarker；Python中的Mako、JinJia2等。该技术要求后端程序员首先就要掌握HTML、CSS、JavaScript，而后结合其它特有的标签和语法来工做。vue

障碍

对于后端程序员，想要突破到前端的最大障碍就是布局Layout，毕竟不是专职作前端的，并且不少公司，即便先后端还没有分离（使用模板引擎），也要由专职前端先切好Html页面，再由后端改形成模板引擎须要的形式，步骤很繁琐，事倍功半，也所以致使后端程序员不多能对布局Layout或者说CSS进行系统的学习。node

依赖于模棱两可的知识体系，最终致使大部分后端程序员不肯意去写页面，不是由于不懂前端基础，而是由于大部分时间均可能浪费在布局Layout上。react

为何学习前端？

固然，这里咱们所谓“学习”是指“系统的去学习”。缘由有三：jquery

  • 避免有求于人，好比说本身忽然有了个好的Idea，正要去实现它，想到要浪费大量时间去搞布局，还不如去啃中间件源码；或者想要构建本身的博客，苦于布局，最终仍是入坑到现成的静态博客构建工具。
  • 大前端来了，前端更像后端，Node.js来了，ES6来了，前端有了本身的打包工具Webpack，有了本身的包管理工具npm\yarn，有了成熟的JavaScript框架react、vue、angular，有了脚手架，有了class、import、export和Lamda（箭头表达式）。前端的生态更像后端了，因此学习起来能够更加系统，再也不那么违和，更容易上手。
  • 提升价值，Web开发——中间件——大数据——机器学习，这好像更像是后端的进击路线，可是学习前端与它们相比，门槛和所需时间都不值一提，与其每次都为它所累，不如随便拿点时间把它干掉，一劳永逸。

为何要学习React？

其特色就再也不赘述，至少生态圈和用户数量表现给咱们的是，Angular将死，React与Vue同台竞技——《React仍是Vue：你该如何选择？》webpack

至于笔者为何要学习React？ios

  • 身为后端，我受够了模板（有人也所以更喜欢Vue），而Vue刚好是这样作的，相比React中只须要熟悉JavaScript ES6+Html的JSX写法，Vue须要你从新学习更多的HTML扩展，相似于下面的v-on:click：
    <button v-on:click="reverseMessage">Reverse Message</button>
复制代码
  • React-Native，笔者的女友是作Android前端的，为了之后能辅助到她开发原生APP，天然像React这种同时适用于Web端和原生APP的框架，成为了最佳选择

正文

笔者是一个文档控，但凡是有详尽的官方文档，都会对它忠贞不渝，不得不说在学会使用《Google翻译》以前，真的是学了很多专业单词啊，，，给出两个依赖官方文档的缘由：git

  • 权威性，官方文档不像技术博客，不掺杂主观看法；
  • 实时性，尤为像React这种不断更新的技术，官方教程之外的我的教程，很快就过期了，由于其中有些技术可能已经被遗弃或替代，因此不建议观看我的教程，例如：阮一峰阮老师的《React 入门实例教程》（其实刚开始我也看过，，前车可鉴）

为了更加方便读者学习，在如下路线中，一样会给出贴近官方文档的中文文档或博客，其实它们也大多数是学习官方文档后，翻译或总结获得！！

1. CSS布局

最初Html页面的布局由Float、Position来实现，再后来出现了display:table表格布局，可是表格布局存在性能问题，直到如今咱们拥有了两种更加方便高效的布局方式，咱们能够根据兼容性和页面复杂程度来选择： Flex布局：

Grid布局：

2. JavaScript ES6

React中JSX语法无非就是HTML+JavaScript杂在一块儿写，而ES6是JavaScript的新标准，从很早开始React中的JavaScript就已经开始向ES6靠拢，直到如今（v16.6.3）已经彻底有ES6来写。

3. Npm/Yarn

包管理工具。就像Java中Maven、Gradle，Python里的Pip、Conda，能够直接从仓库中下载公共的代码，避免重复造轮子，是大前端时代的必备工具。

Yarn笔者没用过，不作赘述，Npm是Node环境下的包管理工具，安装了Node环境就安装了Npm，使用时要注意版本问题，不定时更新就好

4. 脚手架

所谓脚手架，顾名思义就是一个架子，能够直接拿来用。在没有脚手架前，大前端项目就须要咱们本身去创建文件结构，集成某些必要工具，建立必要配置文件，这些都是重复性的但又必不可少的步骤，就像咱们在IDE中新建Android项目，新建SpringBoot项目，这里能够理解成新建React项目。

Web端（PC或手机）脚手架—— Create-React-App：

React-Native（原生APP）脚手架—— Expo

5. React教程

6. Redux

随着 JavaScript 单页应用开发日趋复杂，JavaScript 须要管理比任什么时候候都要多的 state （状态）。考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、Websocket长链接、路由跳转前请求数据等等。前端开发者正在经受史无前例的复杂性，难道就这么放弃了吗？固然不是，咱们可使用Redux来解决。

7. React-Redux

为了方便使用，Redux 的做者封装了一个 React 专用的库 React-Redux。

8. React-Router

React Router 是一个基于 React 之上的强大路由库，它可让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。若是不知道什么是路由？能够谷歌

9. Promise

Promise对象表示异步操做的最终完成（或失败）及其结果值。

在JavaScript的世界中，全部代码都是单线程执行的。因为这个“缺陷”，致使JavaScript的全部网络操做，浏览器事件，都必须是异步执行。异步执行能够用回调函数实现，可是写法显得冗杂，因此引入了Promise —— 古人云：“君子一言既出;驷马难追”，这种“承诺未来会执行”的对象在JavaScript中称为Promise对象。

10. Fetch API

Fetch API提供了一个用于获取资源的接口（包括整个网络）。 对于使用过XMLHttpRequest的人来讲，这彷佛很熟悉，但新API提供了更强大，更灵活的功能集。不一样于$.Ajax()、Axios，Fetch是HTML5的API，是标准，是将来的趋势。

11. React-Native

React Native是一个使用Javascript构建移动端原生应用程序（iOS，Android）的库。 它与React.js相同，只是不使用Web组件，而是使用原生组件。 若是你学过React.js，很快就能上手React Native，反之亦然。到这里咱们已经基本掌握了React生态，因此能够很容易入坑React-Native了

12. Webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。脚手架已经为咱们集成并配置了Webpack，但为了某些高级特性，咱们仍然有必要深刻了解下Webpack。

  • 什么是Webpack？ WebPack能够看作是模块打包机：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
  • 为什要使用WebPack？ 今的不少网页其实能够看作是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了不少好的实践方法
    • a:模块化，让咱们能够把复杂的程序细化为小的文件;
    • b:相似于TypeScript这种在JavaScript基础上拓展的开发语言：使咱们可以实现目前版本的JavaScript不能直接使用的特性，而且以后还能能装换为JavaScript文件使浏览器能够识别；
    • c:scss，less等CSS预处理器.........

这些改进确实大大的提升了咱们的开发效率，可是利用它们开发的文件每每须要进行额外的处理才能让浏览器识别,而手动处理又是很是反锁的，这就为WebPack类的工具的出现提供了需求。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程