react项目实战学习笔记-学习18-app布局

简介: react项目实战学习笔记-学习18-app布局
import React, { Component, Fragment, useState } from "react";
import { Button } from 'antd';
import { Outlet } from 'react-router-dom'
import { Layout } from 'antd';
import logoImg from "./assets/logo.png"
// import Header from './components/Header'
// import Sider from './components/Aside'
// import Bread from './components/Bread'
const {Sider,Content}=Layout
function App() {
  return (
    <Layout id='app'>
     <header>
      <img src={logoImg} alt="" className="logo"></img>
     </header>
     <Layout>
      <Sider>sider</Sider>
      <Content>
        <div>
          <Outlet></Outlet>
        </div>
      </Content>
     </Layout>
      <footer>Respect | Copyright © 2022 歌谣</footer>
    </Layout>
  )
}
export default App;

image.png

相关文章
|
16天前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
35 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
16天前
|
前端开发
学习react基础(2)_props、state和style的使用
本文介绍了React中组件间数据传递的方式,包括props和state的使用,以及如何在React组件中使用style样式。
24 0
|
14天前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件
|
16天前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
16 2
|
23天前
|
前端开发
react学习(17)回调形式的ref
react学习(17)回调形式的ref
|
19天前
|
前端开发
react学习(22)高阶函数和函数柯里化
react学习(22)高阶函数和函数柯里化
|
23天前
|
存储 前端开发 容器
react学习(18)createRef形式的ref
react学习(18)createRef形式的ref
|
22天前
|
前端开发 JavaScript
react学习(19)事件处理
react学习(19)事件处理
|
22天前
|
前端开发 JavaScript
react学习(21)受控组件
react学习(21)受控组件
|
22天前
|
前端开发 JavaScript
react学习(20)非受控组件
react学习(20)非受控组件