工欲善其事，必先利其器。在正式学习 React 技术栈之前，我们先来介绍一下之后经常要使用到的 npm。npm 是一个基于 Nodejs 的 JavaScript 包管理工具，全称叫做 Node Package Manager，所谓的包呢，其实就是可复用的代码，每个人都可以把自己编写的代码库发布到 npm 的源（英文叫做 registry）上面进行管理，你也可以下载别人开发好的包，在你自己的应用当中使用。

什么是React？咱们在这不阐述，有关于这方面的介绍可以查阅官网或者互联网上相关的教程。咱们今天来学如何写一个React组件。对于像我这样初次接触React的人而言，总感觉React非常的神秘，也无法入手。最近也看了一些相关的教程，开始自己尝试写一个简单的React组件。

JSX 其是一个语法扩展，它既不是单纯的字符串，也不是 HTML，虽然长得和 HTML 很像甚至基本上看起来一样。但事实上它是 React 内部实现的一种，允许我们直接在 JS 里书写 UI 的方式。有些同学来看 JSX 可能也会觉得它像一种模板语言之类的。事实上也不是，它就是基于 JavaScript，在 React 当中的一种语法扩展的实现。JSX 被用来创建 React 当中的 Elements，React 当中的元素。然后 React 再通过一些方法，把 JSX 创建的元素，渲染成我们在浏览器当中看到的 DOM元素。

组件的概念在Web中应用的场景已经相当广泛了。而React是专注于View层的，组件也是React核心理念之一，一个完整的应用将由一个个独立的组件拼装而成。组件也是React最基础的一部分，欲想征服React，那么了解和编写组件就显得尤为重要。在上一篇文章，咱们就写了一个最简单的React组件，而且在文章末尾，咱们留了一个问题，**怎么创建无状态和有状态的React组件？**接下来，就一起来了解React中的无状态和有状态的组件。

这一节我们通过一个简单的例子讲解 React.js 描述页面 UI 的方式。要记住几个点：JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。React.js 可以用 JSX 来描述你的组件长什么样的。JSX 在编译的时候会变成相应的 JavaScript 对象描述。react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的 Component（还有别的编写组件的方式我们后续会提到）。一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是，必须要用一个外层的 JSX 元素把所有内容包裹起来。

这一节的内容会比较多，如果是刚刚入门的新同学一时半会儿可能会接受不了，而且基本都属于理论知识。如果你在阅读时发现理解有困难也不需要灰心，可以把本篇教程当作随时可供查阅的文档，等到你在实践中积累了一定的代码量之后再回过头来阅读文章就会感觉非常轻松啦。

继续拓展前面的例子，现在我们已经有了 Header 组件了。假设我们现在构建一个新的组件叫 Title，它专门负责显示标题。你可以在 Header 里面使用 Title组件。

React是Facebook开源的一个JavaScript框架。大型Web应用或单页应用程序（SPA）中进行视图（View）的渲染，React是理想的选择。也就是说，React 主要只专注于 MVC 中的 V，也就是视图层。对于初学者而言，多写React项目能更好的帮助我们学习React。那么有一个运行React的环境，能帮助初学者解决很多没有必要的烦恼。在这篇文章中，简单的介绍如何在Codepen上创建React组件或者项目。

今天再来同大家讨论 React 组件设计的一个有趣话题：分解 React 组件的几种进阶方法。React 组件魔力无穷，同时灵活性超强。我们可以在组件的设计上，玩转出很多花样。但是保证组件的Single responsibility principle: 单一原则非常重要，它可以使得我们的组件更简单、更方便维护，更重要的是使得组件更加具有复用性。但是，如何对一个功能复杂且臃肿的 React 组件进行分解，也许并不是一件简单的事情。本文由浅入深，介绍三个分解 React 组件的方法。