Components in React
In React, Components are the building blocks which are used to create reusable code of user interface. They can be seen as independent and isolated functions or classes responsible for rendering a part of the UI. In React there are two types of components.
- Functional Components: Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function.
Example:
Javascript
// Functional Component with useState hook const Counter = () => { const [count, setCount] = React.useState(0); const incrementCount = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={incrementCount}>Increment</button> </div> ); }; |
- Class Components: The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can use JavaScript ES6 classes to create class-based components in React.
Example:
Javascript
class Counter extends React.Component { constructor(props) { super (props); this .state = { count: 0 }; } render() { return ( <div> <p>Count: { this .state.count}</p> <button onClick={() => this .setState({ count: this .state.count + 1 })}> Increment </button> </div> ); } } |
Essential things to know as React Developer
React is an open-source JavaScript library used to create user interfaces in a declarative and efficient way. It is a component-based front-end library responsible only for the view layer of a Model View Controller(MVC) architecture. React is used to create modular user interfaces and promotes the development of reusable UI components that display dynamic data. This article covers all the essential topics provided by ReactJS which every developer should know.
Table of Content
- Why we should learn ReactJS
- JSX and its expressions.
- React Virtual DOM
- Props and State in React
- Components in React
- State Management in React
- React Hooks
- Performance
- Lifecycle Methods in React
- Conditional Rendering