学习react-环境&手脚架&页面&路由

1. 搭建环境

  1. 安装node和npm

在下面网址下载node,并安装

bash 复制代码
https://nodejs.cn/
#检测是否ok
node -v
npm -v
  1. 安装react
bash 复制代码
npm install -g create-react-app

2. 创建手脚架(TypeScript)

bash 复制代码
create-react-app my-app  --template typescript
cd my-app
npm start

3.页面结构

4.引入Router

bash 复制代码
npm install react-router-dom typescript

5.创建页面

创建HomePage页面:HomePage.tsx和HomeMeta.tsx

javascript 复制代码
// HomeMeta.tsx
export type HomeProp={
    name:string;
}

export type HomeState={
    count:number;
}
javascript 复制代码
// HomePage.tsx
class HomePage extends Component<HomeProp, HomeState> {
    constructor(props: HomeProp) {
        super(props);
        this.state = { count: 0 };
     }

    render() {
        const { name } = this.props; //解构赋值
      return <h1>Hello, {name}!</h1>;
    }
  }
  
  export default HomePage;  

创建LoginPage页面:LoginPage.tsx和LoginMeta.tsx

javascript 复制代码
// LoginMeta.tsx
export interface LoginProp{
    name:string;
}

export interface LoginState{
    count:number;
}
javascript 复制代码
// LoginPage.tsx
class LoginPage extends Component<LoginProp, LoginState> {

    constructor(props: LoginProp) {
        super(props);
        this.state = { count: 0 };
     }
    
    render() {
      return <h1>Hello, {this.props.name}!</h1>;
    }
  }
  
  export default LoginPage;

创建NotFoundPage.tsx和Meta.tsx

javascript 复制代码
// Meta.tsx
export interface MetaProp{
    name:string;
}

export interface MetaState{
    count:number;
}
javascript 复制代码
class NotFoundPage extends Component<MetaProp, MetaState> {

    constructor(props: LoginProp) {
        super(props);
        this.state = { count: 0 };
     }
    
    render() {
      return <h1>Hello, {this.props.name}!</h1>;
    }
  }
  
  export default NotFoundPage;

6.配置路由

在Index.tsx配置HashRouter

javascript 复制代码
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
    
  </React.StrictMode>
);
javascript 复制代码
// App.tsx
function App() {
  return (
    <div className="App">
        <Routes>
            <Route path="/" element={<HomePage name='test' />} />
            <Route path="login" element={<LoginPage name='login'/>} />
            <Route path="*" element={<NotFoundPage name='not found'/>} />
        </Routes>
     
    </div>
  );
}
// App.css
.App {
  text-align: center;
}

输入:

http://localhost:3000/#login 跳到login页

http://localhost:3000/#ttt 跳到not found page

http://localhost:3000 跳到HomePage

7.路由配置文件分离

创建Router.tsx

javascript 复制代码
//  Router.tsx
const routes: RouteObject[] = [
    {
        path: '/',
        element:<HomePage name={"test"} /> //<Navigate to='home/one' /> // 重定向
    },
    {
        path: 'login',
        element: <LoginPage name={"login"} />
    },
    // 未匹配到页面
    {
        path: '*',
        element: <NotFoundPage name={"notfound"} />
    }
]
export default routes;

使用Router.tsx

javascript 复制代码
// App.tsx
function App() {
  const element = useRoutes(routes);
  return (
    <div className="App">
     {element}
    </div>
  );
}

输入:

http://localhost:3000/#login 跳到login页

http://localhost:3000/#ttt 跳到not found page

http://localhost:3000 跳到HomePage

相关推荐
li35743 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj4 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel4 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
Hello_Embed5 小时前
STM32HAL 快速入门(十九):UART 编程(二)—— 中断方式实现收发及局限分析
笔记·stm32·单片机·嵌入式硬件·学习
西陵5 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
天上的光5 小时前
关于学习的一些感悟
学习
大前端helloworld5 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
red_redemption6 小时前
自由学习记录(95)
学习