React was created by Jordan Walk and it is a popular open-source JS library. Developers mainly use it for creating User Interfaces of single page applications. Though it can be used in the process of website making.
Not only this, joining React JS course in Delhi, is also useful as it can handle the view layer of web and mobile applications.
It is developed by Facebook and it is known for its virtual DOM features. Babel is a JavaScript compiler that converts programming and markup languages into JavaScript.
Now in this blog, we will learn about the components in React and their practical implementation.
Benefits of using Reactjs:–
- It makes JavaScript’s code easier.
- It provides reusable components so that the developers have the authority to reuse those components to create a new one.
- It is a perfect combination of js and html tages.
- It also handles all the dependencies.
About Components
There are two types of components in reactjs, one is class component and other one is function component.
A component is a piece of code which we can reuse in our program.
It is independent and also saves time.
All the application developed in react are made of pieces of code called components.
Each component has its own structure methods and API’s.
- Function Component-
This is the first recommended component type in react.
When a function is used inside a component, it is a called a function component. It has its own limitation and benefits.
It is very simple to use an event method inside a function. Suppose if we want to use an event in the function component, then we will use that event method on any tag inside a return and declare that event before return.
Function component doesn’t have scope of (this) keyword.
In the function component, the state is used with the help of hook methods.
Everything in react is a component, whenever a component is created in the file its first letter is always capital.
If we are creating a website, instead of writing its code in a single component, we create different components for its content. And then in one main component file or app.js itself, we import all our components.
This will make our code look very simple and effective.
Function components are much easier for reading and testing, because it has plain javascript without any hooks and life cycle methods.
Before hooks, the function component was just a render method. In this case, if we want to use state, ref,or any logic at lifecycle events like mount then we need to take help from class syntax.
It accepts props as an argument and returns a react element
Here is an example of fucntion component—————
- Create a component called Welcome.
Function Welcome (props) {
return <h1>Hello, {props.name}</h1>
}
Export default Welcome;
- Now, call this component in App.js file
Import Welcome from ‘./Welcome’;
function App () {
return (
<div className = App>
<Welcome/>
)
};
- Class Component –
The class component is a very old method. The class extends from react component.
The react lifecycle method can be easily used inside a class component.
To access the state inside a class component (this.state) is used which is inside a constructor.
It is also called stateful component.
After passing the props to the class component, it is access by ths.props.
Here is an example of Class component—————
class Car extends React.Component {
constructor() {
super ();
this.state = {color: “black”};
}
Render() {
Return <h2> This is blog</h1>;
}
}
So, this is how components work in React. To know more, you can join web design courses in Delhi and get detailed knowledge related to React.
Also Read-
Counseling questions to ask at web institute
Knowing about ECMAScript 6 (or ES6)
IMPORTANT LANGUAGES TO LEARN IN WEB DESIGN
5 Important Concepts of PHP every Web Developer needs to Know