TypeScript Kullanarak React’e Giriş Eğitimi

 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