从零学习React技术栈:React 新版本及 ES6 简介

第一节课呢,我们就来简单介绍一下应用在 React 开发当中,属于 ES6 的新的关键字和语法糖,也好为我们之后的学习打下一个基础,当然我更推荐同学们对 ES6 有一个比较全面的了解之后再开始学习 React,不过你也不需要担心,以后在课程中每当遇到涉及 ES6 新语法的问题时,我都会稍作讲解介绍。这是本伟德1946网页版的第一课,主要内容是 ES6 相关的前置知识介绍,如果你有发现不懂的术语,不需要担心,因为在接下来的伟德1946网页版当中,所有我们提到的术语全部都会涵盖讲解。

掌握这5大核心概念,你就理解了React

几年前,我的一个朋友向我吹捧有个叫做React的框架会如何革新Web开发。其实一开始我觉得它只是又一个昙花一现的框架罢了。可在之后的时间里,React名声鹊起,逐渐变得不容小觑了。也许你和我之前的状况差不多:总是听到React这儿好那儿爽,可是真正坐下来学习React的时候又毫无头绪。好消息是我在这里替你总结了,其实React只有“五大核心概念”。不过也请不要误会我的意思,并不是说我一篇文章就能能让你摇身一变成为精通React的大神,但如果你打算或者正在学习React的话,我至少能帮你理清思路。

React.js小书:优化 DOM 操作

看看上一节我们的代码,仔细留意一下 changeLikeText 函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked 一个状态。由于数据状态改变会导致需要我们去更新页面的内容,所以假想一下,如果你的伟德1946手机版依赖了很多状态,那么你的伟德1946手机版基本全部都是 DOM 操作。一个伟德1946手机版的显示形态由多个状态决定的情况非常常见。代码中混杂着对 DOM 的操作其实是一种不好的实践,手动管理数据和 DOM 之间的关系会导致代码可维护性变差、容易出错。所以我们的例子这里还有优化的空间:如何尽量减少这种手动 DOM 操作?

React.js小书:从一个简单的例子讲起

React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话,那么 React 的伟德1946手机版就相当于 MVC 里面的 View。如果你不熟悉也没关系,你可以简单地理解为,React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是伟德1946手机版,这些伟德1946手机版之间可以组合、嵌套,就成了我们的页面。一个伟德1946手机版的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候伟德1946手机版的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和伟德1946手机版显示形态之间的同步。React.js 不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux、React-router 等来协助提供完整的解决方法。

从零学习 React 技术栈系列伟德1946网页版

Hello大家好,我是余博伦,在接下来的一段时间里,由我和大家从零开始共同学习React技术栈的相关知识。伟德1946网页版将会以连载的形式发布在我的个人博客和微信公众号上,以文字伟德1946网页版为主,辅以一些代码示例供同学们参考,在连载结束之后,我会将所有内容整理为电子书提供下载。连载时伟德1946网页版会在每日早晨由公众号推送,同时为了方便一些外链和代码示例,可以在本博客查看伟德1946网页版。

编写模块化的CSS:CSS文件组织结构

在之前两篇文章中我们已经讨论过如何使用BEM和Namespace来编写模块化的CSS。这篇文章中,我想避开把CSS选择器作为CSS文件结构和组织的依据的方法。如果你思考过关于什么是文件组织的最佳实践,或者怎样能够在项目目录中更容易的找到你要找的CSS文件,或者一个文件应该是多大或者多小合理等问题,那么这篇文章就是为你写的。让我们先看下你一般组织资源的两种方法。

编写模块化的CSS:命名空间

上周,我分享了如何使用BEM创建一个合理的CSS架构。 虽然BEM很棒,但它只是解决方案的一部分。 还有另一部分我还没有提到 —— 命名空间。在今天的这篇文章中,我想与大家分享一下为什么只用BEM还是不够的,以及如何使用命名空间来弥补一些不足。

编写模块化CSS:BEM

你是否做过多页面的大型网站或者其中一部分?如果你做过,你可能会意识到 CSS 架构不够强大所带来的恐惧。你可能还会研究如何编写可维护的 CSS。由于我们的行业很棒,我们有很多推荐的解决方案。因为专家们的纷纷加入,于是我们有 BEM,OOCSS,SMACSS,Atomic Design 等许多选择。现在,问题不是痛苦 “我不知道该怎么办”,而是: “有这么多的方法,我应该尝试哪个?”我是不是应该把所有的都用一遍,是不是只有一种方法才适合我,或者我是不是应该参考它们做一个自己的架构?。我开始只用一种方法。然后,当我尝试不同的方法时,我开始把我认为有意义的东西包含在我的探索过程中。 在这篇文章中,我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。

PostCSS-modules: 让CSS变得更强大

多年来,我们一直与全局CSS作斗争。现在是时候结束它了。不管你使用哪种语言或框架,CSS命名的冲突不再是问题。我将向你展示如何使用PostCSSPostCSS-modules在服务端自动处理它。CSS最初只是用来美化文档的一种工具。自1996年以来,许多事情发生了变化。浏览器不再是文档查看器了。聊天、工作、游戏,几乎没有任何浏览器不能做到的。现在,我们比在HTML中标记文本和使用CSS开发内容的网站要多得多。我们使用CSS来充分发挥它的潜力,创造出它很难处理的东西。

使用CSS Modules解决权重的烦恼

CSS Modules与W3C无关,而是构建过程的一部分。它编译你的项目,重命名选择器和类,使它变得独一无二作用于各个伟德1946手机版。样式被锁在这些伟德1946手机版中,不能在其他地方使用,除非你有特别需求。现在我们已经习惯了Web技术来驱动App,Web App,移动端和PC端的应用程序。但与简单的静态网站不同的是,应用程序通常更动态、更复杂,而且通常包括伟德1946手机版,甚至超出了Bootstrap和ZURB Foundation提供的功能。当一个应用程序变得复杂起来,管理它的CSS可能是一个如地狱般的任务。

页面

返回顶部