React course given to check point in February 2020
The course is available in video in this URL: https://www.youtube.com/playlist?list=PLnHa2cF4cNDtfkYKO6v069GUPYrJtijwc
I'm uploading new react material every week so to keep updated subscribe to my user at:
https://www.youtube.com/user/ywarezk
You also have access to a whatsapp group where i publish my videos and answer React questions Link to the group: https://chat.whatsapp.com/Eqll3DtpQG27SAET5NcmtB
This lesson will cover some basic tools we will need before we dive in to React. We will cover the following tools:
- NodeJS
- NPM
- NPX
- variable declaration: var, let, const
- OOP and this
- closure
- Promise, async await
- destructoring
Let's get to know React. This lecture is available in video in the following URL: https://youtu.be/bVPMCmTN__Q
We will cover the following topics:
- What is React
- Hello World
- React.createElement
- JSX introduction
- Component
- React Architecture
- VirtualDOM
This is the syntax we will use to describe how our components look like. This lecture is available in Video in the following URL: https://youtu.be/s_ctvfeA58c
We will cover the rules of JSX
A library facebook released to easily start a new React web project. This lecture is available in Video in the following URL: https://youtu.be/n-GATg31ctE
In this lecture we will cover the following topics
- Create a new React web project
- Going over the files
- Running a development server
- Building our app
- webpack
- adding images
- adding stylesheets
- best practices to arrange files, styles
The building blocks of a React application are React Components. In this lesson we will cover how we create React Components This lecture is available in video in the following URL: https://youtu.be/jpmyfv_w-fw
We will cover the following topics
- What are react components and how we decide what to wrap in a component
- Component as function
- Component as class
- Props, propTypes, defaultProps
- Events
- State
- introduction to hooks
- useState
- Component lifecycle
- useEffect
Time for you guys to practice creating React application and creating React components. In this EX. you will create a Todo List application. The solution for the Ex. is avilable in the following video: https://youtu.be/8vgzC3CI510
To send the request:
// fetch is returning Promise<Response>
fetch('https://nztodo.herokuapp.com/api/task/?format=json')
.then((response) => {
// from response we want the data from the server
return response.json();
});
In this lesson we will learn how to deal with forms in React application. We will also learn about important React patterns that if you understand will help you understand other react libraries as well. The lesson is available in the following video: https://youtu.be/CAobBdYor6U
We will cover the following topics:
- Controlled form
- Uncontrolled form
- Ref, useRef
- HOC
- Render Props
- custom hooks
- Formik
In this ex you will understand how JWT and authentication is working in a spa. An important ex. that will escort you probably during your real life development. The ex and solution is in this video:
- https://academeez-login-ex.herokuapp.com
- Login: /api/users/login
- POST
- {email: '...', password: '...'}
- Register: /api/users/register
- POST
- {email: '...', password: '...', firstName: '', lastName: ''}
- Todo: /api/tasks
- GET
- headers: { Authorization: Bearer }
how to do send the request
// Register
fetch("https://academeez-login-ex.herokuapp.com/api/users/register", {
method: "POST",
body: JSON.stringify(formValues),
headers: {
"Content-Type": "application/json"
}
})
// Login
fetch("https://academeez-login-ex.herokuapp.com/api/users/login", {
method: "POST",
body: JSON.stringify(formValues),
headers: {
"Content-Type": "application/json"
}
})
// Todo
fetch("https://academeez-login-ex.herokuapp.com/api/tasks", {
headers: {
"Authorization": "Bearer <token>"
}
})
In this EX we will practice how to use the composition patterns we learned: HOC, Render Props and also the Custom Hook pattern to solve repeating code. You will create 3 components that display log messages and a button in each one to create a new log. The ex is available in this Video:
- your server is located in the following url: https://nztodo.herokuapp.com/api/task/?format=json
- you can send a post request to create a new log
- you can send a get request with the group param to query the list for group
- implement HOC called
const EnhancedComponent = withLogger(group)(RegularComponent)
-
This HOC will send the child component in the props the list of logs from the server
-
the HOC will also send a function to create a new log
-
implement Render Props that will get the group as prop and send in the render prop a function with the list of logs and the create function.
<Logger group={45} render={(logs, createLog) => ...}>
- implement custom hook function that will send the logs and the create log function.
const [logs, createLog] = useLogs(45)
In this lesson we will talk about Redux library which will help us arrange the data in our app. The lesson is available in the following video:
- The data problem we are trying to solve
- What is Redux
- Redux Architecture
- Store
- Reducers
- Actions
- state best practices
- combineReducers
- Redux dev tools
- middlewares
- redux-thunk
Redux is not an easy topic to chew so in this lesson we will practice how to work with Redux. We will create a simple chat app. We will have to arrange data we get from the server in a redux state and understand how to divide our components to smart containers which connect to the state, and simple components which are getting props. The solution for this EX. is available in the following video:
Our SPA will be divided to different screens, where each screen resides in a different url. In this lesson we will learn how to arrange the screens of our app, what is the best practices working with URL and how to pass data with the url. The lesson is available in the following video:
We will cover the following:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent