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

React如何工作

React的主要概念是组件。React组件由React组件（React Component）和React元素（React Element）组成。在React中，根据功能和责任可以将你的应用程序分成几个部分。

React组件和React元素（ReactElements）都是虚拟DOM（Virtual DOM），看起来就像是HTML DOM元素的标签。

Virtual DOM（React Components 和 ReactElements）的语法将被编译并转换成普通的JavaScript代码。

class HelloWorld extends React.Component {
    render () {
        return (
            <div>
                <h3>Hello</h3>
                <p>Nice to meet you!</p>
            </div>
        )
    }
}

class App extends React.Component {
    render () {
        return (
            <div>
                <HelloWorld />
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('app')
)

上面的代码经过编译之后在浏览器中呈现真实的HTML DOM元素，如下图所示：

最后渲染出来的效果如下：

写一个React 组件

如上所述，编写和运行React组件需要做两年事情。

• 引入react.js和react-dom.js
• 配置ES6的编译Babel。将ES6代码和虚拟DOM编译成ES5代码

为了方便起见，可以直接在Codepen这样的在线平台来写React组件，这也是React官方推荐的一个平台。如下图这样配置：

如果你对Webpack这样的构建工具熟悉的话，可以自己配置一个R