React概况和基本使用与React脚手架搭建

什么是React

• React是一个构建用户界面的JavaScript库
• 用户界面：Html界面（前端开发）
• React主要用来编写HTML页面或构建Web应用
• React起源于Facebook内部项目，于13年5月开源，并一直维护至今。

React的特点

• 声明式

以声明式编写UI跟写HTML一样
React负责渲染UI，根据数据更新UI

• 组件化

组件表示页面中的部分内容，就像是一个积木
组合、复用多个组件就可以堆积木式的实现一个完整一个页面
组件是React中最重要的知识

• 一次学习，随处编写

使用React可以编写Web应用
使用React可以编写原生App
......

基本使用

1.React安装
安装命令：npm i react react-dom
react是核心包，提供创建元素和组件能力
react-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元素到页面中

    // React.createElement()参数说明-了解就行
    // 第一个参数:创建React元素标签
    // 第二个参数:该React元素的属性
    // 第三个参数:更改元素的子节点
    const title = React.createElement('h1',{id:'title'},'hello react')
    // ReactDOM.render()参数说明-了解就行
    // 第一个参数:需要渲染的React元素
    // 第二个参数:挂载点
    ReactDOM.render(title,document.getElementById('app'))

React JSX

什么是JSX

• 是一个JavaScript的语法扩展，用来创建一个React元素，建议在React中使用JSX来替代React.createElement()
• JSX让我们更加适应HTML的编写习惯
• JSX可以在开发React应用时显示更多有用的错误提示和警告信息，提高开发体验

JSX基本使用

1. JSX解析器安装

• 安装命令：npm i babel-standalone
• babel-standalone是JSX语法的解析器，通过它可以将JSX转换成浏览器能够执行的代码

2. JSX创建一个H1元素渲染到页面上

<!-- 导入react、react-dom、babel 三个js文件 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>

<div id="app"></div>
<script type="text/babel">
  // 创建react元素
  const H1 = <h1 id='title'>Hello React</h1>
  // 渲染React元素到页面中
  ReactDOM.render(H1,document.getElementById('app'))
</script>

React脚手架搭建

1. 脚手架的意义

• 脚手架是开发现代Web的必备工具
• 充分利用Webpack、Babel等工具辅助开发
• 关注业务，无需关注繁琐的工具配置
• Vue中的Vue-cli,React中的create-react-app都是脚手架

2. 使用脚手架初始化React项目（create-react-app）

• 初始化项目命令：npx create-react-app my-app
• 启动项目步骤：
  1、cd my-app
  2、npm run start 或者 yarn start 启动项目

3. npx 命令介绍

• npm v5.2.0 引入的一条命令
• 目的：提升命令行工具的使用体验
• 原来：先安装脚手架全局包，再使用它初始化项目
• 现在：无需安装脚手架全局包，就可以直接使用它初始化项目

4. 组件导出导入并使用

• 创建src/MyFirstReact.js
• 编写组件代码，创建想要的界面元素
• 导出组件（Tips：组件类型必须是class或者function类型，并且首字母必须大写）

function MyFirstReact() {
    // 编写组件代码，创建想要的界面
    return <div>第一个react组件</div>;
}
// 导出组件 
export default MyFirstReact

• 在src/App.js中导入并使用组件

import MyFirstReact from './MyFirstReact'
function App() {
  return (
    <div>
      {/* 使用MyFirstReact组件  */}
      <MyFirstReact></MyFirstReact>
    </div>
  );
}