3分钟 React 试用：简单上手 Hello World

想了解 React，但还没写过任何代码？

也许你读过一些博客，看过一些视频，试图理解所有组件如何协同工作……你想在开始构建之前理解一切。而组件又如此之多！React、Flux/Redux、Router，等等等等。

同时，React 的基础知识似乎又太过简单。

“React 表面看起来很简单……组件基本上就是根据当前状态返回视图的函数。这样真的能应对大规模开发吗？”

那么，让我们直奔主题：不写代码就很难评估一个库，所以我们现在就来解决这个问题 :)

在这篇文章中，我将向你展示如何在 3 分钟内写出 Hello World，然后你就可以在此基础上随意探索了。

我们将使用纯 React 来完成——这意味着你不需要担心 Redux、路由，甚至不需要配置构建工具或克隆样板项目！

步骤 0

请确保你已安装 Node.js 和 npm。如果没有，在这里获取。我假设你已经安装好了。这不计入 3 分钟之内。

步骤 1

安装 react-heatpack。打开终端/命令提示符并运行

npm install -g react-heatpack

React Heatpack 是一个很棒的工具，可以让你神奇地跳过所有构建的烦人设置，直接开始编写应用程序。这也是最耗时的一步。

第二步

创建一个新目录。可以随意命名。react-hello 是个不错的名字。

步骤 3

在该目录中创建一个文件，命名为index.js，然后键入以下代码

import React from 'react'

export default React.createClass({
  render: function() {
    return <div>Hello React!</div>
  }
})

这里有一些 ES6 的用法：import 和 export default……如果看起来陌生，暂时忽略它（React 也可以用 ES5 *或* ES6 编写得很好）。

步骤 4

从该目录内，运行开发服务器并将你的index.js 文件名传递给它

heatpack index.js

步骤 5

在浏览器中打开 https://:3000 （我甚至给你提供了链接！）

步骤 6

没有第 6 步。应用程序正在运行！你写了一个 React 应用！是不是很迷你？

接下来是什么？

首先，我想提一下我有一个通讯，大约每周都会收到类似这样的文章。如果听起来不错，请点击下方的按钮订阅。

<button class="cta-button" data-remodal-target="signup-modal">Send me more posts like this!</button>

现在我们已经有了基础框架，请按照下面的练习进行，学习更多知识！

练习 1：大规模重构

代码太冗余了。请创建一个 Hello 组件来渲染“Hello”，创建一个 World 组件来渲染“world!”。然后在底部的那个主组件中，并将它们并排渲染。

提示：你可以创建 2 个与现有组件非常相似的新组件，将它们分配给变量 Hello 和 World，然后在底部 render 函数中将它们引用为 <Hello/> <World/>……

输入这些代码，按刷新（或者不按！react-heatpack 自带热重载！），并确保它仍然有效。

import React from 'react'

var Hello = React.createClass({
  render: function() {
    return <span>Hello</span>
  }
})

var World = React.createClass({
  render: function() {
    return <span>world!</span>
  }
})

export default React.createClass({
  render: function() {
    return <div><Hello/> <World/></div>
  }
})

import React from 'react'

var Hello = React.createClass({
  render: function() {
    return <span>Hello</span>
  }
})

var World = React.createClass({
  render: function() {
    return <span>{this.props.who || 'world'}!</span>
  }
})

// Alternatively, use a ternary operator:
var World_v2 = React.createClass({
  render: function() {
    return <span>{this.props.who ? this.props.who : 'world'}!</span>
  }
})

// Or even split out the logic into its own function:
var World_v3 = React.createClass({
  getPerson: function() {
    return this.props.who || 'world';
  },

  render: function() {
    return <span>{this.getPerson()}!</span>
  }
})

export default React.createClass({
  render: function() {
    return <div><Hello/> <World who="Dave"/></div>
  }
})

React.createClass({
	propTypes: {
		name: React.PropTypes.string.isRequired,
		age: React.PropTypes.number, // optional
		parent: React.PropTypes.object.isRequired
	},
	render: function() {
		...
	}
})

import React from 'react'

var Hello = React.createClass({
  render: function() {
    return <span>Hello</span>
  }
})

var World = React.createClass({
  propTypes: {
    who: React.PropTypes.string
  },

  render: function() {
    return <span>{this.props.who || 'world'}!</span>
  }
})

export default React.createClass({
  render: function() {
    return <div><Hello/> <World who="Dave"/></div>
  }
})