Camila_Cruz_JAMStackAlura
Projeto final do módulo 1 do Bootcamp Alura Front-end JAMStack
Overview:
This document discusses an example app that utilizes styled-components, a styling solution that supports universal styles. The app extends the Document component to inject server-side rendered styles into the head of the HTML, and it also sets up a global theme for styled-components using the NextJS custom App component. The article provides instructions on deploying the example app using Vercel and CodeSandbox, and it also includes a note about avoiding an error when using the Link component from next/link within a styled-component.
Features:
- Utilizes styled-components, a styling solution that supports universal styles
- Injects server-side rendered styles into the head of the HTML using the extended Document component
- Sets up a global theme for styled-components using the NextJS custom App component
- Provides instructions on deploying the example app using Vercel
- Allows deployment of the app to the cloud using Vercel's documentation
- Provides the option to try the example app on CodeSandbox
- Includes a note about avoiding an error when using the Link component within a styled-component
Summary:
This article discusses an example app that utilizes styled-components as a styling solution that supports universal styles. It provides instructions on deploying the app using Vercel and CodeSandbox, and also includes a note about avoiding an error when using the Link component within a styled-component.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Styled Components
Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- Graphql
A website that uses GraphQL as a query language to manage data fetching and state management. This includes features such as a strongly typed schema, client-side caching, and declarative data fetching to streamline data management and optimize website performance.
- Yup
Yup is a schema builder for runtime value parsing and validation. It provides a declarative way to define validation schemas with support for complex nested objects, array validation, and custom validation rules. Often used with Formik for form validation.