# React过渡动画与CSS

React过渡动画实现

react-transition-group介绍

  • 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。
  • 当然，我们可以通过原生的 CSS 来实现这些过渡动画，但是React社区为我们提供了 react-transition-group 用来完成过渡动画。
  • React 曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transition-group。
    • 这个库可以帮助我们方便的实现组件的 入场 和 离场 动画，使用时需要进行额外的安装：
1
2
3
4
5
# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group
  • react-transition-group 本身非常小，不会给我们的应用程序增加过多的负担。

react-transition-group组件

  • react-transition-group 主要包含四个组件：
  • Transition
    • 该组件是一个和平台无关的组件（不一定要结合 CSS ）；
    • 在前端开发中，我们一般是结合 CSS 来完成样式，所以比较常用的是 CSSTransition；
  • CSSTransition
    • 在前端开发中，通常使用 CSSTransition 来完成过渡动画效果
  • SwitchTransition
    • 两个组件显示和隐藏切换时，使用该组件
  • TransitionGroup
    • 将多个动画组件包裹在其中，一般用于列表中元素的动画；

CSSTransition

  • CSSTransition 是基于 Transition 组件构建的：
  • CSSTransition 执行过程中，有三个状态：appear、enter、exit；
  • 它们有三种状态，需要定义对应的CSS样式：
    • 第一类，开始状态：对于的类是 -appear、-enter、exit；
    • 第二类：执行动画：对应的类是 -appear-active、-enter-active、-exit-active；
    • 第三类：执行结束：对应的类是 -appear-done、-enter-done、-exit-done；
  • CSSTransition 常见对应的属性：
  • in：触发进入或者退出状态
    • 如果添加了 unmountOnExit={true}，那么该组件会在执行退出动画结束后被移除掉；
    • 当 in 为 true 时，触发进入状态，会添加 -enter、-enter-acitve 的 class 开始执行动画，当动画执行结束后，会移除两个 class，并且添加 -enter-done 的 class；
    • 当 in 为 false 时，触发退出状态，会添加 -exit、-exit-active 的 class 开始执行动画，当动画执行结束后，会移除两个 class，并且添加 -enter-done 的 class；

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'
import './style.css'

export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isShow: true,
    }
  }
  render() {
    const { isShow } = this.state
    return (
      <div>
        <button onClick={(e) => {this.setState({ isShow: !isShow })}}>切换</button>
        <CSSTransition in={isShow} classNames="why" timeout={2000} unmountOnExit={true} appear>
          <div>
            <h2>哈哈哈</h2>
            <h3>呵呵呵</h3>
          </div>
        </CSSTransition>
      </div>
    )
  }
}

export default App

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*进入动画*/
.why-enter {
  opacity: 0;
}
.why-enter-active {
  opacity: 1;
  transition: all 2s ease;
}

/*离开动画*/
.why-exit {
  opacity: 1;
}
.why-exit-active {
  opacity: 0;
  transition: all 2s ease;
}

/*初次渲染动画*/
.why-appear {
  transform: translateX(-150px);
}
.why-appear-active {
  transform: translateX(0);
  transition: transform 2s ease;
}

CSSTransition常见属性

  • classNames：动画 class 的名称
    • 决定了在编写 css 时，对应的 class 名称：比如 card-enter、card-enter-active、card-enter-done；
  • timeout：
    • 过渡动画的时间
  • appear：
    • 是否在初次进入添加动画（需要和 in 同时为 true ）
  • unmountOnExit：值为 true ,则退出后卸载组件
  • 其他属性可以参考官网来学习：
  • CSSTransition 对应的钩子函数：主要为了检测动画的执行过程，来完成一些 JavaScript 的操作
    • onEnter：在进入动画之前被触发；
    • onEntering：在应用进入动画时被触发；
    • onEntered：在应用进入动画结束后被触发；
