React JS for Beginners — The Basics

React JS for Beginners — The Basics

<strong>React JS is today's most popular JavaScript Library for building User Interfaces, which has created by Facebook. We can build modern, fast Single Page Applications or websites with React.</strong>

React JS is today's most popular JavaScript Library for building User Interfaces, which has created by Facebook. We can build modern, fast Single Page Applications or websites with React.

As a Frontend Developer, I know that React JS is very popular among companies in the Software Industry, but we can also see the increase of React JS popularity in the last 5 years, by Google Trends:

Since React is so popular in the market and beneficial to know for a Web/Frontend Developer, I decided to cover some features of React JS in my following articles, as 3 parts for now:

  • Part 1: React JS for Beginners — The Basics (currently you’re reading)
  • Part 2: React Props vs. State
  • Part 3: React Component Lifecycle
Important: Before learning React, you need to know JavaScript (and ES6 Features)

Is React JS a Library or a Framework?

This is one of the most unclear subjects of React. Let’s make this clear from the beginning. React is a Library, not a Framework.

What is a Library?

A library in programming can be explained as a collection of codes. We use a library to write code in a much simpler way or to import a feature from it into our project. JQuery is a library for example.

We can write JavaScript much simpler by using JQuery, or we can import written JQuery features to our project. The project itself is not dependent on a library.

What is a Framework?

A Framework, on the other hand, is a complete package of code with its own functionalities & libraries. A Framework has its own rules, you don’t have much flexibility and the project is dependent on the Framework you use. Angular is an example of a framework.

So React is for building User Interfaces, and how you program the rest of the project is up to you. Like JQuery, you can include React in your project partially, or completely. So React JS a library.

Now let’s move on with how React actually works…

React Virtual DOM

To understand the importance of React Virtual DOM, first, you need to know what DOM (Document Object Model)is.

DOM is basically the representation of the HTML code in a webpage. The document is the webpage itself, the objects are the HTML tags. And finally, the model of DOM is a tree structure:

You can read more about DOM here.

What is the benefit of Virtual DOM?

Each time you make a change in the code, DOM will be completely updated and rewritten. This is an expensive operation and consumes lots of time. In this point, React provides a solution: The Virtual DOM.

So when something changes:

  • React first creates an exact copy of the DOM
  • Then React figures out which part is new and only updates that specific part in the Virtual DOM
  • Finally, React copies only the new parts of the Virtual DOM to the actual DOM, rather than completely rewriting it.

This approach makes a webpage much faster than a standard webpage. That’s also one of the reasons why React is so popular.

React’s Core Syntax: JSX

In classic Frontend programming, we have separated HTML, CSS and JS file structures. React is a bit different. We don’t have separated HTML files in React.

In JSX syntax, we write HTML tags inside JavaScript.


Exactly :) In React, for example, a simple JavaScript variable can be like this:

const element = <h1>Hello!</h1>;

Normally, we can’t assign an HTML tag to a JavaScript variable. But with JSX, we can. The code above you see is neither HTML nor JavaScript. It’s an example of JSX.

So what is this JSX?

JSX (JavaScript XML) is a syntax extension to JavaScript used by React. JSX is basically used to write HTML tags inside JavaScript. Later, the JSX code will be translated into normal JavaScript, by Babel.

In summary, React doesn’t have HTML files, HTML tags are rendered directly inside JavaScript. This approach makes React faster.

Do I have to work with JSX?

You don’t have to use JSX with React, but it is strongly recommended. JSX simplifies React and makes it easier to read. Let me give an example of React code with and without JSX.

React with JSX:

Let me shortly explain the code here. We have a React class named “Hello”. This is a default React class with its render function. The class returns an HTML div element so it can be rendered later as a component, anywhere in your project.

Below the class, there is a special React DOM Render function which is calling the Hello class, as a component ()and specifies where (root) your React code will be printed.

React without JSX:

And here is the same React code as JavaScript but without JSX. Which one is easier for you?

Some important rules about JSX:

  • We can’t return more than one HTML element at once, but we can wrap the elements inside a parent HTML tag:
class Test extends React.Component {
  render() {
    return (

We can use JSX inside for loops, if-else cases:

render() {
    if(condition==true) {
        return <p>This text</p>;
    } else {
        return <p>Another text</p>;

HTML attribute names like “class” becomes “className”, “tabindex” becomes “tabIndex” as camelCase.

<div className="myClass"></div>

HTML tags must always be closed


Finally, we follow the instructions below to install React:

  • React requires Nodejs. If you don’t have Nodejs on your computer, you can download it from here.
  • After installing Nodejs, open your Terminal or Command Prompt and type the following command to create your React app:
npx create-react-app my-app
cd my-app

Finally, type npm start and the application should start on your localhost.

You can see here for installation details.

I hope that my article helps you to get the first understanding of React. React may seem complicated at the beginning but that’s OK. Keep reading and feel free to ask your questions in the comment sections. In the second part, I will explain sharing data between React components with props and state.

Thanks for your support & see you guys soon!

Originally published by Cem Eygi at

Learn More

☞ Modern React with Redux

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ The Complete React Web Developer Course (2nd Edition)

☞ Node with React: Fullstack Web Development

☞ Beginner Full Stack Web Development: HTML, CSS, React & Node

☞ React JS and Redux - Mastering Web Apps

☞ React 16 - The Complete Guide (incl. React Router 4 & Redux)

☞ MERN Stack Front To Back: Full Stack React, Redux & Node.js

reactjs javascript

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript Expressions in JSX in ReactJs

Welcome, what is JSX Expressions in React Js in Hindi? JSX is an Expression Too After compilation, JSX expressions become regular JavaScript function calls a...

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project. This video covers the key differences between ReactJS, Angular and Vue with respect to the following: Use case, Performance, Data binding, Scripting language, Testing, Community support, Growth curve

What is JavaScript – All You Need To Know About JavaScript

In this article on what is JavaScript, we will learn the basic concepts of JavaScript.