React的基本使用
React安裝
-
安裝命令:npm i react react-dom
- react 包是核心,提供創(chuàng)建元素缎除、組件等功能
- react-dom 包提供 DOM 相關(guān)功能等
React的使用
1. 引入 react 和 react-dom 兩個 js 文件
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
2. 創(chuàng)建 React 元素
3. 渲染 React 元素到頁面中
<div id="root"></div>
<script>
const title = React.createElement('h1', null, 'Hello React')
ReactDOM.render(title, document.getElementById('root'))
</script>
使用 React 腳手架初始化項目
1. 初始化項目域慷,命令:npx create-react-app my-app
2. 啟動項目荒辕,在項目根目錄執(zhí)行命令:npm start
在腳手架中使用 React
1. 導(dǎo)入 react 和 react-dom 兩個包。
import React from 'react'
import ReactDOM from 'react-dom'
2. 調(diào)用 React.createElement() 方法創(chuàng)建 react 元素犹褒。
3. 調(diào)用 ReactDOM.render() 方法渲染 react 元素到頁面中