1
2
3
4
5
6
7
8
9
10
11
12
<CSSTransition in={isShow} classNames="why" timeout={2000} unmountOnExit={true} appear 
  onEnter={(e) => console.log('开始进入动画')} 
  onEntering={(e) => console.log('执行进入动画')} 
  onEntered={(e) => console.log('执行进入结束')} 
  onExit={(e) => console.log('开始离开动画')} 
  onExiting={(e) => console.log('执行离开动画')} 
  onExited={(e) => console.log('执行离开结束')}>
  <div>
    <h2>哈哈哈</h2>
    <h3>呵呵呵</h3>
  </div>
</CSSTransition>

SwitchTransition

  • SwitchTransition 可以完成两个组件之间切换的炫酷动画：
    • 比如我们有一个按钮需要在 on 和 off 之间切换，我们希望看到 on 先从左侧退出，off 再从右侧进入；
    • 这个动画在vue中被称之为 vue transition modes；
    • react-transition-group 中使用 SwitchTransition 来实现该动画；
  • SwitchTransition 中主要有一个属性：mode，有两个值
    • in-out：表示新组件先进入，旧组件再移除；
    • out-in：表示就组件先移除，新组件再进入；
  • 如何使用 SwitchTransition 呢？
    • SwitchTransition 组件里面要有 CSSTransition 或者 Transition 组件，不能直接包裹你想要切换的组件；
    • SwitchTransition 里面的 CSSTransition 或 Transition 组件不再像以前那样接受 in 属性来判断元素是何种状态，取而代之的是 key 属性；

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { PureComponent } from 'react'
import { SwitchTransition, CSSTransition } from 'react-transition-group'
import './style.css'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      isLogin: true,
    }
  }

  render() {
    const { isLogin } = this.state
    return (
      <div>
        <SwitchTransition mode="out-in">
          <CSSTransition key={isLogin ? 'exit' : 'login'} classNames="login" timeout={1000}>
            <button onClick={(e) => this.setState({ isLogin: !isLogin })}>{isLogin ? '退出' : '登录'}</button>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}

export default App

./style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.login-enter {
  transform: translateX(100px);
  opacity: 0;
}

.login-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 1s ease;
}

.login-exit {
  transform: translateX(0);
  opacity: 1;
}

.login-exit-active {
  transform: translateX(-100px);
  opacity: 0;
  transition: all 1s ease;
}

TransitionGroup

  • 当我们有一组动画时，需要将这些 CSSTransition 放入到一个 TransitionGroup 中来完成动画：

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React, { PureComponent } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './style.css'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      books: [
        { id: 111, name: '你不知道JS', price: 99 },
        { id: 222, name: 'JS高级程序设计', price: 88 },
        { id: 333, name: 'Vuejs高级设计', price: 77 },
      ],
    }
  }

  addNewBook() {
    const books = [...this.state.books]
    books.push({ id: new Date().getTime(), name: 'React高级程序设计', price: 99 })
    this.setState({ books })
  }

  removeBook(index) {
    const books = [...this.state.books]
    books.splice(index, 1)
    this.setState({ books })
  }

  render() {
    const { books } = this.state

    return (
      <div>
        <h2>书籍列表:</h2>
        <TransitionGroup component="ul">{/* 默认会渲染成 div 标签 */}
          {books.map((item, index) => {
            return (
              <CSSTransition key={item.id} classNames="book" timeout={1000}>
                <li>
                  <span>
                    {item.name}-{item.price}
                  </span>
                  <button onClick={(e) => this.removeBook(index)}>删除</button>
                </li>
              </CSSTransition>
            )
          })}
        </TransitionGroup>
        <button onClick={(e) => this.addNewBook()}>添加新书籍</button>
      </div>
    )
  }
}

export default App

./style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.book-enter {
  transform: translateX(150px);
  opacity: 0;
}

.book-enter-active {
  transform: translateX(0);
  opacity: 1;
  transition: all 1s ease;
}

.book-exit {
  transform: translateX(0);
  opacity: 1;
}

.book-exit-active {
  transform: translateX(150px);
  opacity: 0;
  transition: all 1s ease;
}

React中如何编写CSS(补)

