Discover the World Of Coding

ReactJs

ReactJs Complete Guide(Basic to Advance) Section 1 Part 1- Introduction

Hello everyone, welcome to my ReactJs course, so let’s start with What is ReactJs?

What is ReactJs?(Introduction,History,Competitors)

ReactJS is a JavaScript library designed to construct rapid and engaging user interfaces. ReactJS serves as a JavaScript library aimed at constructing responsive and dynamic user interfaces with exceptional speed and interactivity, making it an ideal choice for enhancing the overall user experience on web applications. It was developed by Facebook in 2011. Currently, it is the most famous library for building user interfaces and as you can see in the image below that React is way ahead of its major competitors which are Angular and VueJs.

Competitors of ReactJs

Components: The Building Blocks

The Entire React application can be modeled as a set of independent isolated and reusable components, these components are put together to design complex layouts you can say components are building blocks of a React application.

Suppose you have a Web Page, you can split it into components:- e.g:Top bar, AdSection, and Places Grid

Components: The Building Blocks

Now these were at the Top Level even at the Top Bar you can have more components e.g:- Logo, MenuItem, User Avatar, Search Bar and much more

React App Structure

In each React app, a minimum of one component pertains to the app itself. This central component, known as the “App” component, serves as the embodiment of the entire React application. It serves as a container for housing all other individual components, thereby giving rise to a hierarchical arrangement resembling a tree-like structure. This structure represents the organizational hierarchy of components within the app, contributing to the efficient management of the user interface.

If you attempt to establish a hierarchy for the structure of a present web page, it will manifest as follows. Positioned at the Top is the “App.js” component, succeeded by the “TopBar,” “PlacesGrid,” and the “Ad Section” components in descending order. This arrangement delineates the composition of the web page’s layout as you can see in the image below ↓

React App Structure

Under the TopBar we got Logo, some MenuItems, Avatar and something else that you want you can add. Similarly, under the Places Grid you can have Place Cards, and inside it you can place Thumbnails, Titles etc. See the Flow chart below ↓ to understand easily

React App StructureWhy is React More Famous And Ahead Of Its Competitors?

If you remember that I mentioned earlier that React functions as a focused library, primarily dedicated to crafting user interfaces, often referred to as views. This is where react becomes more amazing, it gives you absolute control of your application it just takes care of the view and rests everything is left for you to decide you can plan the architecture decide what libraries to use for which functionalities, etc you can also add react app in parts of existing web applications because it is just for the view and it does not disturb you existing technology stack and this is one biggest difference between angular and react angular is a framework and it comes with the out of the box solutions for routing and network requests, etc

Top Sites That Are Written In React

A lot of Top sites such as Facebook, Prime Video, Netflix, Instagram, Twitter and many many more are written in React which also shows the importance of it

Top sites written on react

This was all from the ReactJs Complete guide Section-1 Part-1 Introduction to ReactJs

To view the next part CLICK HERE and we will upload the whole guide of it on our website, so you can visit our site to get its complete guide

If you have any doubts or questions, feel free to ask in the comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *