Visão Geral

Este curso ensina aos alunos a introdução a tópicos avançados de React com JavaScript.

Objetivo

Após a conclusão deste curso, você será capaz de:

• Aprenda como começar com React e JavaScript
• Trabalhar com componentes
• Saiba mais sobre o ciclo de vida do componente React
• Trabalhar com formulários
• Entenda o roteamento

Pre-Requisitos

• 1-2 anos de experiência em JavaScript. Compreensão avançada de JavaScript, incluindo protótipos e funções como cidadãos de primeira classe.
  

Informações Gerais

Carga Horária: 24h

• Se noturno este curso é ministrado de Segunda-feira à sexta-feira, das 19h às 23h
• Se aos sábados este curso é ministrado das 9h às 18h
• Se in-company por favor fazer contato para mais detalhes.

Formato de entrega: 

• 100% on-line ao vivo, via Microsoft Teams na presença de um instrutor/consultor ativo no mercado.
• Nota: não é curso gravado. 

Lab:

• Laboratório + Exercícios práticos

Materiais

Conteúdo Programatico

Setup

1. Verifying Node.js and either NPM or yarn
2. Verifying class libraries
3. Verifying class files
4. IDE (WebStorm or Visual Studio Code preferred)

Introduction to React

1. What problem(s) does React solve?
2. Traditional, pre-JS web applications
3. Late-model, MV* and JS web applications
4. React's solutions
5. Single-page apps
6. View libraries
7. Helper libraries
8. React development environment
9. Simplicity: create-react-app
10. Build-your-own: an overview
11. Hello world
12. Your first React component
13. Using React within a page
14. Making some basic changes
15. React and JSX

Components

1. Two types of components
2. Functional components
3. Class-based components
4. Why use one or the other?
5. Testing basic components
6. Props and state
7. Passing in properties
8. Limitations of properties
9. Using state
10. When to use state, when to use props
11. Testing components with Enzyme
12. Event handling
13. React event handling
14. Synthetic events
15. React vs DOM event handling
16. Testing events
17. Children
18. Components within components
19. Known children and unknown children
20. Testing child components
21. Parent-child component communication
22. Communication from parent to child
23. Communication from child to parent
24. Container vs presentational components

React Component Lifecycle

1. Overview
2. Startup and mounting
3. Deprecated methods
4. Updating
5. Deprecated methods
6. Unmounting
7. Calling lifecycle methods in tests
8. Error handling and error boundaries

Intermediate component usage

1. PropTypes
2. Typing and React
3. Using PropTypes
4. PropTypes in production
5. Asynchronous data
6. When should asynchronous fetching be done?
7. What challenges does async offer?
8. Asynchronous best practices
9. Testing against async fetches
10. Lists of data
11. Iterating over a list
12. The key property
13. Sorting data
14. Testing component interactions

Forms

1. Controlled vs uncontrolled components
2. What does React know about your form field?
3. Does React control your form field?
4. When does React find out about changes to your form field?
5. Form field types
6. Controlling a text field
7. Other form fields
8. Getting data out of a form
9. Working with form data in tests

 Introduction to routing

1. What problem is routing trying to solve?
2. How does routing solve this problem?
3. Tying components to URLs
4. Passing parameters via the URL
5. Routing software
6. React-router
7. Other routers
8. Simple router example
9. Testing routing

More complex routing

1. Top-level routing
2. Routing at the top of your application
3. Allowing other parts of the application to manage routing
4. Redirects
5. React-router objects
6. match
7. history
8. location
9. Routing organizational techniques
10. Testing advanced routing

Advanced React

1. Understanding and optimizing reconciliation
2. Best practices for React reconciliation
3. Recognizing common issues
4. Making improvements
5. Refs
6. What’s a ref?
7. What problem does it solve?
8. How can I use refs?
9. The challenges of testing refs
10. Context
11. What is the context API?
12. Is the context API public?
13. How to use the context API
14. Testing the context API
15. Render props
16. Rendering in depth
17. Rendering a function instead of a prop
18. Using the render prop pattern
19. Testing render props