原创教程之——reactjs 组件入门教程

在学习react之前，希望你有以下准备：

react的安装
ECMAScript 6基础

本文不讲解react的安装步骤，若需了解请移步官方网站(https://reactjs.org/)，那里讲解非常清楚，也很简单。
至于ECMAScript 6，大家可以去阮一峰老师的官网(http://www.ruanyifeng.com)学习。

这篇文章主要解决一下几个要点, 这几个要点也可能是大家在学习react时非常迷惑的地方。

要点一：
??什么是组件？

要点二：
??如何编写组件？

要点三：
??组件之间如何组合使用？

在弄清这些要点之前，我们先来看，react安装后的目录是怎样的，应该在哪个目录下进行开发。

看截图：

可以说这个就是react的标准目录结构，打开src目录：

看截图：

这个目录下就是你将要开发组件的地方。

弄清了react的目录结构，我们正式来讲解要点。

什么是组件？

请记住：文件即组件。

比如在src目录下的App.js，这个App.js就是组件。你也可以自己建立一个组件，如Nav.js等等。

这个就是react的核心思想。一个网站的构成可以看成是很多组件的集合。

比如一个网站的首页分为头部，主内容区域，底部。那么这三个大区域就可以当作组件。然后每个区域里的内容块又可以当作组件，以此类推，可以划分成更小的组件。我们可以来看一张图：

说形象点组件就像定义的很多功能函数，通过配置参数，组合调用这些函数，最后就可以实现一个完整的网站。
组件的好处就是能重复使用，既能减少开发量，也能让代码干净整洁，逻辑清晰，方便阅读。

组件如此的美好，那该怎么来编写呢？

第二个问题，如何编写组件。
在编写组件之前，我自己通常把组件分成两种，非UI组件和UI组件。

看例子：

//App.jsimport React, { Component } from ‘react‘;import ‘./App.css‘;class App extends Component {render() {return ( ???<div className="App"> ?????<header className="App-header"> ??????<h1 className="App-title">Welcome to React</h1> ?????</header> ????</div>);}}export default App;

这是一个UI组件。是一个非常简单的组件。即便不了解es6的同学，也能秒懂。
由此，我们可以把UI的组件书写结构标准化，如下：

//MyApp.jsimport React, { Component } from ‘react‘;class MyApp extends Component { ???//其它的功能代码 ???render() { ???????return ( ???????//UI代码 ???????); ???}}export default MyApp;

依次类推，我们也可以把非UI的组件书写结构标准化，如下：

//Myfn.jslet Myfn = { ???http(params){ ???//代码 ???} ???showMessage(msg){ ???//代码 ???} ???... ???//其它代码}export default Myfn;

对比一下，发现两者有以下不同：

UI组件需要class语句
UI组件需要render函数
反之则不需要。

相同点：
react规定，组件名(也就是文件名)首字母必须大写。
为了便于代码管理和阅读，最好让组件名和组件内部导出的绑定名字统一。以Myfn.js为例，Myfn.js的文件名和其导出的Myfn对象名是一致的。大家一定要养成这样的书写习惯。

组件写法我们会了，那如何让组件组合使用呢？
以上面的例子说明，如果我想在MyApp.js里使用Myfn，可以这样使用：

//MyApp.jsimport React, { Component } from ‘react‘;import Myfn from ‘./Myfn‘; //注意这句，此处的Myfn.js的扩展名可以省去class MyApp extends Component { ???//其它的功能代码 ???showMsg(msg){ ???????Myfn.showMessage(msg); //注意这句 ???} ???render() { ???????//this.showMsg(‘hello world!‘)或 ???????//Myfn.showMessage(‘hello world!‘) ???????return ( ???????????//UI代码 ???????); ???}}export default MyApp;

是不是很简单？
记住一句话：非UI组件通常是导入到UI组件里使用的，非UI组件通常为UI组件渲染时提供逻辑处理。