An list of awesome websites with front-end resources.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from 'react' | |
class Input { | |
constructor(initialValue) { | |
this._initialState = { | |
value: initialValue, | |
isEmpty: initialValue.length === 0 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useRef } from 'react' | |
function useAbortController() { | |
const abortControllerRef = useRef({}) | |
if (arguments.length === 0) abortControllerRef.current = new AbortController() | |
else { | |
for (let arg of arguments) { | |
abortControllerRef.current[arg] = new AbortController() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import TextField from '@material-ui/core/TextField' | |
import { Field } from 'formik' | |
const TextFieldComponent = props => { | |
const { name, ...rest } = props | |
return ( | |
<Field name={name}> | |
{({field, meta}) => <TextField | |
error={meta.touched && !!meta.error} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import { Formik, Form } from 'formik' | |
const FormComponent = props => { | |
const { children, className, ...rest } = props | |
return ( | |
<Formik | |
{...rest} | |
> | |
<Form className={className}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useRef, useEffect } from 'react' | |
const useCanvas = (draw) => { | |
const canvasRef = useRef(null) | |
useEffect(() => { | |
const canvas = canvasRef.current | |
const context = canvas.getContext('2d') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import useCanvas from '../hooks/useCanvas' | |
const Canvas = props => { | |
const { draw, ...rest } = props | |
const canvasRef = useCanvas(draw) | |
return ( | |
<canvas ref={canvasRef} {...rest} /> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect } from 'react' | |
// TODO: implement payload state, where data from the fakeEvent will be stored if it has any | |
const useFakeEvent = (handler=()=>{}) => { | |
const [ fakeEventCount, setFakeEventCount ] = useState(0) // It 'fires' the fakeEvent and counts how many times the fakeEvent was fired | |
useEffect(() => { | |
if (fakeEventCount > 0) handler() // Conditional for ignoring component startup | |
}, [fakeEventCount, handler]) |
Seu objetivo é criar um portal de notícias responsivo utilizando o framework Next.js. O site deve consumir uma API pública de notícias e exibir os dados no frontend. Escolha uma API que ofereça uma chave de API gratuita ou utilize uma chave de API de teste.
- Configurar um projeto Next.js (Next.js by Vercel - The React Framework).
- Criar uma página inicial que exiba cards das notícias da API pública.
- Os cards podem conter: