Some important topics in React

Photo by Tudor Baciu on Unsplash

I have been using react for few month. I am enjoying this library of JavaScript so much. I have noticed some important topics about react after reading many articles in various sites. Today I want to share with you some basic important topics about react js with you here.

Components: Components are building of blocks in react app. There can be many components in one react app. It’s an independent and bits of code which is reusable. While creating a react app the components must be start with uppercase letter.

Types: There are 2 types of react components. They are -

(i) Class component: This component have to include extends React.Component statement. this statement create an inheritance to React.Component and gives your component an access to your React.Component’s function . This function requires an render() method which returns HTML. Example:

Class Component

(ii) Function Component : This component is pretty much same behavior like class component but here in this component there are function instead of classes. It also returns HTML . Example:

Function Component

Props: Props is a special keyword which is the short form of properties. props are passed as arguments from one component to another. It’s data is only read only which means it only can be received from parent component but can’t be changed by child component. Example-

Props in React

JSX: JSX stands for JavaScript XML. It allows us to write HTML in react. JSX is not mandatory in react. What can be do with JSX also can be done with plain JavaScript in react. Example-

JSX in react

State: State is a JavaScript Object where dynamic data can be stored when it’s changed or modified . When the state objects change, the components re-renders. React components has a built-in state object. Example -

React State

After knowing about some awesome features about the react we can think react is framework but it’s not. React is just a JavaScript library. We know framework is a big thing but library is a small thing.

Front End Engineer | JavaScript Developer