1. 在src中创建名为components的文件夹
2. 在components下创建我的第一个组件Hello.js文件
3. 在Hello.js中写
~~~
// 导包
import React,{Component} from 'react';
// 组件的固定语法
class Hello extends Component {
// 渲染函数，必须有返回值
render() {
// 纯js语法，创建元素
// return React.createElement('h1',{id: 'myH1',title: '欢迎来到德莱联盟'},'Hello World');
// jsx 语法，通俗易懂 等价于上面的代码
return <h1 id='myH1' title='欢迎来到德莱联盟'>Hello World</h1>
}
}
// 将组件暴露出去
export default Hello
~~~
>[success] tips: JSX是Javascript和XML结合的一种格式。该语法会自动将html标签转换为纯JS再由浏览器执行
> React.createElement(elementType,elementProperty,children)
,该方法接收三个参数，第一个为元素类型，像‘li,div等’，第二个为元素属性，是一个对象，第三个为子元素，除了本例中添加的文本元素h1外，你还可以为其添加新元素
4. App.js引入组件Hello
~~~
import React, { Component } from 'react';
import './App.css';
import Hello from "./components/Hello";
class App extends Component {
render() {
return (
<div>
<p>what are you want to say?</p>
<Hello/>
</div>
);
}
}
export default App;
~~~
5. 在index.js文件中可以看到
~~~
// ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。
ReactDOM.render(<App />, document.getElementById('root'));
~~~
>[success] tips: ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，第二个参数是插入该模板的目标位置。
6. `ctrl +` esc下面的按键，打开命令行， `npm start`查看成果
