[前端] 每日时报 - 2019.06.21

[前端 每日时报 - 2019.06.21

[文章] 深入理解 CSS Grid，写的很详细，文章质量非常的高：https://css-tricks.com/snippets/css/complete-guide-grid/

[文章] Storybook 中文学习教程：https://www.learnstorybook.com/react/zh-CN/get-started

[类库] Axios 支持 React Hooks 调用方式：https://github.com/use-hooks/react-hooks-axios

[类库] Prism 是语法高亮的库：https://github.com/PrismJS/prism

[工具] 可以把 React 组件转换成 Sketch 的层，它是由 Airbnb 公司推出的工具，1.3W Start 了我才了解到：https://github.com/airbnb/react-sketchapp

配图 - 深入理解 CSS Grid

配图 - Storybook 中文学习教程

配图 - Prism

配图 - 可以把 React 组件转换成 Sketch 的层

配图 - Axios 支持 React Hooks 调用方式

import React, { useState } from 'react'; import useAxios from '@use-hooks/axios'; export default function App() { const [gender, setGender] = useState(''); const { response, loading, error, reFetch } = useAxios({ url: `https://randomuser.me/api/${gender === 'unknown' ? 'unknown' : ''}`, method: 'GET', options: { params: { gender }, }, trigger: gender, // or // trigger: { gender } forceDispatchEffect: () => !!gender, // AUTO RUN only if gender is set }); const { data } = response || {}; const optiOns= [ { gender: 'female', title: 'Female' }, { gender: 'male', title: 'Male' }, { gender: 'unknown', title: 'Unknown' }, ]; if (loading) return 'loading...'; return ( <div> <h2> DEMO of <span style={{ color: '#F44336' }}>@use-hooks/axios</span> </h2> {options.map(item => ( <div key={item.gender}> <input type="radio" id={item.gender} value={item.gender} checked={gender === item.gender} OnChange={e => setGender(e.target.value)} /> {item.title} </div> ))} <button type="button" OnClick={reFetch}> Refresh </button> <div> {error ? ( error.message || 'error' ) : ( <textarea cols="100" rows="30" defaultValue={JSON.stringify(data || {}, '', 2)} /> )} </div> </div> ); } 

今日图 - 开会

GitHub： https://github.com/wubaiqing/zaobao

查看更多： https://wubaiqing.github.io/zaobao/2019/06/21.html