组件化的CSS

  • 前面说过，整个前端已经是组件化的天下：
    • 而 CSS 的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的 CSS 解决方案。
  • 在组件化中选择合适的 CSS 解决方案应该符合以下条件：
    • 可以编写局部 css：css 具备自己的具备作用域，不会随意污染其他组件内的元素；
    • 可以编写动态的 css：可以获取当前组件的一些状态，根据状态的变化生成不同的 css 样式；
    • 支持所有的 css 特性：伪类、动画、媒体查询等；
    • 编写起来简洁方便、最好符合一贯的 css 风格特点；
    • 等等…

React中的CSS

  • 事实上，css 一直是 React 的痛点，也是被很多开发者吐槽、诟病的一个点。
  • 在这一点上，Vue 做的要好于 React：
    • Vue 通过在 .vue 文件中编写<style><style>标签来编写自己的样式；
    • 通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效；
    • 通过 lang 属性来设置你喜欢的 less、sass 等预处理器；
    • 通过内联样式风格的方式来根据最新状态设置和改变 css；
    • 等等…
  • Vue 在 CSS 上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。
  • 相比而言，React 官方并没有给出在 React 中统一的样式风格：
    • 由此，从普通的 css，到 css modules，再到 css in js，有几十种不同的解决方案，上百个不同的库；
    • 大家一致在寻找最好的或者说最适合自己的 CSS 方案，但是到目前为止也没有统一的方案

内联样式

  • 内联样式是官方推荐的一种 css 样式的写法：

    • style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串；
    • 并且可以引用 state 中的状态来设置相关的样式；

  • 内联样式的优点:

    • 内联样式, 样式之间不会有冲突

    • 可以动态获取当前 state 中的状态

  • 内联样式的缺点：

    • 写法上都需要使用驼峰标识
    • 某些样式没有提示
    • 大量的样式, 代码混乱
    • 某些样式无法编写(比如伪类/伪元素)

  • 所以官方依然是希望内联样式和普通的 css 来结合编写；

任意组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react'

export class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      titleSize: 30,
    }
  }
  render() {
    const { titleSize } = this.state
    return (
      <div>
        <h2 style={{ color: 'red', fontSize: `${titleSize}px` }}>我是标题</h2>
        <h3 style={{ color: 'blue', fontSize: '20px' }}>我是内容</h3>
      </div>
    )
  }
}

export default App

普通的css

  • 普通的 css 我们通常会编写到一个单独的文件，之后再进行引入。
  • 这样的编写方式和普通的网页开发中编写方式是一致的：
    • 如果我们按照普通的网页标准去编写，那么也不会有太大的问题；
    • 但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响；
    • 但是普通的 css 都属于全局的 css，样式之间会相互影响；
  • 这种编写方式最大的问题是样式之间会相互层叠掉,样式会全局生效；

任意组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component } from 'react'
import "./App.css"

export class App extends Component {
  render() {
    return (
      <div>
        <h2 className='title'>我是标题</h2>
        <p className='content'>我是内容</p>
      </div>
    )
  }
}

export default App

  • 对应的 CSS 样式

./App.css

1
2
3
4
5
6
7
8
9
.title {
  font-size: 30px;
  color: red;
}
.content {
  font-size: 20px;
  color: blueviolet;
}

普通 Less (补充)

  • Less 的写法有普通 CSS 写法一样
    • 导入 less 文件,再使用类名,需添加以下配置:

craco.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

CSS Modules

  • css modules 并不是 React 特有的解决方案，而是所有使用了类似于 webpack 配置的环境下都可以使用的。
    • 如果在其他项目中使用它，那么我们需要自己来进行配置，比如配置 webpack.config.js 中的 modules: true 等。
  • React 的脚手架已经内置了 css modules 的配置：
    • .css/.less/.scss 等样式文件都需要修改成 .module.css/.module.less/.module.scss 等；
    • 之后就可以引用并且进行使用了；
  • css modules 确实解决了局部作用域的问题，也是很多人喜欢在 React 中使用的一种方案。
  • 但是这种方案也有自己的缺陷：
    • 引用的类名，不能使用(-)连接符，在 JavaScript 中是不识别的；
    • 所有的 className 都必须使用{ style.className } 的形式来编写；
    • 不方便动态来修改某些样式，依然需要使用内联样式的方式；
  • 如果你觉得上面的缺陷还算 OK，那么你在开发中完全可以选择使用 css modules 来编写，并且也是在 React 中很受欢迎的一种方式

