1、搭建React開(kāi)發(fā)環(huán)境
在命令行輸入以下命令,創(chuàng)建一個(gè) react-todos 項(xiàng)目:
// 如果全局沒(méi)有安裝create-react-app, 可以使用npx安裝
npx create-react-app react-todos
// 運(yùn)行項(xiàng)目
cd react-todos
npm start
2、編寫(xiě)React todos代碼
2.1 改寫(xiě)index.js
引入組件Todos.js。
// ...
import Todos from './Todos';
// ...
ReactDOM.render(, document.getElementById('root'));
// ...
2.2 編寫(xiě) Todos.css
在項(xiàng)目目錄 react-todos/src 下創(chuàng)建 Todos.css:
2.3 編寫(xiě) 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)