React教学—02.React的基本使用

React教学—02.React的基本使用

02-1.React 的安装

安装命令：npm i react react-dom 或 yarn add react react-dom
安装两个包react和react-dom，注意一定不能忘记安装react-dom包

• react 包是核心，提供创建元素、组件等功能
• react-dom 包提供 DOM 相关功能等

02-2.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 元素到页面中

 
<script> 
 const title = React.createElement('h1', null, 'Hello React') 

</script>ReactDOM.render(title, document.getElementById('root')) 
<div id="root"></div> 

方法说明
React.createElement() 说明（了解即可）

/ 返回值：React元素 
// 第一个参数：要创建的React元素名称 
// 第二个参数：该React元素的属性 
// 第三个及其以后的参数：该React元素的子节点 
const el = React.createElement('h1', { title: '标题' }, 'Hello React') 

ReactDOM.render() 说明

// 第一个参数：要渲染的React元素 
// 第二个参数：DOM对象，用于指定渲染到页面中的位置 
ReactDOM.render(el, document.getElementById('root'))

02-3.React 脚手架的使用

3-1.React 脚手架意义

• 1.脚手架是开发 现代Web 应用的必备。
• 2.充分利用 Webpack、Babel、ESLint 等工具辅助项目开发。
• 3.零配置，无需手动配置繁琐的工具即可使用。
• 4.关注业务，而不是工具配置。

3.2 使用 React 脚手架初始化项目
创建一个my-app文件夹项目
初始化项目命令：npx create-react-app my-app
my-app为文件夹名