Skip to content
Home » Blogs » Introduction to ReactJS | ReactJS Tutorial #2

Introduction to ReactJS | ReactJS Tutorial #22 min read

Introduction to ReactJS

Hey Programmers, Welcome Back to the Second Part of the ReactJS Tutorial Series, In the Previous Part We Learned How To Install React JS & Create Our First React App. Now, in this post, we will learn more about React JS And Its Uses.

What is React JS?

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

How Does React Work?


Unlike Manupaliting the Browser’s DOM (Document Object Model) It Creates a Virtual DOM Memory where It Performs All the Necessary Manipulating Without Making Changes In the Browser’s DOM.

Working With React

Create a React App Using JSX (JavaScript XML) Through Which You Can Convert an HTML Document to Rect

<!DOCTYPE html>
    <script src="" crossorigin></script>
    <script src="" crossorigin></script>
    <script src=""></script>

    <div id="reactDiv"></div>

    <script type="text/babel">
      function Hello() {
        return <h1>Hello World!</h1>;

      ReactDOM.render(<Hello />, document.getElementById('reactDiv'))


Creating a New React App

Step 1: To Create a New React App Run the Command In Your Terminal

npx create-react-app new_app

Run React App

Select the Directory:

cd new_app

Run the Following Command to Run the Application:

npm start

Once You Run the Command Listed Above Your App Will Run at the Port http://localhost:3000/

Making Changes In React App

To Change This Default React App Code We Have to Replace the Our Keywords In the <div className =”App”> Make the Change In Heading Tag (H1)

Default React Code:

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          Edit <code>src/App.js</code> and save to reload.
          rel="noopener noreferrer"
          Learn React

export default App;

Modified React Code:

function App() {
  return (
    <div className="App">
      <h1>This Website Is Awesome</h1>

export default App;

So this Was it For this Blog See You In The Next One till Then Keep Coding Keep Exploring!

Tanmay Sinha


The Ultimate Managed Hosting Platform

6 thoughts on “Introduction to ReactJS | ReactJS Tutorial #22 min read

  1. Pingback: React Render HTML | ReactJS Tutorial #4 - Mr Programmer

  2. Pingback: JSX In ReactJS | ReactJS Tutorial #5 - Mr Programmer

  3. Pingback: Getting Started With ReactJS | ReactJS Tutorial #1 - Mr Programmer

Leave a Reply