Introduction to React and React Hooks ↪️
React is a JavaScript library for building UI components. And Hooks are the heart of any React app. Let's talk about them.
🧵👇🏻
React is a JavaScript library for building UI components. And Hooks are the heart of any React app. Let's talk about them.
🧵👇🏻
Why React?
1. Reusable components
2. Fast due to virtual DOM
3. Huge ecosystem
{ 2 / 23 }
1. Reusable components
2. Fast due to virtual DOM
3. Huge ecosystem
{ 2 / 23 }
A typical React app contains many components. They are reusable and can interact with each other.
What is a component?
- Component is a simple function that you can call with some input and they render some output
{ 3 / 23 }
What is a component?
- Component is a simple function that you can call with some input and they render some output
{ 3 / 23 }
Attached image showing a typical React app with all different components.
As you can see this entire webpage is nothing but a mixture of different components
{ 4 / 23 }
As you can see this entire webpage is nothing but a mixture of different components
{ 4 / 23 }
Components are of two types:
1. Class based components
2. functional-based components
Class-based components are defined using ES6 classes, whereas function components are basic JavaScript functions
{ 5 / 23 }
1. Class based components
2. functional-based components
Class-based components are defined using ES6 classes, whereas function components are basic JavaScript functions
{ 5 / 23 }
Before diving deeper into it, let's talk a little bit about JSX
- JSX stands for JavaScript XML. It's basically nothing but the extension of JavaScript which allows us to write HTML code in a JavaScript file.
{ 6 / 23 }
- JSX stands for JavaScript XML. It's basically nothing but the extension of JavaScript which allows us to write HTML code in a JavaScript file.
{ 6 / 23 }
const element = <h1>Hello, world!</h1>;
Consider this variable declaration. It's neither JS nor HTML. This is the mixture of JavaScript + XML = JSX
{ 7 / 23 }
Consider this variable declaration. It's neither JS nor HTML. This is the mixture of JavaScript + XML = JSX
{ 7 / 23 }
Now we know JSX, let's move forward
- Functional components are nothing but simply a JavaScript function that takes some parameter will return some JSX code
A typical function component 👇🏻
{ 8 / 23 }
- Functional components are nothing but simply a JavaScript function that takes some parameter will return some JSX code
A typical function component 👇🏻
{ 8 / 23 }
A very important concept in React
Virtual DOM
You might have heard the term "DOM", virtual DOM is kind of similar. It uses a strategy that updates the DOM without having to redraw all the webpage elements.
{ 9 / 23 }
Virtual DOM
You might have heard the term "DOM", virtual DOM is kind of similar. It uses a strategy that updates the DOM without having to redraw all the webpage elements.
{ 9 / 23 }
Every time the DOM changes, the browser needs to recalculate the entire layout and then repaint the web page which makes a web app slow
To overcome this we have virtual DOM
Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM
10
To overcome this we have virtual DOM
Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM
10
Whenever the new element is added to the UI, a new virtual DOM associated with that element is created. If state of this element changes, a second new virtual DOM is created which will be compared with the previous virtual DOM
- It then updates ONLY the object on the real DOM
- It then updates ONLY the object on the real DOM
Setting up your first react project directory is quite confusing. Let's see how you can do it
I'm assuming you have node environment set up and up-to-date version of npm. If no, download it from here
nodejs.org
{ 12 / 23 }
I'm assuming you have node environment set up and up-to-date version of npm. If no, download it from here
nodejs.org
{ 12 / 23 }
Next thing you need to install is `create-react-app` is a tool helps you start building with React app. It set up all the tools that you need in order to get started.
{ 13 / 23 }
{ 13 / 23 }
Now you have create-react-app installed in your machine, it's time to create your first React app
Command - "create-react-app app-name"
Depending upon your internet speed, this will take some minutes. So time to prepare a coffee for yourself.
{ 14 / 23 }
Command - "create-react-app app-name"
Depending upon your internet speed, this will take some minutes. So time to prepare a coffee for yourself.
{ 14 / 23 }
Once done, run "npm start"
Your default browser will launch automatically and you will see something like this at localhost:3000
{ 15 / 23 }
Your default browser will launch automatically and you will see something like this at localhost:3000
{ 15 / 23 }
I think that's enough for the introduction. Let's move React Hook now. Starting with the discussion on some key point about React hooks 👇🏻
{ 16 / 23 }
{ 16 / 23 }
What exactly hooks are?
- We can consider hooks as a JavaScript function that takes some parameter and return something accordingly. But they servers some complex functionality like managing state and other React features.
{ 17 / 23 }
- We can consider hooks as a JavaScript function that takes some parameter and return something accordingly. But they servers some complex functionality like managing state and other React features.
{ 17 / 23 }
Hooks are backwards-compatible!
Backwards compatibility is the characteristic of a technology that allows for interoperability with an older legacy system. Hence hooks don’t contain any breaking changes.
{ 18 / 23 }
Backwards compatibility is the characteristic of a technology that allows for interoperability with an older legacy system. Hence hooks don’t contain any breaking changes.
{ 18 / 23 }
Did Hooks make any changes?
React concepts are the same irrelevant of a class component or functional component. Hooks can make the code shorter and they provide a quick and efficient way to combine state, props. lifecycle etc...
{ 19 / 23 }
React concepts are the same irrelevant of a class component or functional component. Hooks can make the code shorter and they provide a quick and efficient way to combine state, props. lifecycle etc...
{ 19 / 23 }
Some points to consider while working with hooks!
- Don’t call Hooks inside loops, conditions, or nested functions
- Call hooks from React function components
{ 20 / 23 }
- Don’t call Hooks inside loops, conditions, or nested functions
- Call hooks from React function components
{ 20 / 23 }
Here is the complete guide to widely use state in React
{ 21 / 23 }
{ 21 / 23 }
The useEffect hook:
{ 22 / 23 }
{ 22 / 23 }
The useReducer hook:
{ 23 / 23 }
{ 23 / 23 }
With that being said, this is the end of this thread.
Wait!!
50% on my new eBook and 1-1 session
⚡ free50 ⚡
🔗 gum.co
Wait!!
50% on my new eBook and 1-1 session
⚡ free50 ⚡
🔗 gum.co
Loading suggestions...