携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
前言
大家好呀，我是L同学。在后面的学习中，我们将学习react的系列知识。在本篇文章中，我们将学习到react的介绍、特点、react 脚手架的使用、基本使用、jsx的基本介绍以及为什么需要使用jsx。
react介绍
React 是一个用于构建用户界面JavaScript 库。react有三个特点，分别是声明式UI、基于组件、学习一次，随处使用。
- 声明式UI
你只需要描述UI（HTML）看起来是什么样的，就跟写HTML一样。react中通过数据驱动视图的变化，当数据发生改变react能够高效的更新并渲染DOM。
- 基于组件
组件是react中最重要的内容。组件用于表示页面中的部分内容。组合、复用多个组件，就可以实现完整的页面功能。
- 学习一次，随处使用
使用react/rect-dom可以开发Web应用。使用react/react-native可以开发移动端原生应用（react-native）RN。使用react可以开发VR（虚拟现实）应用（react/react360）。
react脚手架使用
create react app是FaceBook的React团队官方出的一个构建React应用的脚手架工具。
react 脚手架的使用：
方式一
- 全局安装
npm i -g create-react-app或者yarn global add create-react-app - 初始化项目
create-react-app react-basic，react-basic 表示项目名称，可以修改 - 启动项目：
yarn startornpm start - 缺点：全局安装命令无法保证命令一直是最新版本。
方式二
- 命令：
npx create-react-app react-basic - 启动项目：
yarn startornpm start - npx是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用
- 现在：npx 调用最新的 create-react-app直接创建 React 项目
react的基本使用
react的基本使用功能步骤：
- 导入
react和react-dom - 创建react元素(虚拟DOM)
- 渲染react元素到页面中
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
// 创建元素
const title = React.createElement('h1', null, 'hello react')
// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))
JSX介绍
JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码。为什么需要使用jsx呢？这是因为createElement有以下问题：繁琐不简洁；不直观，无法一眼看出所描述的结构；不优雅，开发体验不好。jsx的优势在于声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。
JSX是react的核心内容。使用jsx创建元素是react声明式UI的体现。JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置的 @babel/plugin-transform-react-jsx 包，用来解析该语法。
