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>
);
}