React简单上手

React是什么？

React 是用于构建用户界面的Js库[数据渲染视图]

注：vue为渐进式框架

创建新的React应用

项目的安装

npx create-react-app 名称
cd 名称
npm start

注：npx 是 node 中提供的一个指令(npm类似)

目录结构分析

node_modules 项目依赖
public	公共文件
src 和 Vue 一样写业务逻辑(项目的所有操作都在这里进行)
	App.css	根组件的样式
	App.js	根组件的js
	App.test.js	根组件的测试（无用 删除）
	index.css 全局样式
	index.js   react 入口文件 =》Vue中的main.js
	setupTests.js 当前项目的测试
	reportWebVital.js 是Google发起的，提供质量信号(不用)
package-lock.json	项目中安装的依赖版本
package.json	项目配置文件

分析index.js文件

jsx语法

由React最先接入的写法（用于编写React的写法），使代码更简洁、清晰、提升开发效率 

JSX 语法允许我们像写 HTML 一样来写我们的 JS 代码；相当于JS扩展，具有JS的全部语法

API

1.动态数据  ==>  {}

function App() {
  let name = '张三'
  return (
    // {}一个大括号，其余于Vue插值表达式作用一样, 也可以写运算符
    <div>你好{name}同学</div>
  )
}

 1.动态数据  ==>  {}

react-router路由

根据路由地址改变页面；具有hash 和 history 两种模式

React中路由的使用

1）安装路由

 npm install react-router-dom@6

2）入口文件引入

在src/index.js 下引入

'''
import { BrowserRouter,HashRouter } from 'react-router-dom'
// BrowserRouter 历史模式[常用]
// HashRouter   Hash模式
...
root.render(
    // 包裹起来  表示里面使用了历史模式
  <BrowserRouter>
    <App></App>
  </BrowserRouter>
)

3）根组件App.js配置路由表

// 没有使用路由统一文件(如路由表的抽离)
// (1)路由表 => Routes
// (2)路由信息 => Route
// (3)导航标签 => Link、NavLink(可调节样