DEV Community

Cover image for Most Introductory React Blog Ever
Ritvik Dubey
Ritvik Dubey

Posted on

1

Most Introductory React Blog Ever

Hello all👋 I hope you are doing well. As you have read the title you might know what is going to be in this blog but wait, maybe you don't know it or you might find something which you had no idea. So give this short article a quick read.

Story behind writing this blog

A few years ago, when I was asked about react, my answer was that it’s just js. Yes, it is js but what next what it does do? Why is everyone around talking about it?
I was looking for a very elementary article or read about React. But I didn't find anything. And even now I see many of my colleagues or my friends going through the same, so I have decided to write articles on React which help them to initiate their react journey. I'll try my level best to make these articles very easy as I have done with my java or CSS articles.
So in this article, I'll try to give you guys an overview of what actually React is, won't take you to the coding part or tough technical terms will keep it simple and complete it in a few points.
Please add something from your side in the comment section.

Let's begin...

  • React is a JavaScript front-end JavaScript library created by Meta (formerly Facebook). Yes, it is a library, not a framework and Angular is a framework used to create user interfaces.

  • To use React you simply need to install it and create your user interface. Will talk about using it in the next articles, for now just keep in mind that to use it we just install it using a simple command.

  • When we use React it gives us a good mobile-like experience in our web application.

  • When we create our web application using React we do not need to wait for another page to load on clicking over any link, button, or tab.

  • React does not require us to reload the page, the data gets updated on the page itself without reloading it meaning we don't use any reload() method here though there is no such restriction to not use it because at the end it is JavaScript.

  • Web applications created using React are highly interactive and very smooth in usage. Also, the transitions happen here pretty instantly we don't need to wait for a new page to load.

  • In traditional websites with a click, we send a request to the server and the server returns us an HTML page in response, so there we may have some latency and need to wait for the page to load. While in this case, we are running JavaScript in the browser so we can run our logic in the browser which allows us to manipulate what the user sees. It does so using the DOM which is actually an HTML structure. That's why we don't need to request an HTML page to show something different to the user.

  • The main point about React is the declarative component-focused approach. Everything in React is a component. What is a React component? A React component is a block that works like a function, we pass some parameters to it and it returns a React element.

  • Now the question arises what a React element is? So as we all know we have elements in HTML (p, div, body), and using those elements we create the front-end of our applications. Now a React element is used the same way we use HTML elements but these React elements are created by us and those HTML are already created.

  • Now the question arises that how to create React elements? So to create React elements we use JSX. JSX stands for JavaScript XML. A JSX code is basically HTML code inside of JavaScript. We are not required to use JSX but it makes it easier to write React applications. Enough introduction to JSX for now, we will have a separate article on JSX.

  • Now the most important point why we use React is that it uses the SPA approach, Single Page Applications approach. In this approach, no new HTML page is loaded, the server sends the HTML page once thereafter React takes over and controls the UI of the application by manipulating the DOM elements on the existing page. The best example of this is the NetFlix website, you can visit it and observe on your own that no HTML page loading takes place here.
    https://www.netflix.com/

So at the end I would say React is all about building modern reactive user interfaces.

Thank you for reading. See you soon with another elementary article

Please share your thoughts about it and correct me if I'm wrong.

I hope you liked it and found it helpful.

Connect with me on Twitter or LinkedIn

If you like to read about Java or CSS do visit my blog https://dev.to/ritvikdubey27

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay