React Basic concept

3 min readMay 7, 2021

React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution.

#Creat React Application

install: npx install create-react-app my-app

cd my-app

npm start

Your application is ready to build.

#Components

A React component can be either “stateful” or “stateless.”

“Stateful” components are of the class type, while “stateless” components are of the function type.

Functional Components Example:

Calss Components Example:

#Props

Props are an optional input, and can be used to send data to the component. They are immutable properties, which makes them read-only. This also makes them come in handy when you want to display fixed values.

Example:

#JSX Syntax

JSX is a syntax extension of JavaScript. It’s used to create DOM elements which are then rendered in the React DOM. A JavaScript file containing JSX will have to be compiled before it reaches a web browser.

Example:

#Default-Props

We know Parent components pass props and child components receive these props.

Example:

What happens if the parent component doesn’t pass any attributes to the child component?

Example:

To solve this problem we can use default props.

It can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. For example:

How it is used. Let's see an example:

#prop-types

when an invalid value is provided for a prop, a warning will be shown in the Javascript console. For performance reasons, propType is only checked in development mode.

Install:

npm install prop-types

To Run type checking on the props for components, you can assign the special propTypes property.

Example: