博客

组件可以组合到一块儿去用，之前在 App 组件的显示里用了 h2 元素，现在我们把它单独定义成一个叫 Header 的组件，然后在 App 里用一下 Header 这个组件，这样 App 就是 Header 组件的爸爸（Parent），Header 是 App 的儿子（Child）。爸爸给儿子可以传递数据，儿子在显示的时候可以使用这些数据，传递的数据叫属性（Props）。

React 里的组件可能用函数来定义，也可以是个类（Class）。 使用类定义的组件有更多的功能，比如使用组件的生命周期函数，定义自己的方法，添加数据的数据（State） 等等。

下面用 Class 改造一下之前我们定义的 App 这个组件：

import React, { Component } from 'react'

class App extends Component {
  render () {
    return (
      <h2>ninghao.net</h2>
    )
  }
}

export default App

先要导入 React，再从 React 里面把 Component 拿出来用。React 组件的类可以继承这个 Component，定义的这个类的名字就是组件的名字。 组件里面要显示的东西用 render 方法返回。

State

组件内部使用的数据叫 State。 我们可以在组件里面自己定义需要的 State，数据有变化以后可以使用 setState 这个方法去设置组件的 State，这样组件会重新在界面上显示。

在 React 项目里可以使用 ES2015（ES6） 的模块系统，记住两个关键词：import 与 export，在一个文件里定义一个模块可以用 export 导出这个模块提供的功能。在其它的地方，可以 import，就是导入其它模块提供的功能。模块（Module），包（Package），这些词经常指的是同一种东西。

显示点东西

先在应用里显示点东西，比如一个大标题。在 src 下面创建一个 index.js，这个文件是应用的入口文件，把下面的内容放到这个 index.js 文件里：

src/index.js

一起来学一下基于 React 框架开发前端应用。

到目前为止我们在 Vue.js 课程里做的项目，都是直接在 HTML 文档上链接的资源，比如一些 CSS 与 JS 文件。因为这样做最简单，可以快速去理解 Vue.js 本身，减少了开始学习的干扰。现在，我们要深入一些，用模块化的方法去创建 Vue.js 项目，这就需要应用一大堆工具，你还得想办法根据自己的需求去配置这些工具。Vue.js 官方提供的 vue-cli 这个命令行工具可以快速地帮我们配置好这套开发环境。

安装 vue-cli

用 npm 或 yarn 在全局安装一下 vue-cli，打开命令行工具，Windows 可以用 cmder，macOS 用系统自带的终端。执行：

npm install vue-cli --global

完成以后，我们就可以使用 vue 这个命令行了。

项目演示

这回我们通过一个案例再好好学一下 Vue.js 框架。案例课程的好处是可以把碎片化的东西组合成一件产品。比如在这个 Vue.js 案例课程里，我们用了 Semantic UI 做应用界面的样式，Moment.js 来处理时间，Lokijs 作为应用的数据库，Browsery-sync 为应用搭建本地服务器。

订阅宁皓网，在线学习所有 Vue.js 还有相关课程。

全球有四分之一的网站基于 WordPress 创建。WordPress 市场也很多样化，比如可以做单独的定制服务，我有一位朋友就隐居大理，远程工作，做一些 WordPress 网站的高级定制服务。很多个人与团队可以仅凭借一款主题就销售百万。宁皓网现有的《WordPress》课程，已经形成体系，有些早前录制的课程今天也同样适用。

最近又做了一个 WordPress 开发小系列，主要解决了网站开发流程问题。更好地搭建本地开发环境，怎么把同样的环境复制到生产环境，也就是网站真正运行的地方，怎么把在本地搭建好的网站持续地搬到生产环境上。

我觉得很少有人会教你这样开发 WordPress 网站。里面牵扯了大量的 WordPress 本身以外的东西，需要把这些琐碎的东西拼到一起，要经过大量地实验，形成一套可以使用的方法。我分别在 Windows 与 macOS 平台测试了这套方法。现在已经用视频的形式呈现给你：）

Advanced Custom Fields 是一个可以在 WordPress 上创建自定义字段的插件，最近的 WordPress 课程需要用到这个插件。原本的中文翻译基本不能用，所以我重新翻了一遍，下载 acf-zh_CN.po 文件，放在插件的 lang 目录的下面就行了。

下载地址：https://github.com/ninghao/acf-chinese-translation/blob/master/acf-zh_CN.po

如果你还在用 WAMP 或 MAMP 搭建网站的开发环境，现在跟我一起升个级。我们用 Ansible 自动化配置虚拟机，搭建网站需要的环境，自动下载安装 WordPress。你可能会感觉这套方法有点复杂，但长期来看对你会有很多好处，而且看起来更专业一些 ：）

在 《WordPress 开发：开发环境 》课程里详细介绍了这套方法，订阅宁皓网就能学习这个课程了。

准备

1. 命令行：大部分操作都在命令行下完成，Windows 用  Cmder，macOS 可以使用终端。
2. Vagrant：用来管理虚拟机软件。
3. Virtualbox：虚拟机软件。
4. Ansible（macOS 用户）：自动化配置工具，macOS 用户使用 Homebrew 安装一下这个工具，Windows 用户可以跳过这一步。
5. 文本编辑器：Atom，Code ...

SSH Keys 指的是在电脑上生成的一对密钥（公钥 Public Key 与密钥 Private Key）。登录服务器的时候可以使用 SSH Keys 验证你的身份，就是你不再需要手工输入密码就可以通过服务器的身份验证。

准备

先准备命令行工具。Windows：下载使用完整版的 Cmder，然后打开 Cmder，新建一个 Bash 类型的命令行窗口。macOS：使用系统自带的终端。

生成

打开命令行工具。生成的 SSH Keys 会存储在用户主目录的下面，在生成之前先检查一下你的电脑是不是已经有了一对 SSH Keys。

ls ~/.ssh

如果在这个目录的下面你能看到 id_rsa 与 id_rsa.pub ，说明你之前已经有了一对 SSH Keys。这样直接用就行了，不需要再次生成 ，如果再次生成，你之前配置过的使用 SSH Keys 的地方会失效。如果电脑上还没有 SSH Keys，执行下面命令生成一对：

ssh-keygen

一路回车，就可以生成一对 SSH Keys。