1、搭建React開發(fā)環(huán)境

　　在命令行輸入以下命令，創(chuàng)建一個(gè) react-todos 項(xiàng)目：

　　// 如果全局沒有安裝create-react-app, 可以使用npx安裝

　　npx create-react-app react-todos

　　// 運(yùn)行項(xiàng)目

　　cd react-todos

　　npm start

　　2、編寫React todos代碼

　　2.1 改寫index.js

　　引入組件Todos.js。

　　// ...

　　import Todos from './Todos';

　　// ...

　　ReactDOM.render(, document.getElementById('root'));

　　// ...

　　2.2 編寫 Todos.css

　　在項(xiàng)目目錄 react-todos/src 下創(chuàng)建 Todos.css：

　　2.3 編寫 Todos.js 組件

　　在項(xiàng)目目錄 react-todos/src 下創(chuàng)建 Todos.js：

　　2.4 項(xiàng)目預(yù)覽效果

　　在控制臺(tái)執(zhí)行 npm start 命令，瀏覽器效果如下：

　　3、將 React 項(xiàng)目編入Kbone

　　3.1 搭建Kbone的React環(huán)境

　　效果如下圖：

　　3.2 修改 index.js

　　修改 kbone-react/src/index.js：

　　// ...

　　// import Counter from './components/counter'

　　import Todos from './components/todos/Todos'

　　export default function createApp() {

　　// ...

　　ReactDOM.render(, container)

　　}

　　// ...

　　3.3 創(chuàng)建 Todos.js 組件

　　在 kbone-react/src/components 下創(chuàng)建 todos文件夾，創(chuàng)建Todos.js，內(nèi)容如下：

　　3.4 創(chuàng)建 Todos.css 樣式

　　3.5 項(xiàng)目預(yù)覽效果

　　命令行進(jìn)入 kbone-react 目錄，執(zhí)行：

　　npm run web

　　npm run mp (或者 npm start)