React的基本使用
React安装
-
安装命令:npm i react react-dom
- react 包是核心,提供创建元素、组件等功能
- react-dom 包提供 DOM 相关功能等
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. 创建 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. 启动项目,在项目根目录执行命令:npm start
在脚手架中使用 React
1. 导入 react 和 react-dom 两个包。
import React from 'react'
import ReactDOM from 'react-dom'
2. 调用 React.createElement() 方法创建 react 元素。
3. 调用 ReactDOM.render() 方法渲染 react 元素到页面中