Getting Started with ReactJS

In order to start working with React, you need to have NodeJS installed. If you haven't installed it, you can Download it from here.

React JS Installation using create-react-app

create-react-app is a comfortable environment for getting started with building react applications. It sets up your environment so that you can start development using the latest javascript features, and optimizes your app for production. You'll need to have Node >=10.16 & npm >= 5.6 on your PC. For creating a new React App, run:

npx is a package runner tool that comes with npm 5.2+

Then go inside the App folder:

And then run this command to run the application:

Once you run these commands, wait a while, and a new browser window will open with your newly created React App. If it doesn't open, go to your browser and in a new tab type localhost:3000.

This is how the new page will look like:

Modifying Application

To get started with the modifications, inside the my-app directory, go to src folder. Inside the src folder there will be a file called App.js. Open the file, it will look like this:

  import React from 'react'
  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;

Try modifying the HTML content and you will see the changes occuring.

Remove all the content inside ^lt;div class="app"> and add an <h1 tag with text 'Welcome to First React App'

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

  function App() {
    return (
      <div className="App">
        <h1>Welcome to First React App</h1>
      </div>
    );
  }

  export default App;

This is how it will look like: