IIRF Online > Development > Web Development > Typescript > Typescript & React JS Course with React & Typescript Project
Typescript & React JS Course with React & Typescript Project by Udemy
Typescript and ReactJS course helps you understand React JS & Type script in detail with real Typescript React Projects
Course Highlights
- TypeScript is a programming language that helps developers turn medium-sized JavaScript projects and prototypes into large-scale ones.
- TypeScript is a syntactical superset of JavaScript, any JavaScript program is also a valid TypeScript program.
- Microsoft introduced TypeScript to solve this scalability problem. TypeScript is often referred to as JavaScript with type .
- TypeScript is better suited than JavaScript for large applications, but it requires a foundational knowledge of JavaScript to use.
- TypeScript is mainly associated with development careers. Typical job titles for TypeScript developers include senior developer, front end developer.
- Typescript is a superset of JavaScript. As its name suggests, TypeScript adds optional static typing to the JavaScript language.
- JavaScript is a text-based computer programming language used to make dynamic web pages.
- Developers use TypeScript when they need to scale up their JavaScript development.
- TypeScript is mainly associated with development careers. Typical job titles for TypeScript developers include senior developer, front end developer.
- Developers with an understanding of TypeScript (which implies skill in JavaScript) might work in a wide range of fields building applications for both server-si
- Learn how to define variables using data types in type script
- Learn what TypeScript (typescript react react typescript Type script typescript node nodejs typescript angular typescript )for is and why we should use it
- Use the different types of variable prefixes like let and const in typescript.
- Understand what TypeScript (typescript angular typescript react three js jest threejs) really it is about and how works
- React, or React JS, is a front-end Javascript library for building UI components for the web. If you are interested in web development, React is the perfect lib
- React is worth learning. There are a couple of reasons. The first one is that React is in high demand in the software development job market
- React encourages engineers to write code using a Functional Programming approach. Engineers create components, which are normal Javascript functions
- React is an open-source JavaScript frontend library. Some developers consider it a frontend framework because it does more than standard libraries usually do.
- React is an essential Javascript framework for web development. It is the most popular framework for developing web, mobile, and desktop app user interfaces.
- A runtime system is a platform where a software program runs. It’s essentially an environment housing the collection of software and hardware that allows an app
- This is the full React JS course. You will learn React JS, Redux, Hooks and Context
- This course is the best way to learn complete React JS
- You will learn React JS with hands-on examples
- Dive in ReactJS
- Learn how to create Single Page Web Application with Reactjs
- Learn components, props, states and component life cycle methods in React js
- Create reusable React Components
- Learn sending request to an API and fetch data
- User Inputs, Forms and Events in React
- Routing with React Router
- Learn to create multi-page web app with react-router-dom
- Manage the data of our application with the Redux library
- We will learn how to perform asynchronous operations with Redux thunk
- Create context with class-based component
- Learn to consume context with Context Consumer
- Learn how to consume context with static contextType
- How to manipulate context data in class-based components
- Learn the most important hook functions like, useState, useEffect, useReducer and useContext
- Learn how powerfull when we use Context and Hooks together
- Learn how to easily build the largest and most advanced React applications
- Learn routing with NodeJS
- Frameworks provide an opinionated approach to building an entire application.
Skills you will learn!
Curriculum
5 Topics
Why a Library or Framework Is Needed
What is React?
Why Should we use React
React js Project Files and Course Documents
quiz
6 Topics
React vs Vanilla JavaScript
Setting up our Development environment.
Look at React Official Documentation
Pure React
Setting up a project with create-react-app
quiz
18 Topics
Rendering the root component
Debugging
Creating and reusing a component
What is JSX
Creating more component
JavaScript logic in component
Separation of concerns
Styling React applications
Props
Props & one-way data flow
Rendering list
Conditional Rendering 1
Conditional Rendering 2
Extraction JSX into a new component
Destructuring props
React fragments
Dynamic Classes
React JS Quiz
10 Topics
Section Overview
Let’s build a new project
Handling Events
What is state?
Creating a state with useState
Set state manually!
Adding open-close button
React Developer Tools
Updating state based on current state
quiz
11 Topics
Introduction of the Application
Creating the layout
Rendering a list component
Rendering a form component
Controlled Elements
Let’s think about state
Lifting state up
Deleting an item
Updating an item
Calculating package quantities
Shorting items
5 Topics
Application Introduction
Project Setup
Components Structure
Let’s start using data
Let’s start Creating the card structure
5 Topics
Class-Based Component
Counter example with Class-Based component
Working with event handlers
Class-Based component vs Functional component
Quiz
9 Topics
useEffect Hook
Counter example with useEffect hook
Dependency Array
Clean-Up function
useState + useEffect + Data fetching
Project Structure
Component structure & styling
Using an async function & axios
React Quiz
7 Topics
Section Overview
Refs
Why we use useRef Hook
Refs to select DOM elements
What is this Custom Hook
Custom Hook counter example
Quiz
21 Topics
Section Overview
What is React-Router
Creating a regular application
Adding a React-Router to the project
Link & NavLink
Server side rendering & Client side rendering
Creation of components & Application layout
Component & Pages Layout and Styling
Components & Pages Layout and Styling 2
Personnel Page
Dynamic routing
useParams & useLocation
PersonnelDetail Page
useNavigate vs Link
notFound page & Navigate
Error handling
Loading
Nested Routes
Absolute Path & Relative Path
Private Router
quiz
10 Topics
Project Introduction & API source
File structure
Creation of Routes
Let’s start creating the pages
Navbar
Home Page
Header
Card
Detail Page
Login & Logout
11 Topics
Section Overview
Why State Management Libraries Are Needed
Context API
Stages of Using the Context API
Let’s Start Using the Context API
Context Provider
Data Management
Creating Multiple Context
LocaleStorage
Using Custom Hooks
Quiz
7 Topics
Section Overview
What is useReducer
Project Setup
useReducer
Let's Start Using the Reducer Function
Counter Reducer
Quiz
13 Topics
Section Overview
Project Introduction and API Source
Project Setup and File Structure
Creating the Route Structure
Header and Navbar
Search Page
News Card
Home Page
Context and Theme
Slider
Categories Page
Filtering by Country
Data Extraction With Custom Hook
11 Topics
Section Overview
Redux
Redux Folder
Counter Component and createStore
useDispatch and useSelector
How to Use Folders With Redux
combineReducer
Todo Component
Todo Reducer
Clear Action
Quiz
11 Topics
Section Overview
Redux Toolkit
Let’s Start Using Redux Toolkit
Using Actions in Redux Toolkit
Todo Example
Todo Slice
addTodo & deleteTodo
What is Redux Thunk
Let’s Start Using Thunk in Redux Toolkit
Post Component
Quiz
8 Topics
Project Introduction
Creation of File Structure
Route Structure and Navbar
Login Page
authSlice
newsSlice
News Page and Card Structure
What we did in this Application
9 Topics
Section Overview
Setting up a file structure
React Router v6.4+
Building the App Layout & Nested Routes
Fetching data with loaders
useNavigation
Error Handling
Dynamic Path
Quiz
11 Topics
Section Overview
Project Introduction and API Resource
Creation of the Project With Vite
Creating the Folder Structure
Creation of Route Structure
Navbar
Login Page
Manage User State With Redux Toolkit
Manage Movies Data With Redux Tollkit
Movies Page
Using Loader in MovieDetail Page
4 Topics
How to Get Help?
Typescript Project Files
A Birdseye View of TypeScript
Initial Setups for Typescript
6 Topics
App Review
How to Run TypeScript Code
A Subtle Adjustment
Catching Errors in Typescript
Catching Errors 2
quiz
5 Topics
Types in TypeScript
Types in TypeScript 2
More Types with Examples
Where Do We Use Types
quiz
6 Topics
Introduction of Type Annotation and Infrence
How Do Annotatitons Work in Typescript
Annotations Around Objects
Function Annotations in Type script
Type Infrence
quiz
5 Topics
Understanding 'Any' Type
Fixing 'any' Type
Initiate Annotation Later in Typescript
When type can not be inferred
quiz
5 Topics
Annotations with Functions
Type Infrence with Functions in Typescript
Using Annotations with Anonymous Functions
Never and Void Types in TypeScript
quiz
2 Topics
Object Destructure with Annotations in Typescript
Using Annotations with Objects in Type script
5 Topics
Typed Arrays in Typescript
More on Typed Arrays
Working with Multiple Types in Type script
When should we use typed arrays
quiz
4 Topics
Tuples in typescript
More on Tuples
When Should We Use Tuples in Type Script
quiz
7 Topics
Introduction to Interfaces
Long Type Annotations
Refactoring Type Annotations
Syntax of Interfaces
Functions in Interfaces
Code Reusability
quiz
6 Topics
Introduction to Classes
Typescript Inheritance
Modifiers
Fields
Fields and Inheritance
quiz
13 Topics
Overview
Webpack Setup and Configuration
App Structure
Generate Random Data with Faker
Using Type Definition Files
Exporting in Typescript
Typescript Configuration
Defining a Cargo
Install Google Maps
Integrate Google Maps
Digging into Type Definition Files
Using Modifiers
Attaching Markers on Map
6 Topics
Best Way to Access the Interface
Typescript Checks Types Automatically
Let’s Show Marker Pop-up
Changing the Pop-up Content
Improving the Error Finding
Summary
22 Topics
Overview
Typescript Compiler
Automatic Execution of the Code
Let’s Dive in To the Project
Creating the Sorting Class
Implementation of The Sorting Class
Problems with Different Data Structures
Using OR Operator
Typescript Type Guards
Type Guards Are Useful But Not So Much
Let’s Do Some Refactoring
Let’s Do Some Refactoring - 2
Overview of the Final Form
Finally! Let’s Define Our Interface
Sorting Strings
Let’s Solve One Last Issue
Adding Sort Method to Other Classes
Let’s Refactor Sorting Class
Solving Issues with Abstract Classes
Implementing Abstract Classes
Last Refactor
Comparing Interfaces and Abstract Classes
25 Topics
A Little Reminder
Overview
Create React App with Typescript
Creating Components in Typescipt React
How to Use Interfaces?
Let’s Dive into States
Hidden Complexity of Component State
Defining Functional Components
Let’s Setup Redux
Redux Action Creators
Redux Action Types
Optional Error Checking
Redux Reducers
Validating Redux Store
Using Connect Function
Let’s Render our List Items
How to Delete Items?
Separate Files for Different Action Creators
OR Statement for Different Actions
Type Guards in Reducers
Adding Delete Items Functionality
A Little Issue with Type Definition Files
Showing the Loading Text When Fetching
Summary
quiz
1 Topic
Typescript & React JS Course with React & Typescript Project
Typescript & React JS Course with React & Typescript Project
Related Typescript Courses
.webp)
Thank You!
Your review has been submitted successfully.