React：简单的函数组件

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

显示点东西

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

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => {
  return (
    <h1>ninghao.net</h1>
  )
}

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

文件的一开始用了 import 导入了 React 与 ReactDOM，分别来自 react 与 react-dom 这两个包（Package）。我们的项目是用 create-react-app 工具创建的，所以已经在项目里安装好了这两个包。

下面的 App，在 React 项目里叫组件（Component）。一个组件可以是一个简单的函数（Function），也可以是一个类（Class）。

const App = () => {
  return (
    <h1>ninghao.net</h1>
  )
}

把组件定义成模块

让项目更容易维护，我们可以把组件定义成模块单独放在一个文件里。把 App 组件从 index.js 里面去掉，单独把代码放在一个文件里，创建组件文件：

src/components/App.js

import React from 'react'

const App = () => {
  return (
    <h2>ninghao.net</h2>
  )
}

export default App

在 App.js 里 export 一个默认的东西叫 App，它就是在这个模块里面定义的一个 React 组件。

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

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

在 index.js 里面，用 import 导入了 App，位置是当前目录下面的 components 下面的 App，导入的时候不需要指定文件的扩展名（.js）。