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`查看成果