#私藏项目实操分享#【练习案例React三】如何创建一个新的组件引入

简介: #私藏项目实操分享#【练习案例React三】如何创建一个新的组件引入

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

今天得话继续上次开源项目案例得一个编写 然后这边接着编写 目前想在这个基础上再添加一个新的组件 然后就新建了一个文件夹 里面多定义了一个新组件 文件目录common/buttonGroup用于后期使用

image.png

代码

子组件

//按钮制作
import React, { Component } from 'react';
class ButtonGroup extends Component {
  state={
  }
  render(){
      return <div>1111</div>
  }
}
export default ButtonGroup;

引入

import './App.css';
import React from 'react';
//引入按钮组件 后期主要用于按钮组件开发
import  ButtonGroup from './Common/ButtonGroup/index.js';
//引入弹性布局组件 后期用于测试弹性布局
import  Flex from './Common/Flex/index.js';
class App extends React.Component{
    state={
        geyao:1,
    }
    componentDidMount=()=>{
        console.log(this,"thisProps")
    }
    render(){
        return (<div>
            <ButtonGroup></ButtonGroup>
            <Flex></Flex>
        </div>)
    }
}
export default App;

运行结果

image.png

相关文章
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
420 0
|
存储 前端开发 JavaScript
最适合新手学习的react案例-Todolist尊享版!
【8月更文挑战第13天】最适合新手学习的react案例-Todolist尊享版!
232 2
最适合新手学习的react案例-Todolist尊享版!
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
157 10
React技术栈-react使用的Ajax请求库实战案例
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
140 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
174 6
React技术栈-基于react脚手架编写评论管理案例
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
113 2
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
146 1
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
248 1
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
114 0
|
前端开发 JavaScript
快速上手React:从概述到组件与事件处理
快速上手React:从概述到组件与事件处理