![](https://img-blog.csdnimg.cn/20200227122528753.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
React学习笔记
W1nt3rs
SAP technology.
展开
-
React学习笔记13-个人博客站点
通过HUGO快速创建一个个人React博客站点用几分钟时间把React笔记建成了博客站点,Powered by HUGO。React学习https://peaceful-tor-92061.herokuapp.com/Node.js学习https://whispering-coast-84700.herokuapp.com/参考阅读https://gohugo.io/ht...原创 2020-02-27 10:06:49 · 261 阅读 · 0 评论 -
React学习笔记12-快速构建一个动态全球独角兽列表网站(7)
#后台管理开发后台管理开发也很简单,和前台的开发思路其实差不多,就是增加了几个页面。新建数据、编辑数据、删除数据。数据展示在列表中生成了两个链接,分别是编辑和删除。return ( <div id="content-wrapper" class="mui--text-center"> <div class="mu...原创 2020-02-26 20:33:05 · 241 阅读 · 0 评论 -
React学习笔记11-快速构建一个动态全球独角兽列表网站(6)
后台管理设计接下来通过React来做一个简单的后台管理应用。主要功能完成后大致是这样子:主界面显示完整信息。有创建、修改、删除功能。有翻页功能。技术架构前端用的是Bootstrap。这个后端程序,UI换一个简单的MUICSS,极简风格。翻页就不自己写了,直接用了开源组件, ReactPaginate。参考阅读https://www.muicss.co...原创 2020-02-26 20:32:20 · 277 阅读 · 0 评论 -
React学习笔记10-快速构建一个动态全球独角兽列表网站(5)
测试运行后端和前端一起测试运行看一下效果。主页独角兽列表翻页基本OK。接下来可以再通过React来快速开发一个后台管理应用。项目代码后端https://github.com/rangwei/unicorns-sails前端https://github.com/rangwei/unicorns-react-bootstrap...原创 2020-02-26 15:55:47 · 196 阅读 · 0 评论 -
React学习笔记9-快速构建一个动态全球独角兽列表网站(4)
动态数据展示Router主程序代码,通过react-router-dom来实现页面的RouterApp.js:import React from 'react';import Navbar from './Navbar';import Unicorns from './Unicorns';import Main from './Main';import './master.css...原创 2020-02-26 15:52:53 · 188 阅读 · 0 评论 -
React学习笔记8-快速构建一个动态全球独角兽列表网站(3)
页面开发页面开发很简单。分为两个部分。通过React的Function Component来实现列表和翻页条。列表显示List.js:import React, { useState } from 'react';export default function List({unicorns}) { return ( <table class="tabl...原创 2020-02-26 15:52:16 · 217 阅读 · 0 评论 -
React学习笔记7-快速构建一个动态全球独角兽列表网站(2)
后端API开发通过Sails.js可以快速构建一个后端的服务。建模通过下面这条命令来新建一个model:sails generate api Unicorns建模,修改Unicorns.js:module.exports = { attributes: { name: { type: 'string', required: true }, country: {...原创 2020-02-26 15:51:37 · 205 阅读 · 0 评论 -
React学习笔记6-快速构建一个动态全球独角兽列表网站(1)
设计和架构下面来通过React实战构建一个关于全球独角兽列表的网站。主要就是作为一个小练习实践一下从前端到后端的web开发技术。界面设计最快的方式当然直接用Bootstrap搞定,大概如下:网页布局主要包含三个部分:导航栏, 主要内容,翻页条。React的翻页功能有很多库已经可以直接用,但是出于学习的目的,这里还是手工写一个,逻辑也不复杂。后台数据格式数据结构比较简单,从网上抓取...原创 2020-02-26 15:50:47 · 259 阅读 · 0 评论 -
React学习笔记5-快速创建一个TODO App
TODO App三人行,必有我师焉。择其善者而从之,其不善者而改之。 ——孔子现在通过前面学到的React基础知识快速构建一个简单的TODO APP。主要包含三个部分: 输入部分,未完成的事项,已经完成事项。输入部分function Input({ addName }) { const [name, setName] = useState("hello"); re...原创 2020-02-26 08:48:54 · 272 阅读 · 0 评论 -
React学习笔记4-Effect Hook
Effect Hooks由俭入奢易,由奢入俭难。——司马光之前通过class来编写Component,一些辅助的方法是通过componentDidMount, componentDidUpdate来实现。通过React的effect hook可以实现类似的功能。比如现在在组件显示之前需要通过网络加载一下数据,还是通过之前用的users api来demo:import React, { ...原创 2020-02-25 21:20:00 · 249 阅读 · 0 评论 -
React学习笔记3-State Hook
State Hook吾生也有涯,而知也无涯。——庄子接着学习一下React的State Hook。通过State hook,可以直接通过function来构建有状态的组件,只要引入useState方法即可。写了一个小例子,包含一个输入和列表,分别通过两个function实现。输入的数据通过一个列表展示:import React, { useState } from 'react';...原创 2020-02-25 21:12:39 · 234 阅读 · 0 评论 -
React学习笔记2-Function Component
Function Component学无止境。——荀子接着学习一下React的function component。之前React主要通过class的方式来构建UI组件,但是可能在很多项目中存在一些弊端。Facebook设计了React Hook的方式,可以不通过class的方式来完成同样的功能。也就是只需要通过function component即可,这样带来的好处是代码更简单,bug...原创 2020-02-25 21:10:34 · 3170 阅读 · 0 评论 -
React学习笔记1-基础
Hello React, Hello JavaScript!千里之行,始于足下。——老子最近体验了一下著名的前端框架React,用起来特别爽,个人很喜欢。所以准备花一点点时间深入学习一下React。在这里把学习得过程也顺便记录下来。要学习React的话,先了解一下JavaScript的基础知识是非常有帮助的。JavaScript也是是目前非常火的编程语言,在有了Node.js以后,JS终...原创 2020-02-25 20:48:45 · 249 阅读 · 0 评论