React js Learning

Teacher

Bahman Nikouei

Category:

JavaScript

5 out of 5

1 review

Language Course

React js Learning

React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.

React offers various extensions for entire application architectural support, such as Flux and React Native, beyond mere UI.

This course introduces you well to the React library, and if you are thinking of increasing your skill level, you can count on this course.

What are you learning?

What is React?
Build UI using JS
Hello World With React
Hello World With React (React 18)
JSX and its features
What is Component?
How to make functional component
Create Component using Class
React Component Props
Introduction to Create React App
List rendering
What is state?
Event handling
Event Handling (part 2)
Creating connections between components
Creating connections between components (second session)
Conditional Rendering
Conversion of simple chat template to React
Simple to-do list implementation
json server

Life cycle methods
componentDidMount
Mini project to get information based on the user’s IP
componentDidUpdate
Mini project to display posts with sitebar
Mini project of displaying posts with sitebar (part two)
componentWillUnmount
For example from componentWillUnmount
getDerivedStateFromProps
For example, using getDerivedStateFromProps (first part)
For example, using getDerivedStateFromProps (part two)
Must ComponentUpdate
How to add shouldComponentUpdate
createRef
For example from createRef
getSnapshotBeforeUpdate
For example, getSnapshotBeforeUpdate is used

Problems with class components and the addition of React Hooks
Introduction to useState
Introduction to useEffect
The simplest example of using Hooks
Closure functions
Old closure
Example Slider (part 1)
Example Slider (part 2)
The most important fundamental difference between functional and class components (part 1)
The most important fundamental difference between functional and class components (part 2)
UseState functional updates
useEffect dependency array
useEffect cleanup function
useRef
useRef vs. createRef
How to use download and toast
User actions
useReducer (first session)
useReducer (second session)
useMemo
useMemo and useCallback
Custom hooks
Use DebugValue
useLayoutEffect
Get information from wikipedia (create a world map with the ability to click on the country)
Getting information from Wikipedia (creating components and defining the required map event)
Get information from Wikipedia (get the first page of a paragraph as a Wikipedia summary)
Get information from Wikipedia (Get information from Wikipedia)
Get information from wikipedia (get the link of the image and instructions to get information

Introduction to virtual DOM first session
Getting to know the virtual DOM of the second session
Right from the key and the consequences of using the wrong!!
Familiarity with Higher-Order Components
Familiarity with the field
Using context in functional components
Using context in class components
Example of implementing the user login process (first part)
Example of implementing the user login process (second part)
Example of implementing the user login process (third part)
Example of implementing the user login process (part four)
What does component reuse mean and at what level should it be done in the project?
Getting to know the Container-Presenter pattern and clarifying its specific use or non-use
Getting to know the types of structuring of project folders and files in React
How to use environment variables in React
Implementing a service instance (axios) in React
Layout
Simple routing implementation
How to control the UI of a component using Props
Move between application pages
React release policies
What is the new JSX Transform and how does it use it?
Event Delegation changes in React 17
Remove Event Pooling in React 17
Effect Cleanup changes in React 17

Introducing the Redux package
Getting to know the State storage structure
Familiarity with its operation and application
Simple definition of pure functions
Familiarity with Reducer and its use
Introduction and implementation store
Add the ability to subscribe to the store
How to add Redux to a project
First simple example of Redux in React
Direct use of Store and solution of simple todo list example
Implementation of communication between react and redux
Combine reducers
How to implement combinationReducers and use it
Data flow cycle in Redux
Getting to know the 3 main rules of Redux
Implementation of the todos example (state and actions identification) first part
Todos example implementation (todosSlice implementation) Part II
Todos example implementation (todosSlice implementation) Part III
Implementing the todos example (avoid re-rendering all todos) Section IV
Introducing Redux development tools
Introduction and how to use immer package
Implementation example todos (adding immer to project) part 5
Implementation example todos (adding filtersSlice) Section VI
Implementation of the todos example (Implementation of the todos filter) Section VII
Introduction and how to use the reselect package
Implementation of example todos (implementation of color changes and actions of erasing and completing todos) Section VIII
Familiarity with the concept and application of enhancer and their implementation
Familiarity with the concept and application of middleware and their implementation
Implementing async function middleware (similar to thunk) and learning the principles of working with thunk
Add redux thunk to the project and exchange information with the server
Managing and displaying the status of async requests in redux thunk (first part)
Managing and displaying the status of async requests in redux thunk (second part)
What is Redux Toolkit and what does it do?
Easier config store using configureStore
Creating action is easier using createAction
Easier reducer creation using createReducer
Simultaneous creation of reducer and action creator using createSlice
Managing the cycle of async operations using createAsyncThunk (first part)
Managing the cycle of async operations using createAsyncThunk (second part)
Setting up the execution of async operations in redux thunk
What is Normalizing State and what is its use?
For example, using the normal mode (part one)
Example of using normal mode (second part)
Example of using normal mode (third part)
Example of using normal mode (fourth part)

What is Next.js and what problems does it cause?
Familiarity with pre-rendering and its application
How to set up Next.js
Definition page in Next.js
What is the difference between static production with data and without data?
How to run the getStaticProps function in different modes
Introduction to dynamic routing in Next.JS
Getting to know the getStaticPaths function and its use in Next.JS
Checking the output produced using script construction in static site production mode (ssg)
Checking the types of fallback modes in the getStaticPaths function (first part)
Checking the types of fallback modes in the getStaticPaths function (second part)
Incremental Static Regeneration in SSG mode
Server Side Rendering (SSR)
Application and how to use the link component
Application and how to use the Head component
Application and how to use the Image component
How to manage in Next.js
Absolute import path alias and module
Create a custom document
Hydration suppression warning
The difference between using useEffect and useLayoutEffect

Introducing the concept of routing
Getting to know the location api in the browser
Getting to know the history api in the browser
Create a simple component to render the cost component with the entered address
Link implementation of a component to add links to the program
ForceUpdate implementation for component route
Re-rendering routes with address changes
Difference between routing hash and history
Introducing the main components of the React router package (starting the React package router tutorial)
Getting to know how to add react router to the project
Getting to know route rendering methods in React router
The difference between static routing and dynamic routing
How to implement nesting routing in React router
How to access parameters in components using match and useParams
Access history using useHistory
Introduction to useRouteMatch in React router
Getting to know the location object and using useLocation
Implementation of the user login example using React Router (first part)
Implementation of user login example using React Router (second part)
Implementation of user login example using React Router (third part)
The method of adapting the address entered in React router (first part)
The method of matching the address entered in React router (second part)
Checking the BrowserRouter props and displaying the message to the user with Prompt
Change active link style using NavLink
Check out the example tips of the medal gallery
Checking the tips of the examples presented on the React router site

An example of implementing a simple blog using redux (first part)
An example of implementing a simple blog using redux (second part)
An example of implementing a simple blog using redux (third part)
An example of implementing a simple blog using redux (fourth part)
An example of implementing a simple blog using redux (Part 5)
An example of implementing a simple blog using redux (sixth part)
An example of implementing a simple blog using redux (seventh section)
An example of implementing a simple blog using redux (section 8)
An example of implementing a simple blog using redux (section 9)
An example of implementing a simple blog using redux (Part 10)

Write a simple test case without any tools
Introduction and use of jokes
Introduction and use of second meeting search
Running tests in React
Writing the first react test
Introduction and use of act function
Using setup and teardown in a joke
Component output test with props changes
Add a way to test events without using a package
The test of time
Rendering components using the render method (starting with the library test package)
Introduction of query types in the test library
Optimum selection of elements using playground test
Find the difference in receiving queries
Use jest dom custom matchers
For example, use the query
Example of async operation test
Mock api requests using msw
Test sending api request and using fireEvent
Error test in request from api
Simulating user actions using userEvent
Test functions received through props

Getting the props page on the client side (second part)
Redux configuration in NextJS (part one)
Redux configuration in NextJS (part two)
Redux configuration in NextJS (third part)
Redux configuration in NextJS (fourth part)
Redux configuration in NextJS (Part 5)

What is the target audience?

The content of the course cannot be understood by children under the age of 13
The prerequisite for this course is front-end training and basic and advanced JavaScript
Network and Internet information is required
A laptop or computer is required

Starting Course

Quiz: Mobile / Native Apps

5 questions

Engine Target Audience

After Intro

Volta GPU for optimization.

Preview

14 Minutes

The Tensor Core GPU Architecture designed to Bring AI to Every Industry. Equipped with 640 Tensor Cores, Volta delivers over 100 teraflops per second (TFLOPS) of deep learning performance, over a 5X increase compared to prior generation NVIDIA Pascal architecture.

Deep Learning

FAQ 1

Faq Content 1

FAQ 2

Faq Content 2

Productivity Hacks to Get More Done in 2018

— 28 February 2017

Facebook News Feed Eradicator (free chrome extension) Stay focused by removing your Facebook newsfeed and replacing it with an inspirational quote. Disable the tool anytime you want to see what friends are up to!
Hide My Inbox (free chrome extension for Gmail) Stay focused by hiding your inbox. Click "show your inbox" at a scheduled time and batch processs everything one go.
Habitica (free mobile + web app) Gamify your to do list. Treat your life like a game and earn gold goins for getting stuff done!