10 Important things you need to know about react.
In this article, I wanna discuss 10 important things about react. You know react is the most popular open-source JavaScript library which use to build UI (user interface) easily. So without wasting any more time let’s start…
1. React is all about components.
In react, everything is a component. You can re-use a code through react component. That means you can use a component much more time like the below example. Where we use the Blog component three times.
If you use a component that has a child, Then you must use a close tag like the below example.
<Blog><h1>This is header<h1></Blog>
But, If you use a component that has no child. Then you don’t need to use a close tag like the above example. Here you can use a self-closing tag like the below example
<Blog/>
2. JSX
JSX is syntax like HTML/XML . We can use HTML in javaScript through it. It also allows us to write HTML in react. In normal cases, we can’t use HTML easily in react. If we wanna use HTML it reacts we should use some method like createElement() or appendChild(). But now we don’t need those methods, cause we can write HTML code easily through JSX.
In the above picture, we can see some code Tag like HTML but those are not HTML tags those are JSX. Now you can see how easily we write HTML code in react through JSX.
3. JavaScript Expressions
You can use JavaScript expressions in JSX by using pair of curly brackets.
In the above picture, you can see we use javascript expression by using pair of curly brackets.
4. Conditional Rendering
Sometimes we need conditional rendering in react. In javaScript, we doing conditional rendering by if/else statement. But in react we can’t use regular if/else statement. We need to use it through the ternary operator like the below example.
In the above example, we use conditional rendering which is, If isLoggedIn is true then the user can show <services/> page else user will show <Login/> page.
5. Props
Props is a special keyword in React Which used for passing data from a component to another component. We can pass data by any name and then we can receive those data using the props keyword.
In the above picture, you can see that we declare a variable which name is quoteBar and we pass this a variable in component2 by quote name you can use any name ( it should be a meaningful name and it will enhance your code readability). And we receive this by props.quote you can also receive it by code destructuring.
6. DefaultProps
DefaultProps use to set the default values in props. In some cases, like when we use props to pass an input value a component to another component. That times we don’t know input value has or not. In this case, if the input value hasn’t then if you can try to access the value of props then it shows us undefined. To prevent this some times we need to use default props. But not every case. For example:
You can also set default props using || or operator :
You can also set default props using =, Let’s see in below :
So, there are three ways to set default props in your application. You can use any way of them that depending on your team your organization which way is best.
7. Hooks
Hooks are called special functions. All Hooks names start by use keywords like useState, useEffect, etc. They are used for different purposes like useState used to manage data for stateful components. UseEffect used to manage side effects. For example:
In this example, we need to manage our count value so that time we manage it easily by using useState.
8. Multiple components
You know react is all about components. Sometimes we need to use multiple components. That time we handle it by threeway
- return ([<Component1/>, <Button/>]);
This is a good solution, but if you need to return multiple components more than 3 or 4 components that's way is not a perfect way to return multiple components.
2.
This is a second way to return multiple components. You can pass multiple components by wrapping a div.
3. React has a special JSX extension. <React.Fragment> we can use it to return multiple components without creating an extra parent div. For example:
we can also use empty <></> tag instead of <React.Fragment>. Like the below example.
9. Events
In react we need an event handler. And we can use it, suppose we wanna use onclick handler on a button. But in react we can’t use this onclick handler like this. We must use it on camel case onClick. For example:
All react elements attribute using camelCase. Rather than lowercase. That's why here we use onClick, instead of onclick.
10. UseEffect
We know about useEffect . It is one of the most important hooks in react. It’s used to manage side effects. For example:
In the above example. You can see we load data from an API by blocName and also we use a dependency blocName. Cause, if blocName name will be changed we need to load new data in our UI. And these things useEffect manage very efficiently.
So Finally, I hope that these 10 concepts help you to gain little knowledge about react. keep learning best wishes to you.
Happy Coding :)
