React for Absolute Noobs: A 7 day guide

#react #webdev #beginners #javascript

I've been planning to learn react for a while, but I had been pushing it back for way too long. 😫

So I've decided that over the course of the next 7 days, I will:
a) Learn React at an Intermediate level
b) Document my learning, and hopefully encourage others who have been procrastinating, to learn along with me.

I plan to write about whatever I learn and try to explain it as lucidly as possible. Hopefully, if everything goes as planned, I will have 7 articles by the end of this week.

But first, what encouraged me to learn React?

a) It is scalable. Apps like Instagram and Netflix are built on top of React.
b) It has a huge demand in the job market. Everyone wants to hire React devs. Also, Angular development is going at a much slower pace than a couple of years ago.
c) I've read that it makes it easier to design highly complex dynamic apps which would usually be a pain in the butt(Sorry, Captain!) with normal HTML+JS. There's no way to know unless I dive deep into it 😉

Let's look at the basics!

Components

Components are the heart of React. Every element that you see in a web page can be represented as a component in React.
Look at this screenshot of the DEV home page.

Each of the posts is a component. The title of the post and the description, the icons inside the post component -- each a component.
The search bar is a component, the icons on the top right are all components. You get the idea!

State

State in React refers to the data. Talking about a component's state means simply talking about the data which is local to the state. The state may also refer to the UI-state.

Virtual DOM

If you've read some HTML/JS fundamentals, you've heard about DOM. It refers to the Document Object Model, which is essentially a tree like representation of HTML where nodes represent HTML elements.

React has something known as a virtual DOM. Now, whenever we make changes to a component, instead of rebuilding the entire virtual DOM, React just does a diff and only updates the components(and it's child components) where changes were made. This property is what lends to React the speed it has even while being complex.

Hello World! 👩‍💻

With a few basics out of the way, let's make a starter application using React. React does have a CLI, but since most people are familiar with script imports, we will import React from a CDN.
We'll look at how to do the same thing with the React CLI, a little later in this series.

For now, create a file index.html and open it in your favorite code editor.
I run things on VSCode and if you use it too, install a couple of extensions:
a) React Snippets -- for syntax highlighting, auto-complete and a lot more
b) Live Server -- to spin up a local server which will aid in fast development

I'm going to show you the code for now. Don't worry if some things don't make sense, I'll explain everything in a bit.

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class App extends React.Component{
                render() {
                    return (
                        <div>
                            <h1>Hi, I am Karan. React is ezpz!</h1>
                        </div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>

Apart from the familiar HTML syntax, here are a few things to learn from this:🕵️‍♂️🕵️‍♂️

a) The first 2 script imports are for the core react library and the react-dom library(which handles the virtual DOM)

b) To declare a React Component, we need to instantiate a class which extends React.Component. This class must have a render() function, and the render function must return exactly one element (which is the <div> in this case).

c) But wait a second, how tf are we writing HTML inside the <script> tag? Well, it's not HTML, but a look-alike called JSX. JSX allows us to write familiar HTML-like code inside JavaScript.

d) The browser doesn't recognize JSX by default. This is the reason why we need the third import-- for Babel. Babel is a transpiler which basically converts the JSX into something the browser would understand. Also, another modification to work with Babel is that the script type has to be changed to 'text/babel'.

e) Finally, we need to tell the React DOM to render the function to the webpage. This render() function is not the same as the one in b). They are both from separate libraries, react and react-dom. This one takes 2 arguments, what to render and then where to render.

We reference the class App we created by using the <App /> self-closing tag. If our component was called SomeComponentName, we would use <SomeComponentName \>. The second argument tells it, that we want to render it to the div tag with id=app.

To see if this works, write down the snippet above in your editor and if you're using VSCode, you can right click on the code screen and click on Open with Live Server if you have the Live Server extension installed. You should see the following.

Hopefully you got the same output.

Adding State

Adding state to our component is as simple as creating an object named state inside our class.

state = {
    name: 'Karan',
}

Once that is done, we need to be able to access the state from within JSX. Now, to use JavaScript statements inside JSX we need to enclose them in braces.
Something like, {this.state.name}

This is how the entire code snippet looks like now:

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class App extends React.Component{
                state = {
                    name: 'Karan',
                }
                render() {
                    return (
                        <div>
                            <h1>My name is {this.state.name}. I just made a react app!</h1>
                            <h1>I can even execute normal JS stuff inside braces like {Math.ceil(9.3)}</h1>
                        </div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>

Load the page up in a browser to see how it looks.

Nested Components

Nested Components are exactly what the name implies. They are children nested inside parent components. They help us design more complex components. To create and use a nested component, just declare a new Class and put it anywhere inside the parent component.

In the following snippet, I created a new component named Nested and put it in between the <h1> tags of the App component(which acts as the parent component).

<html>
    <head>
        <title>Time to React</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>   
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            class Nested extends React.Component{
                render() {
                    return (
                        <div>
                            <h6> I am wild nested component </h6>
                        </ div>
                    )
                }
            }
            class App extends React.Component{
                state = {
                    name: 'Karan',
                }
                render() {
                    return (
                        <div>
                            <h1>My name is {this.state.name}. I just made a react app!</h1>
                            <Nested />
                            <h1>I can even execute normal JS stuff inside braces like {Math.ceil(9.3)}</h1>
                        </ div>
                    )
                }
            }
            ReactDOM.render(<App/>, document.getElementById('app'));
        </script>
    </body>
</html>

The page should finally look like:

YES! Together, we've successfully learned the absolute basics of React.
But wait! You thought I'd let you go without any homework? 🙅‍♀️🙅‍♀️
Here's what you have to do:
--> You have to design a Facebook post component.
--> Here it is for reference
--> Make sure you understand the hierarchy and design the sub-components accordingly.

The next article will probably be up by tomorrow.
This is my first time writing on DEV so if you liked it, please do tell me!

And if you're feeling absolutely generous, follow me on Twitter!

See you tomorrow 😉