react基本使用

---

一、react概述

1.什么是react

react是一个用于构建用户界面的JavaScript库。

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

2.react的特点

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

(1)声明式

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

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

(2)基于组件

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

(3)学习一次，随便使用

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

二、react的基本使用

1.react的安装

安装命令：npm i react react-dom

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

2.react的使用

• 引入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>

• 创建react元素
• 渲染react元素到页面中

<div id="root"></div>
 <script>
     const title = React.createElement('hi', null, "Hello React");
     ReactDOM.render(title, document.getElementById('root'));
 </script>

3.方法说明

• React.createElement()说明

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

• ReactDOM.render()说明

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

三、react脚手架的使用

1.react脚手架意义

• 脚手架是现代开发web应用的必备。
• 充分利用webpack、babel，eslint等工具辅助项目开发。
• 零配置，无需手动配置繁琐的工具即可使用。
• 关注业务，而不是工具配置。

2.使用react脚手架初始化项目

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

（1）npx命令介绍

• npm引入的一条命令
• 目的：提升包内提供的命令行工具的使用体验
• 原来：先安装脚手架包，再使用这个包中提供的数据
• 现在：无需安装脚手架包，就可以直接使用这个包提供的命令

(2)补充说明

• 推荐使用：npx create-react-app my-app
• npm init react-app my-app
• yarn create react-app my-app
• yarn是Facebook发布的包管理器，可以看作是npm的替代品，功能与npm相同
• yarn具有快速、可靠和安全的特点
• 初始化新项目：yran init
• 安装包：yarn add 包名称
• 安装项目依赖项：yarn
• 其他命令，请参考yarn文档

3.在脚手架中使用react

• 导入react和react-dom两个包。

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

• 调用React.createElement()方法创建react元素。
• 调用ReactDOM.render（）方法渲染react元素到页面中。

---

总结

• react是构建用户界面的JavaScript库。
• 使用react时，推荐使用脚手架方式。
• 初始化项目命令：npx create-react-app my-app
• 启动项目命令：yarn start（或npm start）
• 调用React.createElement()方法创建react元素。
• 调用ReactDOM.render（）方法渲染react元素到页面中。