React.js- Introduction to react -L0

JavascriptMaster
3 min readOct 8, 2022

--

React Logo

Why React.js?

I think if you are reading this , you are either working in web development with HTML, CSS, and JavaScript or you are a newbie who just wants to learn web development. So if you are learning web development for the first time , it’s okay to know why you are learning about React, what the alternatives to React.js are, and what the previous technology people were using before React .

So slowly, I am coming to the point. Before 2013, people were using HTML. It does’nt mean that people at this time are doing HTML. HTML and JavaScript were used to build the user interfaces and dynamic features of the website .

What were the shortcomings of the old structure?

1HTML is a static language that is not able to produce dynamic output. I am explaining this using an example .

Now see, if you have to create only 2 or 3 rows, it’s okay to use this, but if you have to create multiple rows , it will be repetitive work .

2Now think: you have 100 files with the structure of a table. One table has 10,000 rows, and you have to add one row to each table at the 5361st place . As a result, this will take more time, and the chances of error are higher. If you really want to learn , just do this one time . I am kidding , don’t do this . This stunt cannot be performed without expert supervision. So you’ve learned that editing in HTML is expensive.

3And the third thing is if you want to use two tables in the same file and want to give the same column names and same rows . You have to write the same table again . So the code-reusability is missing .

What is SPA and Why it is important?

SPA means single-page application. I know you thought of something else . You use www.youtube.com every day, and if you’re reading this, you’re also using https://www.w3schools.com/.

Favicon -> An icon associated with a particular website is typically displayed in the address bar of a browser accessing the site or next to the site name in a user’s list of bookmarks.

Now , if any page has associated links and you click the same , the favicon is replaced with a loading icon or browser default-icon. In the case of YouTube, it’s not replaced because YouTube is not redirecting to any other page , it’s just changing the content on the same page . And have you noticed the content of the address bar has also changed?

Now you can explain what the SPA is in a better way.

A single-page application loads a single page and changes the contents of the body by XYZ.

What is this, XYZ?

So now we have to dig deeper. We have to know about the DOM (Document Object Model).

--

--

JavascriptMaster

Hi, I'm a software engineer with a passion for writing about programming languages, particularly Python and JavaScript.