Visão Geral

Este curso de treinamento ensina aos alunos tópicos introdutórios de React com TypeScript.

Objetivo

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

• Aprenda como começar com React e TypeScript
• 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. Verifying TypeScript setup
5. 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 and TypeScript development environment
9. Simplicity: create-react-app and react-scripts-ts
10. Build-your-own: an overview
11. Configuring TypeScript
12. Hello world
13. Your first React component
14. Using React within a page
15. Making some basic changes
16. React and JSX and TypeScript

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. Properties and types
8. Passing in properties
9. Limitations of properties
10. State and types
11. Using state
12. When to use state, when to use props
13. Testing components with Enzyme
14. Event handling
15. React event handling
16. Event types
17. Synthetic events
18. React vs DOM event handling
19. Testing events
20. Children
21. Component types
22. Components within components
23. Known children and unknown children
24. Testing child components
25. Parent-child component communication
26. Communication from parent to child
27. Communication from child to parent
28. Container vs presentational components
29. Using types to validate communication

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. Asynchronous data
2. When should asynchronous fetching be done?
3. What challenges does async offer?
4. Working with Promises and generic types
5. Asynchronous best practices
6. Testing against async fetches
7. Lists of data
8. Iterating over a list
9. The key property
10. Sorting data
11. Testing component interactions

Forms

1. Controlled vs uncontrolled components
2. Form field types
3. What does React know about your form field?
4. Does React control your form field?
5. When does React find out about changes to your form field?
6. Form field types
7. Controlling a text field
8. Other form fields
9. Getting data out of a form
10. 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. Routing types
10. 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 and their types
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. Ref types
9. How can I use refs?
10. Testing refs
11. Context
12. What is the context API?
13. Is the context API public?
14. How to use the context API
15. Context API types
16. Testing the context API

Render props

1. Rendering in depth
2. Rendering a function instead of a prop
3. Using the render prop pattern
4. Render props, function signatures, and types
5. Testing render props