Introduction to ReactJS

Introduction to ReactJS | ReactJS Tutorial #22 min read

JavaScript, Programming

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)

Author

  • Tanmay Sinha

    Founder & CEO of MrProgrammer.in | I help Learning Freaks to Step into the World of Programming and Our Mission is to Provide High Quality and Valuable Content to Our Users! We believe that everyone has the potential to learn to code, and we are committed to making that happen. Our courses are designed to be engaging and interactive, and we offer a variety of learning paths to meet the needs of all learners. We are also committed to providing our learners with the support they need to succeed, and we offer a variety of resources to help learners learn at their own pace. If you are interested in learning to code, we encourage you to check out our courses. We are confident that you will find our content to be high-quality, valuable, and makes sense.

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

6 comments

  2. Pingback: React Render HTML | ReactJS Tutorial #4 - Mr Programmer
  4. Pingback: JSX In ReactJS | ReactJS Tutorial #5 - Mr Programmer
  5. Pingback: Getting Started With ReactJS | ReactJS Tutorial #1 - Mr Programmer

Leave a Reply