Generic filters
Search in title

Introduction to React Using TypeScript Training

  • Training Duration:
  • 3 Days
  • Training Environment:
  • On-site at the Institution
  • In DVA Classrooms
  • Online
Download Training Document
Request Information!

About the Training

Introduction to React Using TypeScript Training is an excellent starting point for anyone looking to step into the React framework with TypeScript. This training combines the fundamentals of React with the powerful features of TypeScript, providing an in-depth understanding of web application development. It is suitable for both beginners in TypeScript and experienced developers.

In the first part of the training, we cover the basics of TypeScript and how it integrates with React. Participants will learn how TypeScript’s static typing, interfaces, and classes help make React components more robust and scalable. We demonstrate how TypeScript works with JSX and how components are created and combined.

Next, we focus on managing state and props in React components using TypeScript. Participants will learn how to pass state and props data more reliably to components and how to update this data, thanks to TypeScript’s type safety.

To further strengthen React applications with TypeScript, we provide insights into TypeScript-compatible tools and libraries. For example, participants will learn how to use popular libraries like React Router and Redux with TypeScript, making routing and state management easier.

The training also offers practical opportunities; participants apply the concepts they’ve learned about TypeScript and React while working on real-world projects. This helps deepen their understanding of key topics like application structure, component integration, and data management.

By the end of the training, we focus on how to test and deploy the developed projects in a live environment. We provide best practices for improving the performance and security of React applications developed with TypeScript.

Introduction to React Using TypeScript Training equips participants with the knowledge and skills required to develop modern web applications using React and the powerful features of TypeScript. The training provides both theoretical knowledge and practical experience, laying a solid foundation for participants’ web development careers.

What Will You Learn?

During the Introduction to React Using TypeScript Training, you will learn the following topics:
  • TypeScript: How to use the type definition system, Interfaces, Generics, Namespaces, and other TypeScript features.
  • React: React component structures, state and props, component lifecycle methods, event handling, and other React concepts.
  • React with TypeScript: How to write React components using TypeScript, how to use React with TypeScript, and the advantages of this combination.
  • Application Development: How to develop a simple application using React with TypeScript, manage data flow, and assemble components.
  • Debugging: Debugging techniques for React code written in TypeScript and how to use them.
Learning these topics will help you successfully progress in the development process using React with TypeScript.

Prerequisites

For the Introduction to React Using TypeScript Training, it is recommended that the following prerequisites are met:
  • JavaScript: Since TypeScript is built on top of JavaScript, an understanding of the basic concepts of JavaScript is required.
  • HTML and CSS: A basic understanding of HTML and CSS is necessary to have an idea of how React component structures will look visually.
  • React: Understanding React concepts, such as component structures, state, and props, is required.
Meeting these prerequisites will make the Introduction to React Using TypeScript training more efficient and easier to follow. If you are not familiar with these topics, it is recommended that you learn them first.

Who Should Attend?

The Introduction to React Using TypeScript Training may be suitable for the following individuals:
  • Web Developers: Individuals with web development experience who want to use React are suitable candidates for the Introduction to React Using TypeScript Training.
  • JavaScript Users: Individuals who are proficient in JavaScript and want to advance their skills are suitable candidates for this training.
  • Application Developers: Those with application development experience who want to use React and TypeScript are suitable for this training.
  • Front-end Developers: Individuals with front-end development experience who want to work with React and TypeScript are ideal candidates for this training.
The Introduction to React Using TypeScript Training can be beneficial for anyone looking to learn React and TypeScript.

Outline

 Setup
  • Verifying 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 componentsorm 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 test
Introduction to Reux
  • WhWhat 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

Training Request Form

React Training

React Training: The Efficient Way to Develop User Interfaces The Importance of React Training for Organizations React is a JavaScript library developed by Facebook for

Eğitimi İncele »

If you want to maximize the benefits of your training in terms of time and cost efficiency, all you need to do is contact us.

Our training consultants will get in touch with you, assist in identifying your organization’s needs, and provide the most suitable training programs for your employees.

Training Request Form

Digital Vision Academy © All Rights Reserved 2023