创建一个Hello World（React），组件的作用

在了解React结构之后，我们就可以自己创建一个小的组件了。下面我在做的过程中，遇到的问题以及解决方法。

第一步：在src文件夹下面创建一个Person文件夹，然后新建一个Person.js文件,内容如下：

const Person = () => {   // 函数是自动执行的

    return <p>大家好，我是米苏特务</p>;

}

第二步：在App.js中引用新创建的文件。

import Person from './Person/Person';   // 引用刚才新创建的文件

class App extends Component {

render() {

return (

<div className="App">

<h1><Person /></h1> // 返回的引用内容在H1标签中

</div>

);

}

}

第三步：执行本地页面，出现如下错误：

./src/Person/Person.js
  Line 2:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Search for the keywords to learn more about each error.

 这个问题是没有引用react组件，那么在Person.js的顶部引用react组件。

import React from 'react';

继续执行http://localhost:3000/

可是，接着又报错了，

./src/App.js
45:30-36 "export 'default' (imported as 'Person') was not found in './Person/Person'

报错信息是没有将文件信息用export defalut 进行公开。在文件末尾添加export default Person;就可以了。有的时候会因为粗心而发生别的错误。比如不能找到Person这个类，有可能是在App.js中，没有引用，或者是没有引用到。App.js中显然我们已经引用。那么，没有引用到的原因是，要么没有将Person.js公开，要么是引用路径出错。

 上面运行结果的页面结构：

便将我们创建的Person.js组件的<p></p>标签添加到页面中去了。

组件的好处是，可以多次引用，多地引用，适合团队合作。