Visão Geral

Curso React and Gatsby Introduction, React é o framework mais popular para construir interfaces interativas com o usuário da web. Gatsby é um gerador de aplicação web progressiva estática (PWA). O Gatsby carrega apenas o HTML, CSS, JavaScript e dados essenciais para o seu site, garantindo que ele seja carregado o mais rápido possível. O Gatsby também pré-busca recursos-chave para outras páginas para que clicar nos links para essas páginas os carregue o mais rápido possível.

Nesta aula, desenvolvedores experientes de JavaScript aprendem os fundamentos da estrutura React e como acelerar os tempos de carregamento de página percebidos do site usando o Gatsby.

Objetivo

Após realizar este Curso React and Gatsby Introduction você será capaz de: 

• Aprenda os fundamentos do framework React
• Crie componentes React funcionais e baseados em classe
• Componentes de estilo
• Acelere os tempos de carregamento de página percebidos com o Gatsby
• Use o GraphQL para consultar dados rapidamente em seus aplicativos
• Instalar e configurar plugins Gatsby
• Use o Redux para gerenciamento de estado
• Implantar um site de produção

Pre-Requisitos

• Todos os participantes devem ser desenvolvedores experientes de JavaScript.
• O conhecimento de conceitos modernos de JavaScript, como classes, desestruturação, operadores rest/spread, Promises, etc., é muito útil. Se sua equipe precisar se familiarizar com JavaScript, 
  

Materiais

Conteúdo Programatico

Introduction

1. Modern Web Development Tooling
2. Languages of the Web: HTML, CSS, JavaScript
3. Role of Data
4. What is React?
5. What problem does React solve?
6. What is Gatsby?
7. What problem does Gatsby solve?

Getting Started with React

1. Three Elements of React Programming
2. Declarative Programming
3. Component-based
4. Learn Once, Write Anywhere

React Projects

1. Create React App Generator
2. Generated Project File Structure
3. Webpack, Babel, etc...
4. Hot Reloading
5. React Create Element and JSX Syntax

Functional Components

1. What is a Component
2. Rendering Components
3. Model-Driven DOM Changes

Passing Data to Components

1. Passing Data with Props
2. Object Destructuring
3. Default Props
4. PropTypes
5. Composing Components
6. Composition Patterns
7. Passing Functions with Props

React Hooks

1. Managing State
2. Understand the Purpose of State
3. Updating State Properly
4. Manage Side Effects with Effect Hook
5. Running Code when a Component Loads
6. Accessing Elements with the Ref Hook
7. Setting the Element Focus on Component Load

Class-based Components

1. Class-based vs. Functional Components
2. Managing State
3. Lifecycle Methods

Styling React Components

1. Style and Class Name Props
2. CSS Modules
3. CSS in JS
4. Emotion vs. Styled Components

Getting Started with Gatsby

1. Modern Site Generator
2. What is a static site?

Gatsby Tooling

1. Installing the Gatsby CLI
2. Creating a Gatsby Project
3. Using Starter Projects
4. Generated Project File Structure
5. Configuration Files
6. Building Projects
7. Static Site Hosting

Gatsby Components

1. What is a Page Component?
2. Routing and Page Components
3. Linking Between Pages
4. What is a Subcomponent?
5. Reusing Component Logic Across Pages
6. What is a Layout Component?
7. Layout Components and CSS
8. Layout Components and Emotion
9. Layout Components and Styled Components
10. CSS Grid and Flexbox

Working with Data

1. What is Data?
2. Using Many Sources of Data
3. Kinds of Data
4. Unstructured Data
5. Create Page API
6. Query Data with GraphQL
7. Page Queries
8. Static Queries

Wordpress (optional)

1. Explore how to power you Gatsby website with a Wordpress site
2. Wordpress as a data source for building the Gatsby site
3. Wordpress as a data source for the live executing of the web site

Using GraphQL

1. GraphQL Queries
2. Thinking of Data as a Graph
3. Using GraphIQL
4. Selecting Properties
5. Aliasing
6. Variables
7. Operation Name
8. Fragments

Gatsby Plugins

1. Installing Plugins
2. Configuring Plugins
3. Source Plugins
4. Transformer Plugins
5. Explore a Variety of Plugins

Redux (optional, adds an additional day)

1. Use Redux to manage state in Gatsby
2. Using the "gatsby-plugin-react-redux" Plugin
3. Redux Pattern
4. Immutable Programming
5. Actions
6. Reducers
7. Selecting State Data
8. Performing Asynchronous Operations

Deploying a Production Site

1. Auditing a Site
2. Creating a Manifest
3. Offline Support
4. Page Metadata