Learn React JS - Creating a React App- Part 2 (Series)

Hello everyone 👋,

In the previous article, we learned about the basic concepts of React which covered JSX, React Element, Rendering the element, etc.

In the 2nd part of the Learn React JS series, we will cover on Creating a React App with Create React App tool.

Creating a React App with Create React App

In the 1st part of this series, we have created the React App by adding React & React DOM CDN URL directly in the <script> tag. The reason to use Create React App tool over the above method is, it helps with tasks like

1. Scaling to many files and components.
2. Using third-party libraries from npm.
3. Detecting common mistakes early.
4. Live-editing CSS and JS in development.
5. Optimizing the output for production.

Without further delay, let's create an app with Create React App tool.

• Run the below command in terminal to install the Create React App package.

npm install -g create-react-app

• The below command creates a new app. So, please make sure to update the 2nd argument. It is the application name.

create-react-app first-app

• Once its successfully created the app, you can able to see the below screen.
• Then, go to the project folder and run the app.

cd first-app
yarn start

• The command yarn start will automatically start a server and listen it on port 3000. This will be the first screen you will see in http://localhost:3000/.

To modify the content, open App.js file under src/ folder and start updating the code inside the return block. I've updated the code to keep only h1 tag to show as First app. Save the file and automatically the new changes will be reflected in the UI.

Original Content

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 Content

import './App.css';

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

export default App;

The output with modified content:

Here's my github repo where you can find the files in the part-2 branch. We will keep updating this repo for every part. So, please bookmark it.

In the next article, we will learn how to create components & the difference between Functional and Class Components.

Thanks for reading the article!