2、谷粒后台整体结构即侧边导航栏
基本架构 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960/** * 管理的路由组件 */import React, { Component } from 'react'import { Redirect, Route, Switch } from 'react-router-dom'import { Layout } from 'antd'import memoryUtils from '../../utils/memoryUtils'import LeftNav from '../../components/left-nav/left-nav'import Header from '../../components/header/header ...
1、谷粒后台开发准备及登录页面
开发准备 代码仓库：https://github.com/changeclass/react-admin/commits/ 技术选型 前端路由 创建项目 基于脚手架创建项目 1create-react-app react-admin_client 编辑基本结构 入口文件 123456789101112/** * 入口文件 */import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( <App />, document.getElementById('root')); 根组件 1234567891011/** * 应用根组件 */import React, { Component } from "react";export default class App extends Component ...
0、AntD3与AntD4不同之处
说明 此文是为了记录观看视频谷粒后台中AntD3与当前AntD4部分写法的差异。 Form表单 官方迁移说明：https://ant.design/components/form/v3-cn/ 在AntD4中表单的submit事件被替换成了onFinish。 获取表单实例 通过为Form组件绑定属性ref即可。每个Form.Item组件中的name属性代表当前表单的字段。 12345678910111213141516171819202122232425262728293031323334<Form name='normal_login' className='login-form' // 为表单添加引用 ref={this.formRef} // 为表单添加校检完成的事件 onFinish={this.handleSubmit} > <Form.Item name='username' ...
7、React的Redux
Redux理解 英文文档: https://redux.js.org/ 中文文档: http://www.redux.org.cn/ Github: https://github.com/reactjs/redux redux 是一个独立专门用于做状态管理的JS 库(不是react 插件库) 它可以用在react, angular, vue 等项目中, 但基本与react 配合使用 作用: 集中式管理react 应用中多个组件共享的状态 需要Redux时的情景 某个组件的状态，需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 Redux基本使用 安装 1yarn add redux 为了更方便的管理store，因此新建一个文件夹store用于专门存放关于store相关操作的代码 store.js 用于写创建stroe对象相关的代码 12345import { createStore } from 'redux'import { counter ...
6、React路由及UI
SPA与路由 单页Web 应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求 当点击路由链接时, 只会做页面的局部更新 数据都需要通过ajax 请求获取, 并在前端异步展现 路由 一个路由就是一个映射关系(key:value)，key 为路由路径, value 可能是function/component。 前端路由 后端路由 react-router基本使用 相关文档：http://react-guide.github.io/react-router-cn/index.html 英文原版：https://reactrouter.com/web/guides/quick-start 安装 1yarn add react-router-dom 使用BrowserRouter组件包裹所有组件 12345678910import React from 'react';import ReactDOM from 'rea ...
5、React组件间通信
通过props 传递 共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 通过props 可以传递一般数据和函数数据, 只能一层一层传递 一般数据–>父组件传递数据给子组件–>子组件读取数据 函数数据–>子组件传递数据给父组件–>子组件调用函数 使用消息订阅(subscribe)-发布(publish)机制 使用工具库PubSubJS工具库实现。 1yarn add pubsub-js 使用 123import PubSub from 'pubsub-js' //引入PubSub.subscribe('delete', function(msg,data){ }); //订阅PubSub.publish('delete', data) //发布消息 发布消息可以理解为触发事件，订阅消息可以理解为监听事件。 通过redux传递 待补充
4、React发送Ajax请求
Axios示例 1234567891011121314151617181920212223class MostStart extends React.Component { state = { repoName: '', repoUrl: '' }async componentDidMount() { // 发送Ajax请求 const url = `https://api.github.com/search/repositories?q=r&sort=stars` const { data: res } = await axios.get(url) const { html_url, name } = res.items[0] this.state.repoUrl = html_url this.state.repoName = name this.setState( ...
3、React脚手架
脚手架 1234npm install -g create-react-appcreate-react-app hello-reactcd hello-reactnpm start 基于脚手架编写项目 入口文件./src/index.js 123456import React from 'react';import ReactDOM from 'react-dom';import './index.css'import App from './components/app'ReactDOM.render(<App />, document.getElementById('root')); 组件App 1234567891011import React,{Component} from 'react'import Logo from '../logo.svg'export default class Ap ...
2、React模块与组件
模块与组件的理解 模块 向外提供特定功能的js 程序, 一般就是一个js 文件 复用js, 简化js 的编写, 提高js 运行效率 组件 用来实现特定(局部)功能效果的代码集合(html/css/js) 复用编码, 简化项目编码, 提高运行效率 组件的基本使用 创建组件有两种方式 工厂函数组件 简单组件，通过函数返回值即可。函数名就是组件(标签)名。 1234function MyComponent() { return <h2>工厂函数组件（简单组件）</h2>}ReactDOM.render(<MyComponent />, document.getElementById('test')) ES6类组件 复杂组件，通过ES6类中的render方法。 123456class MyComponent2 extends React.Component { render() { return <h2>ES6类组件（复杂组件）< ...
