# 基本组件（构造函数） ## 定义组件和使用组件基础语法 **通过构造函数定义组件** `function Name(){ return null }` **使用组件** `<Name></name>` ## 案例 ~~~ function Hello() { return <div> 这是一个div <h1>这是一个大大的h1</h1> </div>; } ReactDOM.render(<Hello></Hello>, document.getElementById('app')) ~~~ <iframe width="100%" height="300" src="//jsrun.net/6FyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> # 注意事项 ## 组件返回值 ~~~ import React from 'react'; import ReactDOMfrom 'react-dom' ​ function Hello() {   } ReactDOM.render(<Hello ></Hello>, document.getElementById('app')) ~~~ ~~~ Uncaught Invariant Violation: Hello(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. ~~~ Hello组件。没有从呈现返回任何内容。这通常意味着缺少返回语句。或者，若不呈现任何内容，则返回空值 ## 在定义组件时组件名称必须以大写开头。 因为是构造函数。如果小写会报以下错误： ~~~ import React from 'react'; import ReactDOMfrom 'react-dom' function hello() {  return <div>   你好  </div>; } ReactDOM.render(<hello ></hello>, document.getElementById('app')) ~~~ 这个hello标签浏览器中不存在，如果你想用React组件，那么请用首字母大写开头。 ~~~ react-dom.development.js:506 Warning: The tag <hello> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.in hello ~~~ ## 总结 定义普通组件，我们可以认为是构造函数。首字母大写。且构造函数中必须手动返回结构如果没有结构手动返回null;