博客

有些东西在组件里你可能希望在特定条件下显示或者隐藏，或者要根据条件显示特定的内容。下面的练习可以帮你理解按条件显示。

src/components/App.js

先在 App.js 里添加一个新的组件，这个组件只负责显示，所以可以直接使用一个函数类型的组件。

const Message = (props) => {
  return <div>{ props.message }</div>
}

上面定义了一个叫 Message 的组件，函数类型的组件可以接受一个 props 参数，它就是从爸爸那里传递过来的属性。组件里面用了一组 <div> 标签，里面包装显示了属性里的 message 这个属性的值。

项目预览

想学用 React 创建前端应用，可以直接从最新的 React 课程《React：应用案例》开始。课程里会从头开始创建一个 React 应用，里面演示了 React 大部分的关键概念。用一天时间去练习这个课程，保证您对 React 框架产生感觉 ：）

订阅宁皓网，学习所有 React 与相关课程。

组件可以组合到一块儿去用，之前在 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