Learn React with me - Welcome to React

#react #codenewbie #javascript

I heard the best way to learn anything is to teach it and you get to master it. I just began learning React and I feel so late to the party. The only comfort I have is as I share my thoughts, others coming into the React world can navigate easily. Let's shoot!

What is React?

Simply put, React is a Javascript library that is used to create user interfaces.

At first, I didn't get the whole fuss about React because I could just do the exact same thing with HTML, CSS and Javascript. Yes, I could build with these three comfortably but then I didn't know React existed to make my developer life easy.

Why should you even learn React?

React is fast.

Like super fast. It gives users mobile app experience on the web. Click on a button that leads to another page, it just goes to said page in split seconds. It runs on the browser and has nothing to do with a server where you would need to wait for a response except in the cases of API calls.

React is component based.

Now picture this, you're building a food directory website with just HTML and you wrote about 50,000 lines of code for just this one website. You run the code on the browser and boom! You see something shifted. Remember this webpage is made up of 50,000 lines of code. Now, you have to locate that bug. React makes this super easy. It is all about creating custom HTML elements.

Look at it this way, every webpage is made up of components or parts. A simple webpage is made up of a header, sidebar and article sections. Since React is component based, you can easily create a header component that only contains header HTML. Sidebar component that contains only sidebar HTML and article component that contains article HTML.

Now, when all these web pages have been put into components, it becomes easy to locate that bug if it is in any of these components and not have to scroll to find it. We'll learn about custom HTML elements as we go.

React keeps your code maintainable

In normal HTML, it really is hard to write maintainable code, honestly. Do you know in React you actually write your Javascript inside your HTML? Normally, you would need to link a JS script to your HTML page and if it is a huge project, you would need to create multiple JS files for respective pages to avoid code conflicts. With React, you just write your JS inside your component and no need to link a script. So, it is easy to maintain the different parts of the page or files.

There is so much more React actually does. Take these for now and go do further research.

Why was React created?

Let me use this simple illustration. Imagine a painter who of course paints. He paints a beautiful sky on his canvas for a very annoying client who keeps coming back to add new colors to the sky and for each new change, the painting is stressed except he would have to start all over again! I can only imagine.

Let's bring it home, imagine a developer working for a client who comes back every two days to request an update on his webpage, if it's not color, it's the font or just simply add a new button to the sidebar. Now, just so you know, with each update you make to the DOM, the page load time gets slower. Not everyone has the patience for a slow website.

Now enter React, it was created for an issue such as this. React presents to us what we know as a SHADOW DOM or VIRTUAL DOM. With each update to the web page, the DOM gets re-rendered and this makes what it spits to the page you see come slow. React becomes the middleman here. What React does, when you make an update, it renders what you have done on the VIRTUAL DOM (this is React's DOM) and only spits out the change to the main DOM hereby saving the DOM from re-rendering and what you get back is a faster page load. Cool right?

I will leave this here for now for you to brood. Hope it inspires you to take a step to trying React out.

Next time. Ciao.