慨念
- 模块：向外提供特定功能的JS文件，便于复用JS，简化JS，提升JS效率
数据、对数据的操作（函数）、将想暴露的私有的函数向外暴露（暴露的数据类型是对象）
- 模块化：形容项目编码方式，即按模块编写与组织的项目。
- 组件：用来实现特定布局功能效果的代码与资源集合，包含html、css、js、图片资源等，例如一个页面中头部区域的资源集合
- 组件化：形容项目的编码方式，即按组件方式编写实现的项目。
组件的基本定义与使用
React是一种面向组件编程的框架（面向对象->面向模块->面向组件）
- 基本使用
组件标签：以大写字母开头，如
使用组件的不变步骤：
1、定义组件
方式1：工厂函数组件（一种简单组件：没有状态的组件）
function MyComponent() { return <h2>return 出来的必须是一个虚拟DOM</h2> }
方式2：ES6类组件（一种复杂组件：有状态的组件）
class MyComponent2 extends React.Component { render () { return <h2>使用ES6类组件方式</h2> } }
2、渲染组件标签
ReactDOM.render(<MyComponent />,document.getElementById('test'));//MyComponent内部包含了<h2>标签
完整代码（请结合代码注释查看）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="test1"></div> <div id="test2"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> function MyComponent() { return <h2>return 出来的必须是一个虚拟DOM</h2> //return 出来的必须是一个虚拟DOM } class MyComponent2 extends React.Component { console.log(this);//打印出组件的实例对象（组件对象） render () { return <h2>使用ES6类组件方式</h2> } } ReactDOM.render(<MyComponent />,document.getElementById('test1'));//MyComponent内部包含了<h2>标签 ReactDOM.render(<MyComponent2 />,document.getElementById('test2')); //MyComponent2内部包含了<h2>标签,调用MyComponent2时会创建一个实例，然后这个实例再去调用下面的方法——render() </script> </body> </html>
效果如图：
