(4º lugar)
- 🚧 Correção do sistema de fetch de outros "quizes" 🚧
- 🚧 Correção da Logo 🚧
- 🎵 Música temática ao abrir a página -- 🚧
-
❗ Modal verificando idade do usuário ao entrar na página -- 🚧🚀 - 👏 Sistema de "Recompensa" (Título) -- 🚧:
- 🚧 1-3 acertos: Novice Acolyte
- 🚧 4-6 acertos: Acolyte
- 🚧 7-9 acertos: Summonner
- 🚧 10 acertos: Grand Master of the Cult
- Reactjs 👌
- ESLint 👌
- ESLint uses Espree for JavaScript parsing.
- ESLint uses an AST to evaluate patterns in code.
- ESLint is completely pluggable, every single rule is a plugin and you can add more at runtime.
- StyledComponents 👌
- Proptypes 👌
- Nextjs 👌
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature" - Envie as suas alterações:
git push origin my-featureCaso tenha alguma dúvida confira este guia de como contribuir no GitHub
🔥 Componentes do Projeto: 🚀
Sobre o ESLint
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:Sobre o Styled Components ( texto em inglês )
This example features how you use a different styling solution than styled-jsx that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [styled-components] (https://github.com/styled-components/styled-components).
For this purpose we are extending the <Document /> and injecting the server side rendered styles into the <head>, and also adding the babel-plugin-styled- components (which is required for server side rendering). Additionally we set up a global theme for styled-components using NextJS custom <App> component.
Sobre o Proptypes ( texto em inglês )
# Runtime type checking for React props and similar objects. You can use prop-types to document the intended types of properties passed to components. React (and potentially other libraries—see the checkPropTypes() reference below) will check props passed to your components against those definitions, and warn in development if they don’t match.
Installation
npm install --save prop-types
Sobre o Next? ( texto em inglês )
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
npx create-next-app --example with-styled-components with-styled-components-app
# or
yarn create next-app --example with-styled-components with-styled-components-appDeploy it to the cloud with Vercel (Documentation).
Open this example on CodeSandbox
When wrapping a Link from next/link within a styled-component, the as prop provided by styled will collide with the Link's as prop and cause styled-components to throw an Invalid tag error. To avoid this, you can either use the recommended forwardedAs prop from styled-components or use a different named prop to pass to a styled Link.
Click to expand workaround example
components/StyledLink.js
import Link from "next/link";
import styled from "styled-components";
const StyledLink = ({ as, children, className, href }) => (
<Link href={href} as={as} passHref>
<a className={className}>{children}</a>
</Link>
);
export default styled(StyledLink)`
color: #0075e0;
text-decoration: none;
transition: all 0.2s ease-in-out;
&:hover {
color: #40a9ff;
}
&:focus {
color: #40a9ff;
outline: none;
border: 0;
}
`;pages/index.js
import StyledLink from "../components/StyledLink";
export default () => (
<StyledLink href="/post/[pid]" forwardedAs="/post/abc">
First post
</StyledLink>
);Deploy the example using Vercel:
Thiago Machado 🚀
Este projeto esta sobe a licença MIT.