TR EN
Teklif Al
0

TypeScript kullanarak React'e Giriş Eğitimi

Eğitim Süresi:
Gün
Detaylar
Diğer Eğitimler

Eğitim Hakkında

React, web kullanıcı arayüzleri oluşturmak için bir JavaScript kütüphanesidir ve günümüzün en çok aranan ve sevilen web çerçevelerinden biridir. React, web standartlarının üzerinde etkileşimli kullanıcı arabirimleri oluşturur.

TypeScript kullanarak React'e Giriş eğitiminde, katılımcılar React'in en son sürümü ve React uygulamalarını geliştirmek için kullanılan araçlarla ilgili uygulamalı deneyim kazanacaklardır.

 

Neler Öğreneceksiniz

  • Use a JavaScript package manager (either npm or Yarn)
  • Understand the new JavaScript language features, including classes, modules, and arrow functions
  • Use TypeScript to enable additional language features including static typing and generics
  • Articulate what React is and why it is useful
  • Explore the basic architecture of a React application
  • Gain a deep understanding of JSX and the Virtual DOM
  • Use React components to build interactive interfaces
  • Create and validate forms using controlled components
  • Make HTTP calls to read or change data
  • Explore the common component architecture patterns
  • Configure simple and complex routing
  • Learn React best practices

Eğitim İçeriği

   Setup

  • Verifying Node.js and either NPM or yarn
  • Verifying class libraries
  • Verifying class files
  • Verifying TypeScript setup
  • IDE (WebStorm or Visual Studio Code preferred)
  • Introduction to React
    • What problem(s) does React solve?
      • Traditional, pre-JS web applications
      • Late-model, MV* and JS web applications
    • React's solutions
      • Single-page apps
      • View libraries
      • Helper libraries
    • React and TypeScript development environment
      • Simplicity: create-react-app with TypeScript built in
    • Hello world
      • Your first React component
      • Using React within a page
      • Making some basic changes
      • React and JSX and TypeScript

 

Components

  • Two types of components
  • Functional components
  • Functional component types
  • Class-based components
  • Class component types
  • Why use one or the other?
  • Important distinctions before version 16.8
  • Class-based components for state and lifecycle
  • Functional components for simplicity and purity
  • Currently, prefer functional components with hooks
  • Testing basic components
  • Testing libraries: Enzyme vs Testing Library (sic)
  • Jest
  • Testing with Testing Library
  • Testing with TypeScript
  • Props and state
  • Properties and types
  • Passing in properties
  • Limitations of properties
  • State and types
  • Using state and the useState() hook
  • When to use state, when to use props
  • Testing state and prop changes
  • Event handling
    • React event handling
    • Event types
    • Synthetic events
    • React vs DOM event handling
    • Testing events
  • Children
    • Component types
    • Components within components
    • Known children and unknown children
    • Testing child components
  • Parent-child component communication
    • Communication from parent to child
    • Communication from child to parent
    • Container vs presentational components
    • Using types to validate communication

 

React Component Lifecycle

  • Lifecycle overview
    • Startup and mounting
    • Rendering
    • Updating
    • Unmounting
  • Using useEffect() for lifecycle methods
    • Run once
    • Run every render
    • Run on specific changes / updates
  • Lifecycle methods in tests
  • Error handling and error boundaries
  • Intermediate component usage
    • Asynchronous dat
      • When should asynchronous fetching be done?
      • What challenges does async offer?
      • Working with Promises and generic types
      • Asynchronous best practices
      • Testing against async fetches
    • Lists of data
      • Iterating over a list
      • The key property
      • Sorting data
      • Testing component interactions

 

Forms

  • Controlled vs uncontrolled components
    • Form field types
    • What does React know about your form field?
    • Does React control your form field?
    • When does React find out about changes to your form field?
  • Form field types
    • Controlling a text field
    • ther form fields
  • Getting data out of a form
  • Working with form data in tests

 

Introduction to Redux

  • What problems does Redux solve?
  • How does it solve them?
  • Basic Redux pattern
  • Store
  • Reducers
  • Actions
  • Redux types

 

Modern Redux with the Redux Toolkit

  • What is the Redux toolkit
  • What does it provide?
  • The ducks pattern
  • Testing Redux
  • React and Redux
  • Plugging into React
  • State as props
  • Events as dispatch
  • Introducing higher-order components
  • Types with React-Redux
  • Too many variations
  • Using Generics
  • Solving TypeScript issues with React-Redux
  • Turning our standalone Redux program into a component
  • Middleware
  • Provided by the toolkit
  • ther middleware
  • Building a real-world React-Redux component
  • Testing React-Redux components
  • Higher-order components in detail
  • What do higher-order components do?
  • Why would I use a higher-order component?

 

Asynchronous Redux

  • The difficulties of asynchronous Redux
  • Asynchronous middleware
    • Depending on your needs, we can use either thunks, sagas, or survey both techniques for asynchronous interactions
    • Types as appropriate
  • Dispatching async actions
  • Typing async results
  • Catching results
  • Handling errors
  • Testing asynchronous Redux

Diğer Eğitimler

Digital Vizyon
444 Eğitim Seti
Eğitimlere Dön
Eğitim Kataloğu
Eğitim İçeriğini İndir Tüm Eğitim Kataloğunu İndir