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 脚手架初始化项目

1.初始化项目命令：npx create-react-app my-app //前面的都是固定的 my-app 为项目文件夹名字 2.启动项目，在项目根目录执行命令：npm start
文件夹详解图片
初始化文件夹文件虽然很多，但我们后期做开发大部分还是像Vue一样，是在src目录下写代码的，而刚开始学习主要的文件只有两个，第一个是public目录下的index.html文件，这是必须有的，因为最后打包成html格式展示到页面的就是这个文件，还有一个是src目录下的文件index.js文件，这算是项目的入口文件了，src文件夹下所有的其他文件都删除也不会影响开发，只需要留一个index.js，或者如果刚开始需要一些样式的话也可以把index.css也留着，index.css是全局样式文件，文件夹主要的就这两个文件，其他的我们后期再说，刚开始做开发我们就从这两个文件开始。

01— 02前两篇总结

React是构建用户界面的JavaScript库
使用 react 时，推荐使用脚手架方式。
初始化项目命令：npx create-react-app 项目文件夹名(英文) 。
启动项目命令：yarn start（或 npm start）。
React.createElement() 方法用于创建 react 元素（了解即可）。
ReactDOM.render() 方法负责渲染 react 元素到页面中。

————那接下来我们就开始体验一下用React做开发吧········