React Basics | Part - 1

Heyyo fellow developers! I planned on starting a React basics blog post series for all of you in the developer community who wants to get a taste of React. Let's do this!

Level - Beginner
Requirements - A good understanding of JavaScript functions and Classes

What is React and why? 🤔
Simply speaking, React is a JavaScript library which allows you to build fast and reusable web frontends. Just like any other libraries in JavaScript - let's say, JQuery(simplifies DOM manipulation in JavaScript) or Lodash(used to write more concise and maintainable JavaScript) - React can be simply imported into your JS file and can be used to render dynamic content into your browser.

Why should I use React? Straight answer, it's easy!

Let me explain. Let's take an example of a project in which you are asked to build a simple e-cart system. You can add products to the cart, remove them, increase or decrease the quantity and also display the correct total amount too. When implementing the old school methods of building web apps, the data of every product in the cart can be stored in a database and we can do all the CRUD(Create, Read, Update, Delete) functionalities on the data. The catch is that, if you need to display this updated data into the browser the whole page needs to be refreshed and then only the latest data can be presented. React solved this by giving local variables to parts of a webpage and each part of the webpage has access to their local variables and React can update the data in the browser - if the variable values are changed - without refreshing the page. This is just one example of React use case, there is a lot of reasons why React is a great choice.

NOTE
This same functionality can be accomplished using regular DOM manipulation methods, but React lays out all the backbone functionalities so you can just get started with your project right away. Not only React but other techs such as Angular or Vue are also capable of this.

Before getting into the fun of codes. Let's understand some theories of React.

React works in a component based structure. Each part of a webpage can be broken down into small components and different components can be stacked together to form a webpage. The advantage of this structure is that, these components can be reused in other webpages too.

We can define variables for a component whose values can be inserted into HTML templates. When these variable values are changed or updated, React works to re-render only the parts of the webpage that has the variable called. These type of components are called stateful components in React.

Let us revisit the e-cart example. You can separate each product in a cart into different components and give each component some local variables such as quantity, price and product_name. Now in this component, we can write the HTML template and the css stylings only for this component.
We can call these variable inside the HTML to replace itself with their values. First lets take a look at the component.

In the above image we can see a Product component. The variable name in curly braces will be replaced by their respective values. Let us say if we need to increase quantity, we can just add one to the variable quantity and reassign the variable. React will update the HTML without any refreshing.

There are 2 types of components in React, function based and class based components. A function based component is not stateful by default but React hooks can be used to make it stateful(we will be learning about hooks in later blogs). Let us see an example of these components.

// Function based components
function App() {
    return <h1> Hello, world!</h1>;
}

// Class based components
class App extends React.Component {
    render () {
        return <h1> Hello, world!</h1>;
    }
}

You might have noticed the weird HTML tags in JavaScript code. This is a special type of language extension for React components called JSX. JSX is transpiled using babel and executed by React to display these HTML content onto the browser. If we run this application, we will able to see Hello, world! in the browser correctly rendered as an h1 element.

In the upcoming sections we will slowly build an e-cart webapp while learning the magic of JavaScript and React! Stay tuned.

Thanks for your time. 😊

Part 2 -->