React javascript framework
- Introduction to React Javascript
- In-Depth into React
- Advanced React Concepts
Introduction to React Javascript
Understanding React Components and Props
High-level programming language.
React is all about components. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This article will guide you through the understanding of React components and props.
Understanding Components
In React, components are the building blocks of any React application. A component is a self-contained piece of code that manages its own content, presentation, and behavior. They are like JavaScript functions, they accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
There are two types of components in React:
-
Functional Components: These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function.
-
Class Components: These are more complex features. They are ES6 classes. In addition to rendering HTML, class components have other features such as local state and lifecycle hooks.
Props in React
Props is short for properties. In React, data is passed from parent components down to child components through props. Props are read-only. Whether you declare a component as a function or a class, it must never modify its own props.
Stateful and Stateless Components
Components can be stateful or stateless.
-
Stateful Components: These are always class components. Stateful components have a state that gets initialized in the constructor. This state is private to the component and can be changed by invoking the
this.setState()function. -
Stateless Components: These can be either functional or class components. Stateless components do not have their own state. They receive data from the parent component in the form of props.
Component Lifecycle
Each component in React has a lifecycle which you can monitor and manipulate during its three main phases: Mounting, Updating, and Unmounting.
-
Mounting: The phase in which the component is being created and inserted into the DOM.
-
Updating: The phase in which the component is being re-rendered as a result of changes to either its props or state.
-
Unmounting: The phase in which the component is being removed from the DOM.
By understanding components and props in React, you can start to build more complex applications with reusable and independent pieces.