精华内容
下载资源
问答
  • react项目案例
    2022-07-10 10:10:39

    React 05. 综合案例

    1、 项目初始化

    创建项目

    $ npx create-react-app app01
    

    项目降级:

    $ npm i react@17 react-dom@17 axios react-router-dom@5 antd --force -S
    

    编辑src/index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    ReactDOM.render(
      <App/>,
      document.querySelector("#root")
    )
    
    

    完善项目结构

    app01/
    	node_modules/
    	public/
    	src/
    		|-- App.js
    		|-- App.css
    		|-- index.js
    		|-- index.css
    	package.json
    	package-lock.json
    	.gitignore
    

    2、公共模块-路由

    创建路由组件和路由映射规则

    • src/router/index.js:路由映射规则
    • src/router/RouterView.jsx:路由组件

    src/router/index.js

    /** 路由映射规则 */
    
    const routes = [
      // {
      //   name: 'home',
      //   path: '/home',
      //   component: Home
      // }
    ]
    
    export default routes
    

    ② 添加路由组件src/router/RouterView.jsx

    /** 路由组件 */
    import React, {Suspense} from 'react'
    
    import {
      Switch,
      Route,
      Redirect
    } from 'router-react-dom'
    
    export default function RouterView(props) {
      const { routes } = props
      return (<Suspense fallback="加载中...">
        <Switch>
          {
            routes.map(route => {
              if(route.redirect) {
                return <Route key={route.name}
                              path={route.path}
                              exact={route.exact}>
                          <Redirect to={route.redirect}/>
                        </Route>
              } else {
                return <Route key={route.name}
                              path={route.path}
                              render={props => {
                                return <route.component {...props} 
                                         children={route.children}/>
                              }}
              }
            })
          }
        </Switch>
      </Suspense>)
    }
    
    

    ③ 实现路由页面跳转

    • 一级路由:注册、登录、布局
    • 二级路由(布局):主页、商品管理、品牌管理、关于我们

    完善组件

    src/
    	views/
    		Reg/
    			index.jsx
    			Reg.css
    		Login/
    			index.jsx
    			Login.css
    		Main/
    			index.jsx
    			Main.css
    		Home/
    			index.jsx
    			Home.css
    		Goods/
    			index.jsx
    			Goods.css
    		Brand/
    			index.jsx
    			Brand.css
    		About/
    			index.jsx
    			About.css
    

    一级路由:编辑src/App.js

    import './App.css';
    
    import {
      BrowserRouter as Router,
      NavLink
    } from 'react-router-dom'
    
    import routes from './router';
    import RouterView from './router/RouterView';
    
    function App() {
      return (
        <div className="App">
          <h2>入口模块</h2>
          <Router>
            <nav>
              <NavLink to="/main">LOGO</NavLink>
              <div>
                <NavLink to="/login">登录</NavLink>
                <NavLink to="/reg">注册</NavLink>
              </div>
            </nav>
    
            <hr />
            <RouterView routes={routes} />
          </Router>
        </div>
      );
    }
    
    export default App;
    
    

    二级路由:src/views/Main.jsx

    import React, { Component } from 'react'
    
    import {  
      NavLink
    } from 'react-router-dom';
    import RouterView from '../../router/RouterView'
    
    export default class Main extends Component {
      render() {
        return (
          <div>
            <RouterView routes={this.props.children}/>
            <hr/>
            <ul>
              <li><NavLink to="/main/home">首页</NavLink></li>
              <li><NavLink to="/main/goods">商品</NavLink></li>
              <li><NavLink to="/main/brand">品牌</NavLink></li>
              <li><NavLink to="/main/about">关于我们</NavLink></li>
            </ul>
          </div>
        )
      }
    }
    

    3、视图组件库

    (1) 初始化

    确认安装视图库

    $ npm i antd --force -S
    

    安装craco

    $ npm i @craco/craco --force -S
    

    安装less解析模块

    $ npm i craco-less --force -S
    

    创建配置文件:craco.config.js

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

    修改package.json,修改启动命令:

    {
      "name": "app01",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@craco/craco": "^6.4.5",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.3.0",
        "@testing-library/user-event": "^13.5.0",
        "antd": "^4.21.5",
        "axios": "^0.27.2",
        "craco-less": "^2.0.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^5.3.3",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      },
      "scripts": {
        "start": "craco start",					// 修改启动命令
        "build": "craco build",
        "test": "craco test",
        "eject": "craco eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }
    
    

    修改App.css,修改为App.less,编辑内容

    @import '~antd/dist/antd.less';
    

    修改App.js,将css引入部分修改

    // import './App.css';
    import './App.less'
    ...
    

    (2) 布局页面

    编辑src/views/Main/index.jsx,添加基础网页布局

    import { Layout, Menu } from 'antd';
    import React, { Component } from 'react';
    import './Main.less'
    import RouterView from '../../router/RouterView';
    
    const { Header, Footer, Sider, Content } = Layout;
    
    function getItem(label, key, icon, children, type) {
      return {
        key,
        icon,
        children,
        label,
        type,
      };
    }
    
    const items = [
      getItem('首页', '/main/home'),
      getItem('系统管理', 'sub1', '', [
        getItem('菜单管理', '/main/menus'),
        getItem('角色管理', '/main/roles'),
        getItem('商品管理', '/main/users'),
      ]),
      getItem('业务管理', 'sub2', '', [
        getItem('商品管理', '/main/goods'),
        getItem('品牌管理', '/main/brand'),
        getItem('关于我们', '/main/about'),
      ])
    ];
    
    export default class Main extends Component {
    
      changeMenu({ item, key, keyPath, domEvent }) {
        console.log(item, key, keyPath, domEvent, "用户点击了菜单")
        // 编程式导航实现页面跳转
        this.props.history.push(key)
      }
    
      componentDidMount() {
        console.log(this.props.location)
      }
    
      render() {
        return (
          <Layout>
            <Sider>
              <h2 className="logo">LOGO</h2>
              <Menu
                defaultSelectedKeys={this.props.location.pathname}
                defaultOpenKeys={['sub1']}
                mode="inline"
                theme="dark"
                items={items}
                onClick={this.changeMenu.bind(this)}
              />
            </Sider>
            <Layout>
              <Header>
                {this.props.location.pathname}
              </Header>
              <Content>
                <RouterView routes={this.props.children}></RouterView>
              </Content>
              <Footer>Footer</Footer>
            </Layout>
          </Layout>
        )
      }
    }
    
    

    4、页面数据

    (1)封装请求模块

    编辑:src/plugins/http.js

    /** axios封装 */
    import { Component } from 'react'
    import axios from 'axios'
    
    const instance = axios.create({
      baseURL: 'http://localhost:3000'
    })
    
    instance.interceptors.request.use(requset => {
      return requset
    })
    
    instance.interceptors.response.use(response => {
      return response.data
    })
    
    Component.prototype.$http = instance
    
    export default instance
    

    入口模块index.js,引入当代码生效

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    import './plugins/http'			// 引入模块
    
    ReactDOM.render(
      <App/>,
      document.querySelector("#root")
    )
    
    

    (2) 请求数据

    编辑品牌管理页面:src/views/Brand.jsx

    import React, { Component } from 'react'
    
    import { Table, Space, Button,Card } from 'antd';
    
    export default class Brand extends Component {
    
      state = {
        brandList: []
      }
    
      columns = [
        {
          title: "序号",
          dataIndex: "id",
          key: "id"
        },
        {
          title: "名称",
          dataIndex: "bname",
          key: "bname"
        },
        {
          title: "单价",
          dataIndex: "bprice",
          key: "bprice"
        },
        {
          title: "操作",
          render: () => (
            <Space>
              <Button type="primary">编辑</Button>
              <Button type="danger">删除</Button>
            </Space>
          )
        }
      ]
    
      componentDidMount() {
        this.getBrand()
      }
    
      getBrand() {
        this.$http.get('/brand/list').then(response => {
          if(response.code === 200) {
            console.log('response',response)
            this.setState({
              brandList: response.data
            })
          }
        })
      }
    
      render() {
        return (
          <>
            <h2>品牌管理</h2>
            <Table dataSource={this.state.brandList} 
                  rowKey="id"
                  columns={this.columns}/>
          </>
        )
      }
    }
    
    
    更多相关内容
  • 21.react-app:react项目案例
  • 文章目录1.入口js组件部分2.用户头像组件3.logo组件4.底部导航组件5.页面找不到组件6....参考 ...seid=3866280229006180398 ...import React from 'react' import ReactDOM from 'react-dom' import {HashRouter, Switch,


    参考
    https://www.bilibili.com/video/BV17b411V7WG?from=search&seid=3866280229006180398
    主要的代码

    1.入口js

    /*
    入口JS
     */
    import React from 'react'
    import ReactDOM from 'react-dom'
    import {HashRouter, Switch, Route} from 'react-router-dom'
    import {Provider} from 'react-redux'
    
    import store from './redux/store'
    import Rigister from './containers/register/register'
    import Login from './containers/login/login'
    import Main from './containers/main/main'
    
    import './assets/css/index.less'
    
    // import './test/socketio_test'
    
    ReactDOM.render((
      <Provider store={store}>
        <HashRouter>
          <Switch>
            <Route path="/register" component={Rigister}/>
            <Route path="/login" component={Login}/>
            <Route component={Main}></Route> 默认路由
          </Switch>
        </HashRouter>
      </Provider>
    ), document.getElementById('root'))
    

    组件部分

    2.用户头像组件

    在这里插入图片描述

    /*
    选择用户头像的UI组件
     */
    
    import React, {Component} from 'react'
    import {List, Grid} from 'antd-mobile'
    import PropTypes from 'prop-types'
    
    export default class HeaderSelector extends Component {
    
      static propTypes = {
        setHeader: PropTypes.func.isRequired
      }
    
      state = {
        icon: null //图片对象, 默认没有值
      }
    
      constructor(props) {
        super(props)
        // 准备需要显示的列表数据
        this.headerList = []
        for (let i = 0; i < 20; i++) {
          this.headerList.push({
            text: '头像'+(i+1),
            icon: require(`../../assets/images/头像${i+1}.png`) // 不能使用import
          })
        }
      }
    
      handleClick = ({text, icon}) => {
        // 更新当前组件状态
        this.setState({icon})
        // 调用函数更新父组件状态
        this.props.setHeader(text)
      }
    
      render () {
        // 头部界面
        const {icon} = this.state
        const listHeader = !icon ? '请选择头像' : (
          <div>
            已选择头像:<img src={icon}/>
          </div>
        )
    
        return (
          <List renderHeader={() => listHeader}>
            <Grid data={this.headerList}
                  columnNum={5}
                  onClick={this.handleClick}/>
          </List>
        )
      }
    }
    

    3.logo组件

    import React from 'react'
    
    import logo from './logo.png'
    import './logo.less'
    
    
    export default function Logo() {
      return (
        <div className="logo-container">
          <img src={logo} alt="logo" className='logo-img'/>
        </div>
      )
    }
    
    .logo-container {
      text-align: center;
      .logo-img {
        width: 240px;
        height: 240px;
      }
    }
    

    4.底部导航组件

    在这里插入图片描述

    import React, {Component} from 'react'
    import {TabBar} from 'antd-mobile'
    import PropTypes from 'prop-types'
    import {withRouter} from 'react-router-dom'
    
    const Item = TabBar.Item
    
    // 希望在非路由组件中使用路由库的api?
    // withRoute()
    class NavFooter extends Component {
    
      static propTypes = {
        navList: PropTypes.array.isRequired,
        unReadCount: PropTypes.number.isRequired
      }
    
      render () {
        let {navList, unReadCount} = this.props
        // 过滤掉hide为true的nav
        navList = navList.filter(nav => !nav.hide)
        const path = this.props.location.pathname // 请求的path
        return (
          <TabBar>
            {
              navList.map((nav) => (
                <Item key={nav.path}
                      badge={nav.path==='/message' ? unReadCount : 0}
                      title={nav.text}
                      icon={{uri: require(`./images/${nav.icon}.png`)}}
                      selectedIcon={{uri: require(`./images/${nav.icon}-selected.png`)}}
                      selected={path===nav.path}
                      onPress={() => this.props.history.replace(nav.path)}/>
              ))
            }
    
          </TabBar>
        )
      }
    }
    
    // 向外暴露withRouter()包装产生的组件
    // 内部会向组件中传入一些路由组件特有的属性: history/location/math
    export default withRouter(NavFooter)
    

    5.页面找不到组件

    在这里插入图片描述

    /*
    提示找不到页面的UI路由组件
     */
    
    import React from "react"
    import {Button} from "antd-mobile"
    
    class NotFound extends React.Component {
      render() {
        return (
          <div>
            <div>
              <h2>抱歉,找不到该页面!</h2>
              <Button
                type="primary"
                onClick={() => this.props.history.replace("/")}
              >
                回到首页
              </Button>
            </div>
          </div>
        )
      }
    }
    
    export default NotFound
    

    6.用户列表组件

    /*
    显示指定用户列表的UI组件
     */
    import React, {Component} from 'react'
    import PropTypes from 'prop-types'
    import {WingBlank, WhiteSpace, Card} from 'antd-mobile'
    import {withRouter} from 'react-router-dom'
    import QueueAnim from 'rc-queue-anim'
    const Header = Card.Header
    const Body = Card.Body
    
    class UserList extends Component {
      static propTypes = {
        userList: PropTypes.array.isRequired
      }
      render () {
        const {userList} = this.props
    
        return (
          <WingBlank style={{marginBottom:50, marginTop:50}}>
            <QueueAnim type='scale'>
              {
                userList.map(user => (
                  <div key={user._id}>
                    <WhiteSpace/>
                    <Card onClick={() => this.props.history.push(`/chat/${user._id}`)}>
                      <Header
                        thumb={require(`../../assets/images/${user.header}.png`)}
                        extra={user.username}
                      />
                      <Body>
                      <div>职位: {user.post}</div>
                      {user.company ? <div>公司: {user.company}</div> : null}
                      {user.salary ? <div>月薪: {user.salary}</div> : null}
                      <div>描述: {user.info}</div>
                      </Body>
                    </Card>
                  </div>
                ))
              }
            </QueueAnim>
          </WingBlank>
        )
      }
    }
    
    export default withRouter(UserList)
    
    展开全文
  • 没有实战的理论都是null,下面提供一个React开发案例项目项目地址为: https://git.io/JUPwN 主要是按照我们学校的一个管理系统进行开发的(当然,全是自己想做),项目中使用了react, react-redux, antd, mockjs,...

    没有实战的理论都是null,下面提供一个React开发案例项目:
    项目地址为: https://github.com/junhaideng/react-chuntsung

    主要是按照我们学校的一个管理系统进行开发的(当然,全是自己想做),项目中使用了react, react-redux, antd, mockjs,可以供新手参考,虽然很多代码并不是很优雅,但是功能还是实现的差不多,如果你喜欢,欢迎⭐️

    项目演示如下:

    在这里插入图片描述

    展开全文
  • react入门,基础案例

    2022-04-05 14:31:27
    react起源于Facebook的内部项目,在2013年开源,它是一个用于构建用户界面的JavaScript库 ...下面是react项目的目录结构 接下来做一个小案例,看看react是怎样渲染文本的 页面效果图 ...

    react起源于Facebook的内部项目,在2013年开源,它是一个用于构建用户界面的JavaScript库

    特点:1:组件思维 2:单向数据流 3:虚拟dom节点

    首先安装react脚手架:npm i  -g create-react-app

    创建react:create-react-app 项目名称

    运行项目:切换到项目目录,然后 npm run start 

    下面是react项目的目录结构

    接下来做一个小案例,看看react是怎样渲染文本的

    页面效果图

     看不懂?没关系,看下下面的笔记就懂了

    那么如何给文本添加样式呢?案例如下

     页面效果

    下面是如何添加事件,值得注意的是,react添加事件大致和原生js一致,但是需要驼峰命名,一起看下图

     

    效果图

     

    再来看下笔记

     

    还有react组件和它的类型

     

    页面效果

     

    以上就是react的基础,感谢观看

    展开全文
  • 案例--react电影小项目

    2021-11-20 09:24:11
    使用react框架来完成本次项目的实现,使用技术有如下一些: nodejs 进行模拟接口数据(代理) react react-dom react-router-dom redux react-redux redux-thunk immutable redux-immutable styled-components...
  • webpack配合react

    2016-12-21 11:41:20
    1、webpack构建自动化 2、将react项目打包、压缩
  • React脚手架项目示例

    2022-03-06 22:41:36
    React脚手架项目示例1 create-react-app的使用1.1 使用cmd创建1.2 使用WebStorm创建2 安装依赖:react-bootstrap模块3 【案例】在前端显示后台的数据表(在React中使用bootstrap库)3.1 效果展示3.2 编写后端代码3.3...
  • vite+react 项目demo练习

    2022-07-22 17:33:39
    安装vite npm install vite vite 初始化react项目 npm init vite@latest vite-react-app -- --template react 安装路由 npm i react-router-dom -S
  • react-github案例

    2021-06-10 18:48:20
    github案例react脚手架配置代理_方法一 需要理解的概念有: axios模块的安装与使用 什么是跨域 跨域的解决方案有哪些 proxy的限制有什么 ...测试代理服务器项目:http://qn.chinavanes.com/test_proxy_server.zip...
  • 一个使用react项目,代码是全的,有整个react的开发流程
  • react单页面项目实例

    2018-05-08 21:06:35
    react单页面项目实例,有简单的路由配置和webpack配置
  • react案例-豆瓣网

    2018-01-16 01:49:44
    react 前端3大框架之一,jsx语法,组件开发,单项流等。都有涉及。。。。,新手练习。
  • {"code":0,"data":{"_id":"6050995bfed9952358b0e5d8", "username":"dashen4", "type":"dashen", "info":"精通 前端", "post":"前端工程师", "header":"头像1"}}
  • React学习案例十一

    热门讨论 2022-01-30 12:52:31
    React学习案例十一 文章目录React学习案例十一一、代码实现二、总结 一、代码实现 <!-- class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } --&...
  • 【练习案例React一】创建React项目

    多人点赞 2021-12-12 15:58:37
    前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再...create-react-app+项目名 cd ...
  • react经典案例

    千次阅读 2020-05-17 13:42:18
    1.基于create-react-app@2X的react动态权限后台管理系统模板
  • 1、打开cmd 2、进入项目所在文件 3、输入 4、输入下方命令检查是否成功 5、创建项目
  • react基础06--react综合案例-电商网站导航1 介绍2 案例设计模块2.1 分类导航数据模型设计2.2 一级分类导航切换高亮效果2.3 显示二级分类导航2.4 路由跳转到二级导航的商品列表2.5 商品搜索3 注意事项4 说明 ...
  • react 案例(无限接近真实开发)

    千次阅读 2021-11-15 20:41:09
    index.js 整体说明: 技术栈:react,react-redux, redux-thunk 1. 新建一个文件夹 (桌面) ...// 解释: npx create-react-app 是固定命令 hmtt-app 表示项目名称,可以修改 4. cd hmtt-app中 ...
  • React实战项目-很适合进阶

    万次阅读 多人点赞 2018-11-08 09:54:46
    前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习Vue的时候,就看过bailicangdu大神的vue2-elm项目,所以自己打算用react重写...
  • 16-React开始 react介绍 react是由facebook前端开发团队开发和维护的js框架...react基于组件化的方式进行项目开发 react中使用了虚拟DOM技术 react中只实现了单项数据流(react没有实现双向绑定) react安装 Reac
  • 前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 ...
  • 上篇文章讲解了redux的基本使用方法,这篇文章通过小案例教大家如何在实际的react项目中实现redux,加深对redux的理解和掌握,基础内容不清楚的可以看看上篇文章——》 Redux的基础用法详解(纯函数的概念) 项目...
  • React脚手架案例

    2021-06-09 19:49:50
    React脚手架 一 初始化 react 脚手架 需要理解的概念有: 脚手架的作用是什么 脚手架的支持技术是什么?webpack(入口、出口、加载器、模式、插件) ...react提供了一个用于创建react项目的脚手架库: create-rea
  • 前端React项目部署

    2021-09-10 14:47:25
    前端react项目部署文档 1.下载phpstudy 小皮面板(phpstudy) - 让天下没有难配的服务器环境! 2.找到配置文件 设置-文件位置-nginx-conf 3.修改nginx.conf 项目npm run build 项目目录下可看到build文件夹 ...
  • React - 使用脚手架搭建一个 React 项目

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,934
精华内容 5,173
关键字:

react项目案例