精华内容
下载资源
问答
  • react项目实战
    万次阅读 多人点赞
    2020-04-27 19:17:34

    项目实战前的准备工作

    React基础
    React组件
    React-Router——Reac路由的学习
    React高阶组件及CRA的定制
    React中使用Antd组件

    React项目实战(一)

    React项目实战(二)

    搭建项目的基本页面及外层路由

    1-1配置基本页面

    在项目根目录src文件下创建views文件夹
    在这里插入图片描述
    然后在views文件夹里创建所需要页面,
    在相应文件夹下创建index.js文件,这样引入所需页面的时候直接写./login即可,不需要再写./login/index.js

    • article(index.js / Edit.js) 文章列表 文章编辑
    • dashboard(index.js) 仪表盘
    • login(index.js) 登录
    • settings(index.js) 设置
    • notfound(index.js) 404

    在这里插入图片描述

    • 最后再创建views/index.js,并在文件里导出页面
    import Article from "./article"      //文章列表
    import ArticleEdit from "./article/Edit"//文章编辑
    import Dashboard from "./dashboard"//仪表盘
    import Login from "./login"//登录
    import Notfound from "./notfound"//404
    import Settings from "./settings"//设置
    
    export {
        Article,
        ArticleEdit,
        Dashboard,
        Login,
        Notfound,
        Settings
    }
    

    1-2配置路由

    • 安装路由:yarn add react-router-dom或者npm i react-router-dom
    • src文件下新建routes文件夹,在其下新建index.js文件并配置路由
      在这里插入图片描述
      routes/index.js
    import  {
        Article,
        ArticleEdit,
        Dashboard,
        Login,
        Notfound,
        Settings
    } from "../views"   //引入页面
    
    
    // /login 页面    /404  页面  
    export const mainRoute = [
        {
            pathname:"/login",
            component:Login
        },
        {
            pathname:"/404",
            component:Notfound
        }
    ]
    
    
    // /admin/XXX   dashboard article articleEdit settings  管理页面
    export const admainRoute = [
        {
            pathname:"/admin/dashboard",
            component:Dashboard
        },
        {
            pathname:"/admin/article",
            component:Article,
            exact:true  //配置App内置路由需要exact属性,详情见下文
        },
        {
            pathname:"/admin/article/edit/:id",
            component:ArticleEdit
        },
        {
            pathname:"/admin/settings",
            component:Settings
        },
    ]
    

    1-3需要最外层去渲染路由视图

    • src/index.js文件里渲染路由视图
      在这里插入图片描述
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import {HashRouter as Router,Route,Redirect,Switch} from "react-router-dom"
    import {mainRoute} from "./routes"
    ReactDOM.render(
      <Router>
        <Switch>
          <Route path="/admin" component={App}/> //admin主页面的路由  进入到App组件
          {
            mainRoute.map(route=>{
              return <Route path={route.pathname} component={route.component}/>
            })
          }  //遍历login 404 的路由
          <Redirect to="/admin" from="/" exact/>  //重定向  首页为admin
          <Redirect to="/404" />		//如果路径与之前都不匹配,则返回404页面
        </Switch>
      </Router>
      ,
      document.getElementById('root')
    );
    

    1-4需要配置内层App路由

    • src/App.js文件里渲染路由视图
      在这里插入图片描述
    import React, { Component } from 'react'
    import {admainRoute} from "./routes"
    import {Route,Redirect,Switch} from "react-router-dom"
    export default class App extends Component {
      render() {
        return (
          <Switch>
            {
              admainRoute.map(route=>{
                return <Route path={route.pathname} component={route.component} exact={route.exact}/>
              })
            }   //admin页面里的路由    dashboard article articleEdit settings
            <Redirect to={admainRoute[0].pathname} from="/admin" exact/>  //重定向到 admin页面
            <Redirect to="/404" />
          </Switch> 
        )
      }
    }
    
    • 后续发现了问题 /admin/article显示Article中的内容 但是/admin/article/edit/2的时候不显示ArticleEdit中的内容
      解决方法,直接在routes/index.js里面添加一个标志exact然后遍历路由的时候判断是否要添加exact属性
        {
            pathname:"/admin/article",
            component:Article,
            exact:true
        },
    
        {
                  admainRoute.map(route=>{
                    return <Route    exact={route.exact}/>
                  })
        }
    
    

    1-5 路由的懒加载

    • 下载react-loadable
      通过yarn add react-loadable安装
      在npm官网中搜索查阅使用方法
      在这里插入图片描述

    • 并新建src/component/loading/index.js文件,当懒加载未完成时,会显示该页面的内容
      在这里插入图片描述

    • 更改src/views/index.js文件

    import Loadable from 'react-loadable';
    import Loading from '../components/loading';
    //需要将对外的普通组件需要进行懒加载
    const Article = Loadable({
        loader: () => import('./article'),
        loading: Loading,
    });
    const Dashboard = Loadable({
        loader: () => import('./dashboard'),
        loading: Loading,
    });
    const ArticleEdit = Loadable({
        loader: () => import('./article/Edit'),
        loading: Loading,
    });
    const Login = Loadable({
        loader: () => import('./login'),
        loading: Loading,
    });
    const Notfound = Loadable({
        loader: () => import('./notfound'),
        loading: Loading,
    });
    const Settings = Loadable({
        loader: () => import('./settings'),
        loading: Loading,
    });
    
    
    export  {
        Article,
        ArticleEdit,
        Dashboard,
        Login,
        Notfound,
        Settings
    }
    
    更多相关内容
  • React项目实战

    2021-11-29 18:01:51
    1,项目搭建 1,本地接口部署: 创建并导入数据:数据库名称hkzf(好客租房) 数据文件在hkzfAPI ->...1, 初始化项目:npx create-react-app hkzf-app 2, 项目初始化成功,切换到根目录hkzf-app: yarn star

    1,项目搭建

    • 1,本地接口部署:
      创建并导入数据:数据库名称hkzf(好客租房)

    数据文件在hkzfAPI -> db -> .sql文件

    hkzfAPI上传百度网盘由于文件过多,需要开通超级会员,所以有需要的直接找我就行!

    • 2,启动接口:在hkzfAPI目录中执行npm start,启动swagger接口即可

    2,项目搭建

    • 1, 初始化项目:npx create-react-app hkzf-app

    • 2, 项目初始化成功,切换到根目录hkzf-app: yarn start

    目录结构:

    • 3, 调整项目中src目录结构如下:

    3,项目准备

    • 2,安装:$ npm install --save antd-mobile@next / yarn add antd-mobile@next
    • 3,导入要使用的组件
    import { Button } from 'antd-mobile'
    
    • 4, 使用
    <Button></Button>
    

    4, 配置基础路由

    • 1,安装:yarn add react-router-dom
    • 2,导入路由组件:Router / Route / Link
    • 3, 在pages文件夹里创建Home->index.js和CityList->index.js两个组件
    • 4,使用Route组件配置首页和城市页面
      在App.js中引入
      import { BroswerRouter as Router, Route, Link } from 'react-router-dom'
      
      // 导入两个组件
      import Home from './pages/Home'
      import CityList from './pages/CityList'
      
      <Router>
        <div className="App">
          <ul>
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/CityList">CityList</Link></li>
          </ul>
          <Route path="/home" component={Home}/>
          <Route path="/cityList" component={CityList}/>
        </div>
      </Router>
      

    5, 项目整体布局

    • 1,两种布局页面
      分析:有tabBar的页面和无tabBar的页面


    有tabBar布局的页面使用嵌套路由即可

    • 2,嵌套路由:路由内部包含路由
      • 用Home组件表示父路由的内容
      • 用News组件表示子路由的内容

    • 使用步骤
      • 1,在pages中创建News/index.js
      • 2,在Home组件中,添加一个Route作为子路由(嵌套的路由)的出口
      • 3,设置嵌套路由的path,格式以父路由path开头(父组件展示,子组件才会展示)
      • 4,修改pathname为/home/news,News组件的内容就会展示在Home组件中了。
      <Router>
        <div>
          <Route path="/home" component={Home}/>
        </div>
      </Router>
      
      const Home = () => {
        <div>
          <Route path="/home/news" component={News}/>
        </div>
      }
      

    示例:

    // Home组件
    import React from 'react'
    import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
    import News from '../News'
    export default class Home extends React.Component {
      render() {
        return (
          <div style={{backgroundColor: 'skyblue', padding: 10}}>Home
            <Route path="/home/news" component={News}></Route>
          </div>
        )
      }
    }
    
    // News组件
    import React from 'react';
    export default class News extends React.Component {
      render() {
        return (
          <div style={{backgroundColor: 'green'}}>
              News
          </div>
        )
      }
    }
    

    下篇开始实现tabBar,敬请期待

    展开全文
  • 介绍: 一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求. 核心业务: 在线找房(地图、条件搜索)、用户登录、房源发布等 技术栈: react核心库:reactreact-dom、react-router-dom 脚手架: ...

    目录

    一 项目介绍

    二 项目搭建

    2.1 本地接口部署

    1 创建并导入数据

    2 启动接口

    3 测试接口

     2.2 初始化项目

    1 创建项目

     2 整理项目的目录


    一 项目介绍

    名称: 好客租房
    形式: 移动web端
    介绍: 一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求.
    核心业务: 在线找房(地图、条件搜索)、用户登录、房源发布等

    技术栈: 
        react核心库:react、react-dom、react-router-dom
        脚手架: create-react-app
        数据请求: axios
        UI组件库: antd-mobile
        其他组件库: react-virtualized、formik+yup、react-spring等
        百度地图API
        

    二 项目搭建

    2.1 本地接口部署

    1 创建并导入数据

    打开navicat

    需要navicat的请私信我

    打开连接--新建数据库-- 打开数据库--运行SQL文件--选择sql文件--开始

    sql文件在网盘里:

    链接:https://pan.baidu.com/s/1WtpKB4JIk-X5s7tc7uHTfA 
    提取码:hkzf

     

     

     刷新,表已经有了

    2 启动接口

    在API目录中执行 npm start

    看下mysql.js 里面的密码啥的配置和自己数据库里面的是否一致

     启动接口


    3 测试接口

    接口地址http://localhost:8080

    接口文档的形式:

     

     输入参数--点excute--就会显示接口的返回结果

     2.2 初始化项目

    1 创建项目

    npx create-react-app hkzf-mobile

     2 整理项目的目录

    初始的目录结构

     文件介绍:

    调整src的目录结构

    保留index.js、App.js、index.css 这3个文件,新建4个文件夹:assets、components、pages、utils

     因为删除了一些文件,所以项目会报错,需要调整一下代码,如下:

    index.js

    import React from 'react';
    import {createRoot} from 'react-dom/client';
    import './index.css';
    import App from './App';
    
    createRoot(document.getElementById('root')).render(<App/>);

    App.js

    
    function App() {
      return (
        <div className="App">
          项目根组件
        </div>
      );
    }
    
    export default App;
    

     项目基本结构搭建完毕

     

    展开全文
  • React项目实战(二)

    千次阅读 2020-04-27 19:18:52
    文章目录React项目实战(一)React项目实战(二)利用Antd实现Frame组件(基础页面)2-1 使用Antd的Layout进行布局2-2 可以设计个Logo2-3 实现左侧的菜单展示2-4 实现左侧的小图标2-5 实现点击菜单切换 React项目实战(一) ...

    React项目实战(一)

    React项目实战(二)

    利用Antd实现Frame组件(基础页面)

    2-1 使用Antd的Layout进行布局

    在react项目中进行安装yarn add antd或者npm i antd安装

    components/frame/index.js文件 这里省略其余代码,只显示关键代码

    export default class index extends Component {
        render() {
            return (
                <Layout>
                        <Content style={{ padding: '0 24px', minHeight: 280 }}>{this.props.children}</Content>
                </Layout>
            )
        }
    }
    

    我们将App.js文件中的Switch所渲染的Route路由视图组件放入到Frame标签内部,那么Frame中通过{this.props.children}才可以获取到对应的插入的内容。否则不会显示内容

    <Frame>
              <Switch>
                {
                  admainRoute.map(route=>{
                    return <Route key={route.pathname} path={route.pathname} component={route.component} exact={route.exact}/>
                  })
                }
                <Redirect to={admainRoute[0].pathname} from="/admin" exact/>
                <Redirect to="/404" />
              </Switch> 
     </Frame>
    

    2-2 可以设计个Logo

    可以通过免费logo在线制作 设计出来Logo
    直接将图片放到frame文件夹下面去,并引入使用
    在这里插入图片描述

    components/frame/index.js文件 这里省略其余代码,只显示关键代码

    import Logo from "./logo.png"
    import "./index.less"
    
    <Header className="header qf-header">
        <div className="logo" >
        	<img  src={Logo}/>
        </div>
    </Header>
    

    新建index.less文件并引入

    .qf-header{
        height: 64px;
        background: #fff;
        .logo{
            height:64px;
            img{
                height:64px;
            }
        }
    }
    

    在这里插入图片描述

    2-3 实现左侧的菜单展示

    只需要给routes/index.js文件里面添加isNav标识title

    export const admainRoute = [
        {
            pathname:"/admin/dashboard",
            component:Dashboard,
            title:"仪表盘",
            isNav:true
        },
        {
            pathname:"/admin/article",
            component:Article,
            exact:true,
            title:"文章列表",
            isNav:true
        },
        {
            pathname:"/admin/article/edit/:id",
            component:ArticleEdit,
        },
        {
            pathname:"/admin/settings",
            component:Settings,
            title:"设置",
            isNav:true
        },
    ]
    

    Frame组件里面,对于adminRoute的isNav为true进行过滤即可

    const menu = admainRoute.filter(route=>route.isNav === true)
    

    components/frame/index.js文件 这里省略其余代码,只显示关键代码

    <Menu
    mode="inline"
    defaultSelectedKeys={['1']}
    defaultOpenKeys={['sub1']}
    style={{ height: '100%' }}
    >
    {
        menu.map(route=>{
            return (
                <Menu.Item key={route.pathname}>{route.title}</Menu.Item>
            )
        })
    }
    </Menu>
    
    

    在这里插入图片描述

    2-4 实现左侧的小图标

    需要安装 yarn add @ant-design/icons
    在官网中查阅文档学习使用
    在这里插入图片描述

    routes/index.js文件进行修改

    //使用antd里面的icon图标
    import {
        DashboardOutlined,
        OrderedListOutlined,
        SettingOutlined
    } from '@ant-design/icons';
    import React from "react"  //React必须要进行引入进来,作用就是帮助我们解析内部的jsx代码
    
    
    export const admainRoute = [
        {
            pathname:"/admin/dashboard",
            component:Dashboard,
            title:"仪表盘",
            isNav:true,
            icon:<DashboardOutlined />
        },
        {
            pathname:"/admin/article",
            component:Article,
            exact:true,
            title:"文章列表",
            isNav:true,
            icon:<OrderedListOutlined />
        },
        {
            pathname:"/admin/article/edit/:id",
            component:ArticleEdit,
        },
        {
            pathname:"/admin/settings",
            component:Settings,
            title:"设置",
            isNav:true,
            icon:<SettingOutlined />
        },
    ]
    

    components/frame/index.js文件 这里省略其余代码,只显示关键代码

    <Menu
    mode="inline"
    defaultSelectedKeys={['1']}
    defaultOpenKeys={['sub1']}
    style={{ height: '100%' }}
    >
    {
        menu.map(route=>{
            return (
            <Menu.Item key={route.pathname}>
                {route.icon}
                {route.title}
            </Menu.Item>
            )
        })
    }
    </Menu>
    

    在这里插入图片描述

    2-5 实现点击菜单切换

    在官网中查阅文档学习Menu菜单项的api使用
    在这里插入图片描述

    需要查找Antd里面关于Menu菜单项,发现Menu的api上面有onClick方法
    作用就是当我们点击每一项菜单的时候,这个事件函数就会触发,关键的一个参数是key,就可以拿到对应的切换的当前路由路径
    获取到key之后,我们只需要调用this.props.history.push(key)即可实现路由跳转,继而实现了菜单切换功能。
    //当我们点击Menu.Item的时候会触发
    //路由相关的api history location match

    handleMenu = ({key})=>{   
    	this.props.history.push(key)
    }
    
    
    <Menu
        mode="inline"
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        style={{ height: '100%' }}
        onClick = {this.handleMenu}
    >
    {
    ......
    }
    </Menu>
    

    发现上述代码报错,原因是Frame组件不是路由组件,属性上面就不会有history相关的路由的api,
    解决方案就是需要引入高阶组件withRouter进行嵌套包裹
    可以将目前的Frame组件包裹成伪路由组件,那么Frame组件属性上面自然就会有了history/location/match相关的api了,继而可以实现跳转功能了。

    import {withRouter} from "react-router-dom"
    
    
    @withRouter
    class index extends Component {
    	.......
    }
    export default index
    

    实现了左侧菜单项颜色的切换效果
    在这里插入图片描述

    **运行之后会发现存在一些bug,通过api属性解决
    **
    Menu菜单的api属性上面有:
    defaultSelectedKeys 初始选中的菜单项 key 数组
    selectedKeys 当前选中的菜单项 key 数组

         <Menu
             mode="inline"
             defaultSelectedKeys={[menu[0].pathname]}
             selectedKeys={[this.props.location.pathname]}
             style={{ height: '100%' }}
             onClick = {this.handleMenu}
         >
         	......
         </Menu>
    

    其中,this.props.location.pathname就是可以获取到当前的路由的路径,然后将其传入到selectedKeys的数组里面去,就可以实现F5刷新的时候,对应的样式还是当前选择的路由组件了。
    在这里插入图片描述

    调整了一下样式: (引入了短语法)
    React 中的一个常见模式是一个组件返回多个元素。Fragments允许你将子列表分组,而无需向 DOM 添加额外节点。
    return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> )
    你可以使用一种新的,且更简短的语法来声明 Fragments。它看起来像空标签:
    return ( <> <td>Hello</td> <td>World</td> </> )
    在这里插入图片描述

    新建index.less文件
    在这里插入图片描述

        #root,.ant-layout{
            height:100%;
        }
    

    App.js短语法

    export default class App extends Component {
      render() {
        return (
          <> 
            <Frame>
              <Switch>
                {
                  admainRoute.map(route => {
                    return <Route key={route.pathname} path={route.pathname} component={route.component} exact={route.exact} />
                  })
                }
                <Redirect to={admainRoute[0].pathname} from="/admin" exact />
                <Redirect to="/404" />
              </Switch>
            </Frame>
          </>
        )
      }
    }
    

    在这里插入图片描述

    展开全文
  • 拉钩电商项目说明 1. 技术栈 1.1 客户端 脚本:TypeScript 前端框架:React 路由管理:React-router-dom 用户界面:Antd 全局状态管理:Redux 异步状态更新:redux-saga 路由状态同步:connected-react-router 网络...
  • React项目实战问题总结

    千次阅读 2018-08-01 11:20:29
    毕业刚到公司,老大让我做一个系统,开发周期20天。 遇到了很多问题,首先总结一下在开发之外需要注意的问题,关于开发的问题会在另一篇博客中。 1.拿到原型图,首先需要进行分析,将页面布局和逻辑都搞清楚,...
  • 预备知识 react提供了一个 react-transition-group 库,我们可以通过几种方式实现 定义className结合css样式 //官方案例 function App() { const [inProp, setInProp] = useState(false); return ( {"I'll receive ...
  • 上篇文章讲解了redux的基本使用方法,这篇文章通过小案例教大家如何在实际的react项目中实现redux,加深对redux的理解和掌握,基础内容不清楚的可以看看上篇文章——》 Redux的基础用法详解(纯函数的概念) 项目...
  • 在写项目的过程中还是出现的一些问题,在许多的地方需要完善,不断的改进react项目。) 使用async + await实现数据同步,在使用useState实现数据输) 实现代) 在设置滑动过程主要是用css来写的,这是目前的效果图,我...
  • React项目实战

    2019-10-04 00:02:43
    1.安装react-cli脚手架(保证提前安装好Node最新版本) npm config set registry http://registry.npm.taobao.org/ npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass npm isntall...
  • 引入antd /************react引入antd时遇到问题---------版本不匹配问题*************/ Uncaught Error:invalid hook call . Hooks can only be called inside of the body of a function component .This could ...
  • 在差不多过完React的所有知识后,寻思着开始做一个React项目,浏览了下GitHub,上面大多是用React做后台管理系统的前端页面。PS: 还没做完,不过大致的模板已经出了,需要的同学可以去我GitHub上clone 界面展示 ...
  • react
  • react项目实战五 个人中心页面

    千次阅读 2018-10-22 11:36:45
    import React from 'react' export default function imoocForm(Comp){ return class WrapperComp extends React.Component{ constructor(props){ super(props) this.state = {} this.handleChange = this....
  • react实战

    千次阅读 2022-04-10 14:25:41
    React项目实战 [[TOC]] (一) 创建项目 npm i create-react-app -g 安装脚手架(需要node14以上) create-react-app my-app 创建项目 用vscode打开项目my-app npm start 运行项目 win7安装node14: 若安装有...
  • react项目实战-好客租房

    千次阅读 2021-12-22 14:56:51
    项目介绍:本项目是一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求 核心业务:在线找房(地图,条件搜索),用户登录,房源发布 技术栈 React核心库:reactreact-dom、react-router-dom ...
  • 上个资源记录分享了如何使用React实现一个ToDoList小Demo,通过该Demo,菜鸟们可以学会如何搭建环境,新建项目,添加组件,运行项目,简单的数据处理和交互,如何引入样式文件等内容。本篇,将记录如何使用React实现一...
  • 1 安装路由 npm i react-router-dom@5.2.0 2 在pages下新建两个文件CityList/index.js和Home/index.js, 创建对应的组件 3 导入路由 Router、Route、Link 4 使用Route组件配置 首页 和 城市选择页面
  • 计算器项目React 框架实现计算器的基础功能,包括各组件的建立、Route 路由的实现、 Redux 实现各组件的交互。
  • 现在的前端要学的真多,想学React,还得先学webpack。当去看了 webpack 的文档后,感觉要跪了。即便是跟着官方文档,配置到一半已经很没有耐心了有木有?嗯,别怕,React 官方有快速脚手架可以使用,那就是create-...
  • CV:一个React简历

    2021-04-08 10:55:31
    / “开始”:“React脚本开始”, / 该项目是通过引导的。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑,则页面将重新加载。 您还将在...
  • react入门学习告一段路,其中UI样式就不做练习了。想法是,对于咱测试而言,并不需要追求很好的样式,当然css的一些基本概念还是需要懂得,但对于自定义样式,基本属于没有需求,直接引入成型的UI组件库就可以了,做...
  • react
  • 请下载分卷2后合并 React开发实战 介绍如何成功构建日益复杂的前端应用程序与接口,深入分析React库,并详述React生态系统中的其他工具与库,从而指导你创建完整的复杂应用...◆ 学习如何测试、完善和部署React项目
  • react
  • react
  • 一种是无TabBar的页面 有TabBar的页面使用嵌套路由来实现 嵌套路由:路由内部包含路由 使用步骤 1 在pages文件夹创建News/index.js组件(子路由要展示的内容) import React from "react" export default class News ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,968
精华内容 6,787
关键字:

react项目实战

友情链接: ESP8266 管脚清单.rar