Getting Started with React

If this is your first sneak peek in React, I must say, React is magic!

Wanna know more? no worries. Get ready to focus and grab the basic concept of React. React most certainly comes with a lot of benefits.

Do you know world-famous companies such as,

#1. Facebook

#2.Instagram

#3.Whatsapp

#4.Netflix

are using react to develop their software. Wanna know why? then let’s dive into react.

What is react?

Designed by Jordan Walke. First deployed on Facebook’s newsfeed in 2011. Open-sourced at JSConf US in May 2013.

As defined in the react website,

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

It is also known as ReactJS and React.js.

Don’t worry if you didn’t understand what all the above different terms meant. Let’s try to elaborate more on those terms.

React is a JavaScript library;

A JavaScript library contains already written code to perform specific functions. React also comes with such prepackaged code that we can use to make views for the user interfaces of a web application.

React uses a declarative approach;

in the declarative approach, the programmer simply specifies what needs to be accomplished and leaves it up to the framework to decide how the work is going to be accomplished.

Let’s look at a simple real-world example to understand the above concept:

Declarative: “I want to read a book”

Imperative: “Get in the car. Drive down to the library. Find the book and read”

as in the above example, in the programming world also, declarative programming only specifies what needs to be done whilst the imperative approach specifies what are the steps to perform that specific task as well.

A declarative approach makes it easier to illustrate what the code wants to do. Hence makes it easier to debug the program.

That’s not it. Let’s look at some more features of react,

Based on components :

React is all about its components!

– A component can be a function or a javascript class

A class component has an object called state to store the property values of the component.

function component

Both function and class components get inputs through props, passed into it through the component’s constructor.

– A component returns React elements that should appear on the screen

– Components enable you to split your UI into independent, reusable pieces

Reusable components are one of the biggest advantages of React. We can use the same component to render several similar views on a web page.

consider a restaurant with different menu items.

To show each of these menu items on the page, similar types of tiles are needed. So wouldn’t it take a huge amount of coding to do that? It certainly will end up with code redundancy and will be time consuming.

This is the time when the reusable components come to the stage to glow.

As you can see in the above code example, you can render similar types of items by reusing the same react component.

Virtual Dom:

You might have heard the word HTML DOM (Document Object Model). let’s have a look at it first.

HTML DOM takes HTML elements as objects and creates a tree of those objects. Then using those objects’ properties, methods, and events browser can handle the DOM of a web page.

HTML DOM

Then what is virtual DOM?

React maintains a separate DOM for itself. That is called a virtual DOM as it is not the real DOM. So when the state of our React web page changes, the virtual DOM gets updated instead of the browser DOM. Therefore, later react will do the changes to the real DOM in the best possible way.

virtual DOM

Use of JSX(Javascript XML):

Simply, JSX allows us to write HTML code in React and place them in the DOM. It is not essential to use JSX in react, but it will make dealing with React a lot easier and interesting.

JSX code

Create single page applications:

did you know that in the modern web developing world single page applications are trending?

wait! What is a single page application? 😮

A single page application is a single page written in HTML where only part of UI is changing while some parts of the web page remain the same. This means when you want to change the view of the page it does not reload the whole page but only a needed part of the page is loaded.

With react we can easily create single page applications and toggle between different views when needed. (home page, aboutus page etc.) Switching between different views is really fast in react and requires no page loading.

You’ll understand more about the above concepts when you start to interact with react! 😎

Now, let’s get to know how to set up React environment on your computer.

before starting to code, you have to set up the React environment on your computer to create a simple react-app.

First, go to your terminal and type,

npx create-react-app my-app

then, to go into the react-app folder, type

cd my-app

now to run the react app, type

npm start

Now a new browser window will open up with your new react application running on it.

Now, you are all set to go and develop your program on React!

You came this far reading the article? you really wanna start programming with react now? Don’t stop ❗️ because this is just the beginning! Try React and you’ll see the wonder! 😍

Let’s create a simple react-app in another article!!