前言

  这几天尝试看React 官方中文文档看多了容易头疼 翻看别人的都很碎片化且不是最新 以至于走了很多弯路

 所以我从这里开始记录从零开始 如何创建一个React项目及以简单的页面跳转和传参

 意在让初学者能够一步跨进React门槛 2023/5/4

这里是页面跳转传参的记录

一、vite创建React项目

要求node版本16及以上

按图依次执行即可 下面是文字描述 （CV即可）

① 选择目标文件夹 启动cmd命令

② npm create vite

③ react-tips

④ 移动键盘↓键 选择React回车确认

⑤ 选择JavaScript回车确认 （当然你选TS也行 这里以JS为例）

⑥ cd react-tips

⑦ npm i

⑧ npm run dev

⑨ 浏览器打开对应地址查看效果

效果如下：

如果你用vite创建过vue项目 那么这个对于你来说是轻车熟路的

页面上的东西是创建自带的 既然是自己的项目 这些东西自然要清除掉

下面我们做的就是把它变成一个纯净的React项目 然后写入我们自己的内容

 清空App.css和index.css这两个css文件

把App.jsx写入一下内容

export default function App(){

return(

<>

)

}

下面使用router来完成页面之间的跳转

当然页面跳转自然要现有页面

看下增加的文件和对应内容

src/pages/home.jsx

 src/pages/notFound.jsx

下面使用路由

① 下载插件 npm i react-router-dom(此时版本为6.11.1)

npm i react-router-dom

② 创建文件

src/router/index.jsx

import React,{ Suspense } from 'react'

import { BrowserRouter,Routes,Route,Navigate } from 'react-router-dom'

// 路由懒加载

const Home = React.lazy(()=>import('../pages/home'))

const NotFound = React.lazy(()=>import('../pages/notFound'))

export default function Router(){

return(

}>

}>

{/* 定义404路由*/}

}>

{/* 未匹配的路由使用Navigate重定向到此页面 这里即notFound.jsx */}

}>

)

}

引入并使用路由

App.jsx

import Router from './router'

export default function App(){

return(

<>

)

}

效果：

 验证路由跳转和路由重定向

home.jsx 

import { useNavigate } from 'react-router-dom'

export default function Home(){

const navigate = useNavigate()

// 箭头函数

const toList = ()=>{

navigate('/list')

}

// 非箭头函数

function redirectToNotFound(){

// 随意一个没有定义的路由 验证是否重定向

navigate('/sdf')

}

return(

<>

this is home page

{/* 点击事件为 onClick */}

正常跳转至list页面

重定向跳转至404页面

)

}

 动态效果：

此篇既然是最基本的 那么下面我们看看怎么写入CSS样式

此外先提一句在每一个页面jsx的return里必须有一个根标签（可以照vue2的template来理解）

React可以套一个空标签<>... 来减少DOM

方式一：行内样式  style={{}}

 方式二： 变量写法

 方式三：外部引入CSS文件

方式四：使用插件 styled-components

下载插件 styled-components (此时版本为5.3.10）

npm i styled-components

效果：

 以上四种方法任君挑选

 一个页面的组成部分 大致是这三部分

 总结：

① 页面组件后缀为 jsx 可以理解为vue项目的组件后缀 vue

② return里最外面要有根标签 与vue2的template相似

React可以使用空标签<>包在最外层以减少DOM

③ 行内样式格式为 style={{}}  类名为 className

④ 点击事件为 onClick={}

⑤ DOM里写入变量使用单话括号 {} 或者说只要是用到变量就得使用 {}

好了 到此 你应该可以当个画图仔了 后面我会分享页面跳转的几个方法和带参、接参、展示等

由于篇幅问题 （绝对不是到下班了 不是^_^）

下次再聊

对了 以上如有不对 欢迎指教！

相关阅读

 您阅读本篇文章共花了：