foreword
这几天尝试看React 官方中文文档看多了容易头疼 翻看别人的都很碎片化且不是最新 以至于走了很多弯路
所以我从这里开始记录从零开始 如何创建一个React项目及以简单的页面跳转和传参
意在让初学者能够一步跨进React门槛 2023/5/4
1. Vite creates a React project
Requires node version 16 and above
Execute in sequence according to the figure. The following is a text description (CV is enough)
① Select the target folder to start the cmd command
② npm create vite
③ react-tips
④ Move the keyboard ↓ key to select React and press Enter to confirm
⑤ Select JavaScript and press Enter to confirm (of course, you can also choose TS, here we take JS as an example)
⑥ cd react-tips
⑦ asl and
⑧ npm run dev
⑨ Open the corresponding address in the browser to view the effect
The effect is as follows:
If you have created a vue project with vite, then this is familiar to you
The things on the page are self-created since they are your own projects. Naturally, these things should be cleared
The next thing we do is turn it into a pure React project and write our own content
Clear the two css files App.css and index.css
Write the contents of App.jsx
export default function App(){
return(
<>
</>
)
}
The router is used below to complete the jump between pages
Of course, the page jump naturally needs the existing page
Look at the added files and corresponding content
src/pages/home.jsx
src/pages/notFound.jsx
Use routing below
① Download the plug-in npm i react-router-dom (version 6.11.1 at this time)
npm i react-router-dom
② Create a file
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(
<BrowserRouter>
<Routes>
<Route path='/' element={<Suspense><Home/></Suspense>}></Route>
<Route path='/home' element={<Suspense><Home/></Suspense>}></Route>
{/* 定义404路由*/}
<Route path='/404' element={<Suspense><NotFound/></Suspense>}></Route>
{/* 未匹配的路由使用Navigate重定向到此页面 这里即notFound.jsx */}
<Route path='/*' element={<Navigate to='/404' />}></Route>
</Routes>
</BrowserRouter>
)
}
Import and use routing
App.jsx
import Router from './router'
export default function App(){
return(
<>
<Router></Router>
</>
)
}
Effect:
Verify route jump and route redirection
home.jsx
import { useNavigate } from 'react-router-dom'
export default function Home(){
const navigate = useNavigate()
// 箭头函数
const toList = ()=>{
navigate('/list')
}
// 非箭头函数
function redirectToNotFound(){
// 随意一个没有定义的路由 验证是否重定向
navigate('/sdf')
}
return(
<>
<h1>this is home page</h1>
{/* 点击事件为 onClick */}
<button onClick={toList}>正常跳转至list页面</button>
<button onClick={redirectToNotFound}>重定向跳转至404页面</button>
</>
)
}
dynamic effect:
Since this article is the most basic, let's see how to write CSS styles
In addition, let me mention that there must be a root tag in the return of jsx on each page (you can understand it according to the template of vue2)
React can set an empty tag <>...</> to reduce DOM
Method 1: Inline style style={ {}}
Method 2: variable writing
Method 3: Externally import CSS files
Method 4: Use the plug-in styled-components
Download the plugin styled-components (version 5.3.10 at this time)
npm i styled-components
Effect:
You can choose from the above four methods
The components of a page are roughly these three parts
Summarize:
① The page component suffix is jsx, which can be understood as the component suffix vue of the vue project
② There must be a root tag in the outermost part of the return, which is similar to the template of vue2
React can use empty tags <></> wrapped in the outermost layer to reduce DOM
③ The inline style format is style={ {}} and the class name is className
④ The click event is onClick={}
⑤ To write variables in the DOM, use single-word brackets {} or use {} as long as variables are used
Ok, now you should be able to be a picture boy
Due to the space problem (it is definitely not the end of get off work, it is not ^_^)
Talk to you next time
By the way, if there is anything wrong with the above, welcome to advise!