React Component

it is a small features which make a peice of the UI

The architecture of Reactjs is component-based. In other words, the UI of a React-based in web application is divided into multiple components. Each component has its own specific logic. The logic is written in JavaScript instead of using templates.

why do we use React

• Speed and efficiency
• Flexibility
• Performance
• Rich toolset

What are the characteristics of a component?

• Virtual DOM

Virtual DOM is one of the chief characteristics that facilitate fast and flexible application development using Reactjs.

• JSX

JSX stands for JavaScript XML. It is a markup syntax that is very similar to HTML and is used to describe the appearance of an application’s UI.JSX is one of the best features that Reactjs has to offer. It makes the syntax, used by developers to create React components, almost identical to the HTML they will inject in the web page.

• One-way data binding

One of the major reasons why you should choose Reactjs for your next project is its one-way data flow. Reactjs uses a unidirectional data flow. Meaning, the developers cannot edit any component directly. They have to utilize the callback function in order to make changes in the components.

• React native

React Native is a custom renderer for Reactjs. Instead of using web components, React Native uses native components.

• Declarative UI

In an event of data modification, Reactjs adequately renders and updates just the right components. It generates a simple view for each state of the application. This feature makes the code more readable and simpler to debug.

• Component-based architecture

The architecture of Reactjs is component-based. In other words, the UI of a React-based mobile or web application is divided into multiple components. Each component has its own specific logic. The logic is written in JavaScript instead of using templates. This enables Reactjs developers to pass the data throughout the application without affecting the DOM.

What are the advantages of using component based architecture?

• Reusability − Components are usually designed to be reused in different situations in different applications. However, some components may be designed for a specific task

• Replaceable − Components may be freely substituted with other similar components.

• Extensible − A component can be extended from existing components to provide new behavior.

• Encapsulated − A A component depicts the interfaces, which allow the caller to use its functionality, and do not expose details of the internal processes or any internal variables or state.

• Independent − Components are designed to have minimal dependencies on other components.

props

“Props” is a special keyword in React, which stands for properties To send props into a component, use the same syntax as HTML attributes

the following picture explain how the data flows between the parent and the child component