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

Introduction to ReactJS | ReactJS Tutorial #2

Getting Started With ReacJS 2

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!

3 thoughts on “Introduction to ReactJS | ReactJS Tutorial #2”

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You cannot copy content of this page

Top 10 Programming Languages to Learn In 2023! 9 Best Extensions For Web Developers! | Chrome Extensions For Web Developers Web Development Roadmap Best Resources to Learn PYTHON FREE! Web Vs App Development- Which one is Better?