任意组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react'

import profileStyle from './App.module.css'

export class App extends Component {
  render() {
    return (
      <div>
        <h2 className={profileStyle.title}>我是标题</h2>
        <p className={profileStyle.content}>我是内容</p>
      </div>
    )
  }
}

export default App

App.module.css

  • 注意 : CSS 的文件名必须添加 module
1
2
3
4
5
6
7
8
9
.title {
  font-size: 30px;
  color: rgb(0, 255, 170);
}
.content {
  font-size: 20px;
  color: rgb(103, 10, 190);
}

CSS in JS

认识CSS in JS

  • 官方文档也有提到过 CSS in JS 这种方案：
    • “CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义；
    • 注意此功能并不是 React 的一部分，而是由第三方库提供；
    • React 对样式如何定义并没有明确态度；
  • 在传统的前端开发中，我们通常会将结构（HTML）、样式（CSS）、逻辑（JavaScript）进行分离。
    • 但是在前面的学习中，我们就提到过，React 的思想中认为逻辑本身和 UI 是无法分离的，所以才会有了 JSX 的语法。
    • 样式呢？样式也是属于 UI 的一部分；
    • 事实上 CSS-in-JS 的模式就是一种将样式（CSS）也写入到 JavaScript 中的方式，并且可以方便的使用 JavaScript 的状态；
    • 所以 React 有被人称之为 All in JS；
  • 当然，这种开发的方式也受到了很多的批评：

styled-components

  • 批评声音虽然有，但是在我们看来很多优秀的 CSS-in-JS 的库依然非常强大、方便：
    • CSS-in-JS 通过 JavaScript 来为 CSS 赋予一些能力，包括类似于 CSS 预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等；
    • 虽然 CSS 预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点；
    • 所以，目前可以说 CSS-in-JS 是 React 编写 CSS 最为受欢迎的一种解决方案；
  • 目前比较流行的 CSS-in-JS 的库有哪些呢？
    • styled-components
    • emotion
    • glamorous
  • 目前可以说 styled-components 依然是社区最流行的 CSS-in-JS 库，所以我们以 styled-components 的讲解为主；
  • VScode 插件 : vscode-styled-components , 支持语法高亮
  • 安装 styled-components 依赖：
1
2
npm install styled-components

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react'
import { AppWrapper } from './style'

export class App extends Component {
  render() {
    return (
      <AppWrapper>
        <div className="section">
          <h2 className="title">我是标题</h2>
          <p className="content">我是内容</p>
        </div>
      </AppWrapper>
    )
  }
}

export default App

style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import styled from 'styled-components'

export const AppWrapper = styled.div`
  .section {
    border: 1px solid red;
    .title {
      color: red;
      &:hover {
        background-color: green;
      }
    }
    .content {
      color: blue;
    }
  }
`

ES6标签模板字符串

  • ES6中增加了模板字符串的语法，这个对于很多人来说都会使用。
  • 但是模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。
  • 我们一起来看一个普通的 JavaScript 的函数：
    • 正常情况下，我们都是通过 函数名 () 方式来进行调用的，其实函数还有另外一种调用方式：
  • 如果我们在调用的时候插入其他的变量：
    • 模板字符串被拆分了；
    • 第一个元素是数组，是被模块字符串拆分的字符串组合；
    • 后面的元素是一个个模块字符串传入的内容；
  • 在 styled component 中，就是通过这种方式来解析模块字符串，最终生成我们想要的样式的

styled-components详解

  • styled-components 的本质是通过函数的调用，最终创建出一个组件：

    • 这个组件会被自动添加上一个不重复的 class；
    • styled-components 会给该 class 添加相关的样式；

  • 另外，它支持类似于 CSS 预处理器一样的样式嵌套：

    • 支持直接子代选择器或后代选择器，并且直接编写样式；
    • 可以通过 & 符号获取当前元素；
    • 直接伪类选择器、伪元素等；

