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>
<html>
  <head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>

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

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

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

  </body>
</html>

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" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Modified React Code: 

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

export default App;

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

Tanmay Sinha
Latest posts by Tanmay Sinha (see all)

Related posts:

Getting Started With ReactJS | ReactJS Tutorial #1Getting Started With ReactJS | ReactJS Tutorial #11 min read JSX In ReactJS | ReactJS Tutorial #5JSX In ReactJS | ReactJS Tutorial #51 min read React Render HTMLReact Render HTML | ReactJS Tutorial #41 min read Emoji-Picker-React-JSHow to Create Emoji-Picker React JS | React JS Projects2 min read Reasons You Should Learn ReactReasons You Should Learn React3 min read Password ValidationPassword Validation Using JavaScript3 min read React vs AngularReact vs Angular | Which One You Should Go For?5 min read React vs React NativeReact vs React Native | What is the Difference?7 min read
Tags:

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

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

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

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

Leave a Reply