Getting Started With Reactjs - For Complete Newbie

Getting Started with reactjs for a beginner might be an herculean task, especially if you're not yet sound in basic fundamentals of JavaScript before moving to react, or probably the react way of thinking might be a little difference in the conventional way of updating the DOM in Javascript. However the case may be. When you get the hang of it, it actually more beautiful to use. Enough talking let's get to the react itself.

Fundamentally reactjs works by updating the virtual DOM, now the question what's a virtual dom, according the react official documentation, The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

This means reactjs works by creating a snapshot of the current UI of the DOM, whenever something changes in the application, it compares with to each other if there's difference it updates according. The major shift in paradigm of updating the DOM with this approach is basically,

• updating the DOM is an expensive operation. Imagine you have hundreds of stuffs to update on the screen using a vanilla JS to do this, will not only be cumbersome to do, but also expensive that's where reactjs begins to shine.

• With Reactjs you can do much more with less code.

There are many more benefits of using reactjs, maintainability, scalable etc. But the two mentioned are just too obvious not to begin to learn Rectjs asap.

Let's begin with a simple counter app to kick start the journey of our react, we will be building a simple counter that increases and/or decreases the output number,

We'll be using the react hooks to get this done, instead of the class based components more on this later.

Let's start by installing our react app for this project, we'll be using the create react app boilerplate:
make sure you have node installed on your machine, if you don't download the latest version here
to confirm everything is good to go, do node --version via your terminal it should returned something shown below.

• npx create-react-app my-app

• cd my-app

• npm start

Be sure to clear the dafault text and images that comes loaded with the create-react-app.

Navigate to your App.js file and type in the code below.

import React, { useState} from 'react';
import { render } from 'react-dom';

import './style.css';

function App () {
const [count, setCount] = useState (0)

let increaseCount =()=>{
  setCount(count + 1);
}
let decreaseCount =()=>{
  setCount(count - 1);
}

    return (
      <div className = 'counter-div'>
      <h1>{count} </h1>
      <br />
      <button onClick ={increaseCount}>+ </button>
      <button onClick ={decreaseCount}> - </button>

      </div>
    );

}

render(<App />, document.getElementById('root'));

Here's the live app link here

In the next series we'll be exploring what does UseState actually do behind the screen, other type of hooks we can use in our react apps like

• UseEffect
• useEffectLayout
• UseCallback
• UseMemo
• UseRef
• how to do conditional rendering in react
• Fetching data from an API
• A Medium size project, An Online Book Search App, to cement our knowledge.

I'm excited on this journey, stay tuned for another post of the reactjs series.