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 Creating a React App with the 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 the 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 it 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 to it on port 3000. This will be the first screen you will see in http://localhost:3000/.

To modify the content, open the App.js file under the src/ folder and start updating the code inside the return block. I've updated the code to keep only the h1 tag to show as the 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.

Thanks for reading the article!

You can connect with me on Twitter & Github.