一、render方法

參考https://itbilu.com/javascript/react/EJiqU81te.html

React的組件最終通過render方法渲染到DOM中，該方法由ReactDOM類庫提供。API如下：

ReactComponent render(
  ReactElement element,//需要渲染的元素
  DOMElement container,//渲染結果在DOM中插入的位置
  [function callback]//渲染完成後的回調函數
)

二、動手寫一個Hello World

1.接著上一次打開webpack.config.dev.js查看程序的入口文件

//webpack.config.dev.js
...
const paths = require(‘./paths‘);
...
entry: [
...
 

    paths.appIndexJs,

...
  ],

//paths.js
module.exports = {
  ...
  appIndexJs: resolveApp(‘src/index.js‘),
  ..
};

由上面代碼段可知，入口文件是index.js。

2.找到index.js文件

import React from ‘react‘;//引入依賴控件
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;
import App from ‘./App‘;
import registerServiceWorker from 
 
‘./registerServiceWorker‘;//在生產環境做本地緩存的東西

ReactDOM.render(<App />, document.getElementById(‘root‘));
registerServiceWorker();

刪除多余代碼，渲染一個簡單的hello world

//index.js
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
ReactDOM.render(<div>hello world</div>, document.getElementById(‘root‘));


//index.html
<div id="root"></div>

下一節學習JSX，ReactDOM.render(<div>hello world</div>, document.getElementById(‘root‘));

react學習(二)試寫一個例子