【译】开始学习React - 概览和演示教程

【译】开始学习React - 概览和演示教程

当我刚开始学习​​JavaScript​​​的时候，我就听说了​​React​​​，但我承认看了它一眼，它吓到我了。我看到了看起来一堆​​HTML​​​和​​CSS​​的混合思想，这不是我们一直努力避免的事情吗？React有什么了不起的？

相反，我只专注于学习原始的​​JavaScript​​​，并在需要的时候使用​​jQuery​​​。经过几次失败的​​React​​​入门尝试之后，我终于开始了解它了，我开始明白为什么我可能想使用​​React​​​而不是原始的​​JS​​​或​​jQuery​​。

我试图将自己学到的内容浓缩成一个很好的介绍，以便与你分享，下面就是~

预备知识

在开始学习​​React​​​之前，你应该事先了解一些事情。例如，如果你之前从没接触过​​JavaScript​​​或者​​DOM​​​，那么在解决​​React​​之前，你要更加熟悉它们。

下面是我认为学习​​React​​的预备知识：

熟悉​​HTML & CSS​​的基础知识​​JavaScript​​ 和编程的基础知识对​​DOM​​有基本了解熟悉​​ES6 语法和特性​​全局安装了​​Node.js 和 npm​​

目标

了解基本的​​React​​​概念和相关术语，例如​​Babel​​​，​​Webpack​​​，​​JSX​​，组件，属性，状态和生命周期通过构建一个非常简单的​​React​​应用程序，以演示上面的概念。

下面是最终的相关源代码和示例。

​​View Source on GitHub​​​​View Demo​​

React是什么？

​​React​​​是一个​​JavaScript​​​库 - 最受欢迎的库之一，在​​GitHub上超过100,000星星​​。​​React​​​不是一个框架（不像​​Angular​​，定位是框架）。​​React​​​是​​Facebook​​的开源项目。​​React​​​用于在前端构建用户界面​​UI​​。​​React​​​是​​MVC (Model View Controller)​​​应用的​​View​​层。

​​React​​​的最重要的方面之一是可以创建类似于自定义、可复用的​​HTML​​元素的组件，以快速有效地构建用户界面。​​React​​还使用状态state和属性props来简化数据的存储和处理方式。

我们将在本文中介绍这些内容及其更多的内容，我们来开始吧。

安装

有几种安装​​React​​的方法，我将向你展示两种，以便你更好地了解它地工作方式。

静态HTML文件

第一种方法不是安装​​React​​​的流行方法，也不是我们本教程其余部分的工作方式，但是如果你接触过​​jQuery​​​之类的库，这将很熟悉并易于理解。如果你不熟悉​​Webpack​​​，​​Babel​​​和​​Node.js​​，那这将是种恐怖的入门方式。

让我们开始创建一个基本的​​index.html​​​文件。我们将在​​头部head​​​中加载三个​​CDN​​​资源 - ​​React​​​，​​DOM​​​和​​Babel​​​。我们还将创建一个​​id​​​为​​root​​​的​​div​​​，最后，我们将创建一个​​脚本script​​标签，你自定义的代码将存在于该标签中。

# index.html Hello React!