Before reading this post let me inform you in advance that this post is more like a 10 min react js tutorial for beginners. It is more like crash course to get a beginner started immediately on React js.

When I was getting started most of the react tutorials were overwhelming and appeared too complex for me. I had subscribed to many courses and realized I could make a simpler version of React js which will be useful for anyone who comes to this site.

Once I understood how React works and then going back to the sites like react js tutorials point, udemy or coursera helped me understand concepts better. I will also very soon come up with a full fledged react js tutorial and react native tutorials which will give in-depth knowledge on various components of React js.

The purpose of this React.js tutorial is to help one understand what is React js and the prerequisites needed for running react projects at your end. I have outlined below what we will be covering as part of the tutorial.

Read also – Learn what is Redux

Outline For React JS Tutorial For Beginners

• What is React js?
  • What is JSX
  • What is Virtual DOM
• Environment setup
• Creating your first react app
• Running the application first time
• Starting with a simple “Hello World” Component

What is React js?

React js is a JavaScript UI library created by Facebook in 2011 for web development. It is a library for building HTML UI components.

In case you do not know what is JavaScript you can read this post – What JavaScript means?

Before introduction of React js, most UI developers were stuck with “Vanilla JavaScript” or jQuery to build complex UI’s. This was more time consuming and error prone.

As react js library helps in building UI’s with a component driven approach, lot of redundancy is reduced. As a react js example consider a scenario where you are supposed build a header which is supposed to be seen across all pages. If you are a UI developer then you had to put the header code across all the HTML files. One day the client decides to change the layout of the header, imagine the pain to go through all the HTML files to update the header layout?

The above scenario for reactjs example tells us why a component driven approach is better for re-usability and this feature is what I love the most. This feature has been achieved in react through

• JSX
• Virtual Dom

What is JSX

JSX full form is JavaScript in XML. JSX feature in React js allows us to write html in React and it makes easier to write and debug code in React. Below is a React JSX tutorial which can explain you quickly. I will still write a separate post for React JSX in the future.

const divJSX = <div>I am via JSX</div>
ReactDom.render(divJSX,document.getElementById('root'));

The above code without JSX would be like below. As you can see it is more complex and not readable in large projects.

const divJSX = React.createElement('div', {}, 'I am not via JSX!');>
ReactDom.render(divJSX,document.getElementById('root'));

What is Virtual DOM

First of all Virtual DOM is not found by React. However, React uses Virtual DOM effectively to give a performance boost. To put in brief React maintains a blueprint of every React component in Virtual DOM and any UI operations will be done against this Virtual DOM. At the time of rendering the React algorithm process called “Diff” updates the Real DOM in comparison with Virtual DOM.

Updating Virtual DOM is faster as React does not have to navigate through all the DOM elements especially if the page is large. It also makes debugging easier unlike the numerous div elements you encounter when debugging the code.

Environment setup

For working on any React js project, below tools and SDK’s are my checklist.

Node.js

If your machine does not have Node.js then install Node.js from https://nodejs.org/en/ . My machine is a Windows 10 x64 so I have chosen that variant. You can chose to install the variant as per your machine configuration. Node.js has a mac version too.

Node.js acts as a server for our React projects. You can also use it for running any backend server code for your React projects. Once installed in your command prompt make sure to verify if it is installed by running “npm” and you should see output like below.

Install create react app

Creating a react app using NPM is done with the create-react-app package. Before creating a react project make sure to install the package like below. The react js installation has been done per below code. In create react app “-g” stands for global.

npm install -g create-react-app

Editor

As react.js code is usually JavaScript an Editor is not mandatory. You can even use the native text editor in your system. However, for ease of use I prefer Visual Studio source code as it has got great intellisense and formatting react js code is easier. There are other editors too like Sublime, Atom and so on.

You should navigate to your folder using the File menu like below picture

Below picture is a screenshot of intellisense which I like in Visual Studio code.

Creating your first react app

Now, that the environment is setup let’s proceed to create the first react js project. Create a folder in your desired directory and in command prompt navigate to that directory.

Next run the below command to create the “Hello World” react js example project. This will take some time depending on your machine and internet speed. Ideally it should not take more than 5 minutes.

npx create-react-app hello-world

Once installed you should see something like below.

Running the application first time

Make sure to navigate to your project “Hello-World” to start your server.

cd hello-world
npm start

If everything is setup correctly then you should see something like below.

By default the react app starts with 3000 port. This can be later modified in the pacakge.json file.

Starting with a simple “Hello World” Component

You can open the folder “hello-world” in your editor and edit the file App.js to something like below. I have created a JSX component called “Hello World” and I have used the HelloWorld component by using <HelloWorld/>.

import React from 'react';
import logo from './logo.svg';
import './App.css';

function HelloWorld()
{
  return(
    <h1>Hello World!!</h1>
  )
}

function App() {
  return (
    <HelloWorld/>
  );
}

export default App;

If you have done the above steps right you should see a “Hello World” output .

I hope this quick react tuorial was helpful enough to get you started quickly with a React project. I will be updating more tutorials for react js and react native tutorials in this blog. If you are stuck anywhere do contact me or post your comments with your queries.

For more React documentation – You can refer https://reactjs.org