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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Angular 12 warning about IE11 after update, but why?

React for ones who know a little already 🌜

Why don’t we use HTML to author web components?

React: render optimization for Material UI collapsible list using Hooks and Memo.

Serving Apple App Site Association file using Nginx for React Apps

How I created a Photo Booth with AWS Serverless

Switch Rollup from Webpack

Hide Endpoints in Swagger-UI for Unauthenticated Users

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mowmita Ahmed

Mowmita Ahmed

Front End Engineer | JavaScript Developer

More from Medium

Dynamic Routing in React using React Router DOMv.6

What’s the difference between Static Site, Client Side and Server Side Rendering

Introduction to React

Understanding React Lifecycles