十分鐘搭建React框架demo
阿新 • • 發佈:2021-08-05
一.準備
專案構建參考《前端實踐專案 目錄》,也可以選擇使用create-react-app這個腳手架去構建專案。
二.安裝
npm安裝react。
npm install react --save-dev
npm install react-dom --save-dev
需要使用babel來將ES6語法轉化為可相容舊版瀏覽器的js語法。同時,webpack編譯不了react的jsx語法,也需要babel來轉化為可以相容的js語法。
npm install babel-core --save-dev npm install babel-loader --save-dev npm install babel-preset-env --save-dev npm install babel-preset-react --save-dev
webpack需要配置使用babel。
//webpack-config.js { test: /\.(js|jsx)$/, use: [{ loader: 'babel-loader' }] }, //.babelrc { "presets": [ "env", "react" ] }
三.程式碼
定義一個元素來掛載react物件。
<div id="app"></div>
引用react語法。react中涉及到虛擬dom概念,需要引用react-dom。
var React = require('react'); var ReactDOM = require('react-dom'); class MyComponent extends React.Component { render() { return <div>Hello World</div>; } } ReactDOM.render(<MyComponent />, document.getElementById("app"));
開啟服務,就可以在網頁上看到hello world。