从零学习 React 技术栈系列教程
Hello大家好,我是余博伦,在接下来的一段时间里,由我和大家从零开始共同学习React技术栈的相关知识。教程将会以连载的形式发布在我的个人博客和微信公众号上,以文字教程为主,辅以一些代码示例供同学们参考,在连载结束之后,我会将所有内容整理为电子书提供下载。连载时教程会在每日早晨由公众号推送,同时为了方便一些外链和代码示例,可以在本博客查看教程。
Hello大家好,我是余博伦,在接下来的一段时间里,由我和大家从零开始共同学习React技术栈的相关知识。教程将会以连载的形式发布在我的个人博客和微信公众号上,以文字教程为主,辅以一些代码示例供同学们参考,在连载结束之后,我会将所有内容整理为电子书提供下载。连载时教程会在每日早晨由公众号推送,同时为了方便一些外链和代码示例,可以在本博客查看教程。
第一节课呢,我们就来简单介绍一下应用在 React 开发当中,属于 ES6 的新的关键字和语法糖,也好为我们之后的学习打下一个基础,当然我更推荐同学们对 ES6 有一个比较全面的了解之后再开始学习 React,不过你也不需要担心,以后在课程中每当遇到涉及 ES6 新语法的问题时,我都会稍作讲解介绍。这是本教程的第一课,主要内容是 ES6 相关的前置知识介绍,如果你有发现不懂的术语,不需要担心,因为在接下来的教程当中,所有我们提到的术语全部都会涵盖讲解。
工欲善其事,必先利其器。在正式学习 React 技术栈之前,我们先来介绍一下之后经常要使用到的 npm
。npm
是一个基于 Nodejs 的 JavaScript 包管理工具,全称叫做 Node Package Manager,所谓的包呢,其实就是可复用的代码,每个人都可以把自己编写的代码库发布到 npm
的源(英文叫做 registry)上面进行管理,你也可以下载别人开发好的包,在你自己的应用当中使用。
JSX 其是一个语法扩展,它既不是单纯的字符串,也不是 HTML,虽然长得和 HTML 很像甚至基本上看起来一样。但事实上它是 React 内部实现的一种,允许我们直接在 JS 里书写 UI 的方式。有些同学来看 JSX 可能也会觉得它像一种模板语言之类的。事实上也不是,它就是基于 JavaScript,在 React 当中的一种语法扩展的实现。JSX 被用来创建 React 当中的 Elements,React 当中的元素。然后 React 再通过一些方法,把 JSX 创建的元素,渲染成我们在浏览器当中看到的 DOM元素。
这一节的内容会比较多,如果是刚刚入门的新同学一时半会儿可能会接受不了,而且基本都属于理论知识。如果你在阅读时发现理解有困难也不需要灰心,可以把本篇教程当作随时可供查阅的文档,等到你在实践中积累了一定的代码量之后再回过头来阅读文章就会感觉非常轻松啦。