01.React基础

1.1React基础

1-11什么是React

``` React 是一个用户构建用户界面的JavaScript库。 用户界面：HTML页面（前端） React主要用来写HTML页面，或构建web应用 如果从MVC 的角度来看，React 仅仅是视图层（v），也就是只负责视图的渲染，而并非提供了完整的M 和C 的功能。 起源于Facebook的内部项目，后又用来架设Instagram的网站，并于2013年5月开源 ```

1-12.React的特点

• 声明式
• 基于组件
• 学习一次，随处使用

声明式

``` //只需要描述UI（HTML）看起来是什么样，就跟写HTML 一样 //React 负责渲染UI，并在数据变化时更新UI const jsx =

Hello React! 动态变化数据：{count}

```

基于组件

``` //组件是React最重要的内容 //组件表示页面中的部分内容 //组合，复用多个组件，可以实现完整的页面功能 ```

学习一次，随处使用

``` 使用React可以开发web应用 使用React可以开发移动端原生应用(react-native) 使用React可以开发VR（虚拟现实）应用（react 360） ```

2.1React的安装

``` 安装命令：npm i react react-dom react包是核心，提供创建元素，组件等功能 react-dom包提供DOM相关功能等 ```

2.2React的使用

A.引入react和react-dom 两个js文件

``` ```

B.创建React 元素

``` const title =React.createElement('h1',null,'Hello React') ```

C.渲染React 元素到页面中

```

<h2>2.3方法说明</h2>
<p>React.creatElement() 说明（知道）</p>

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

<p>ReactDOM.render() 说明</p>

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

<h2>3.1React脚手架意义</h2>
<p>1.脚手架是开发现代Web 应用的必备</p>
<p>2.充分利用webpack,Babel,ESLint等工具辅助项目开发</p>
<p>3.零配置，无需手动配置繁琐的工具即可使用</p>
<p>4.关注业务，而不是工具配置</p>
<h2>3.2使用RReact脚手架初始化项目</h2>

1、查看npm的镜像源
npm config get registry
// 默认是：https://registry.npmjs.org/

2.修改成淘宝的镜像源
npm config set registry https://registry.npm.taobao.org

3.create-react-app创建项目
npx create-react-app todolist
// npx comes with npm 5.2+，可以直接使用 npx create-react-app
// 也可以使用 npm init react-app todolist --需要 npm 6+

//初始化项目
npx create-react-app my-app
//启动项目，在项目根目录执行命令：
npm start

<h3>npx 命令介绍</h3>

npm v5.2.0引入的一条命令
目的：提升包内提供的命令行工具的使用体验
原来：先安装脚手架包，再使用这个包中提供分的命令

<h3>yarn create-react-app my-app 命令介绍</h3>

yarn 是Facebook 发布的包管理器，可以看作是npm的替代品，功能和npm相同
yarn 具有快速，可靠和安全的特点
初始化项目：yarn init
安装包： yarn add 包名称
安装项目依赖性：yarn

<h2>3.3在脚手架中使用React</h2>
<p>1.导入react 和 react-dom两个包</p>

import React from 'react'
import React from 'react-dom‘

<p>2.调用React.creatElement()方法创建react元素</p>
<p>3.ReactDOM.render()方法渲染react元素到页面中</p>