Introduction to React and Components

Component Based Architecture

A component is a bit of code that returns an HTML element, it is close to functions but it has the following charecteristics:

1. Reusable.

2. Replaceable.

3. Does not depend on context.

4. Extinsible

5. Encapsulated.

6. Independent.

Proper usage of components will give the ability to easily replace older component with a newer one, reduce the cost of development and maintainance, reuse where needed, and increase system reliability.

For more information see tutorialspoint, Component-Based Architecture

What is Props and How to Use it in React?

Props stands for properties, it is used to control the flow of data from one component to another, keeping in mind that data flow in one direction (parent to child) and is read-only i.e will not be changed by children.

The use of Props include 3 major stages:

1. Defining attributes and data: similar to defining atrributes and assigining values for HTML tags.

2. Passing data: similar to passing arguments to a function.

3. Render Prop data: which is invoked using dot nottion like objects.

Here is an example from W3schools.