1.React概述

1.1 什么是React

React是一个用于构建用户界面的javaScript库。 如果从MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。 React起源于Facebook的内部项目，后来用来架设Instagram的网站，并于2013年5月开源。

1.2 React的特点

• 声明式 你只需要描述UI(HTML)看起来是什么样，就跟写HTML一样 React负责渲染UI，并在数据变化时更新UI

const jsx = <div className="app">
   <h1>Hello React! 动态变化数据:{count}<h1>
</div>

• 基于组件 组件是React最重要的内容。 组件表示页面中的部分内容。 组合、复用多个组件，可以实现完整的页面功能。
• 学习一次，随处使用

2.React基本使用

2.1 React的安装

安装命令：npm i react react-dom

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

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

• 参数一：要渲染的react元素
• 参数二：挂载点

<div id="root"></div>
<script>
   const title = React.createElement(
   'p',
   {title: '我是标题',id: 'p1'},
   'Hello React',
   React.createElement('span',null,'我是span节点')
   )
   ReactDOM.render(title,document.getElementById('root'))
</script>

3.React脚手架的使用

3.1 React脚手架意义

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

3.2 使用React脚手架初始化项目

1. 初始化项目，命令：npx create-react-app my-app
2. 启动项目，在项目根目录(cd my-app)执行命令：npm start 关于npx可看以下链接详细介绍 blog.csdn.net/qq_30376375…
3. npm v5.2.0引入的一条命令
4. 目的：提升包内提供的命令行工具的使用体验。
5. 原来：先安装脚手架包，再使用这个包中提供的命令。
6. 现在：无需安装脚手架包，就可以直接使用这个包提供的命令。

3.3 在脚手架中使用React

1. 导入react 和react-dom两个包。

import React from 'react'
import ReactDOM from 'react-dom'

2. 调用React.creatrElement()方法创建react元素。
3. 调用ReactDOM.render()方法渲染react元素到页面中。