props传递

  • props 可以传递
  • props 可以被传递给 styled 组件
    • 获取 props 需要通过 ${} 传入一个插值函数，props 会作为该函数的参数；
    • 这种方式可以有效的解决动态样式的问题；

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react'
import { AppWrapper } from './style.js'

export class App extends Component {
  render() {
    return (
      <AppWrapper borderColor={'green'}>
        <div className="section">
          <h2 className="title">我是标题</h2>
          <p className="content">我是内容</p>
        </div>
      </AppWrapper>
    )
  }
}

export default App

./style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import styled from 'styled-components'

export const AppWrapper = styled.div`
  .section {
    border: 1px solid ${(props)=>{ return props.borderColor }};
    .title {
      color: red;
      &:hover {
        background-color: green;
      }
    }
    .content {
      color: blue;
    }
  }
`

attrs属性

  • 添加 attrs 属性

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react'
import { AppWrapper } from './style.js'

export class App extends Component {
  render() {
    return (
      <AppWrapper borderColor={'green'}>
        <div className="section">
          <h2 className="title">我是标题</h2>
          <p className="content">我是内容</p>
        </div>
      </AppWrapper>
    )
  }
}

export default App

./style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import styled from 'styled-components'

export const AppWrapper = styled.div.attrs({
  bgColor: (props) => {return props.color || "blue"} // bgColor 的默认值,来自 props.color , 属性名 bgColor 不能和 props.color 同名
})`
  .section {
    border: 1px solid ${(props)=>{ return props.borderColor }};
    .title {
      color: red;
      &:hover {
        background-color: ${(props)=>{ return props.bgColor }};
      }
    }
    .content {
      color: blue;
    }
  }
`

公共样式变量

./variables.js

1
2
3
export const primaryColor = '#ff8800'
export const secondColor = '#ff7788'

./style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import styled from 'styled-components'
import {primaryColor,secondColor} from "./variables.js"

export const AppWrapper = styled.div`
  .section {
    border: 1px solid ${(props)=>{ return props.borderColor }};
    .title {
      color: red;
      &:hover {
        background-color: ${primaryColor};
      }
    }
    .content {
      color: ${secondColor};
    }
  }
`

样式继承

./style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import styled from 'styled-components'

export const divWrapper = styled.div`
  .section {
    .title {
      color: ${(props) => {
        return props.theme.color
      }};
    }
    .content {
      font-size: ${(props) => {
        return props.theme.size
      }};
    }
  }
`

// 继承 divWrapper 的样式
export const AppWrapper = styled(divWrapper)`
  color: blue;
`

styled 设置主题

index.js

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { ThemeProvider } from 'styled-components'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <ThemeProvider theme={{ color: 'purple', size: '50px' }}> {/* 1. 提供 CSS 样式 */}
    <App></App>
  </ThemeProvider>
)

app.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react'
import { AppWrapper } from './style.js'

export class App extends Component {
  render() {
    return (
      <AppWrapper>
        <div className="section"> {/* 2. HTML 结构 */}
          <h2 className="title">我是标题</h2>
          <p className="content">我是内容</p>
        </div>
      </AppWrapper>
    )
  }
}

export default App

./style.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import styled from 'styled-components'

export const AppWrapper = styled.div`
  .section {
    .title {
      color: ${(props) => {return props.theme.color}}; // 3. 使用提供的 CSS 样式变量
    }
    .content {
      font-size:${(props) => {return props.theme.size}} ;
    }
  }
`

classnames 库

  • React 在 JSX 给了我们开发者足够多的灵活性，你可以像编写 JavaScript 代码一样，通过一些逻辑来决定是否添加某些 class：

  • 这个时候我们可以借助于一个第三方的库：classnames

    • 安装依赖 : npm install classnames
      • 很明显，这是一个用于动态添加 classnames 的一个库
1
2
3
4
5
6
7
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

App.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { PureComponent } from 'react'
import classnames from 'classnames'

export class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isShow: true,
    }
  }
  render() {
    const { isShow } = this.state
    return <div className={classnames('aaa', { showEle: isShow })}>App</div>
  }
}

export default App