Create Your First React Web Application

Create React App

npx create-react-app hello-world

# go to project folder
cd hello-world

# start app
npm start

PORT=3005

Folder Structure

• node_modules: All external libraries will be stored here. No need to edit any single line code of this folder.
• public: This folder contains all static files such as robots.txt, logo, ads.txt etc.
• src: We’ll do most of the things in this folder.
• package.json: It contains all metadata information about the application.

Change Port Number

By default the react app runs on port 3000. We can change the port easily. Create a file named .env at the root of the project directory. Then insert this line:


 
Now the app will run on new port http://localhost:3005/.

Make Component

import React from 'react';

const HelloWorld = () => {

  function sayHello() {
    alert('Hello, World!');
  }

  return (
    Say Hello!
  );
};

export default HelloWorld;

Use Component

We can import the component in any file. After importing component, we can use it anywhere like:

<ComponentName/>

import React from 'react';
import HelloWorld from './HelloWorld';
import './App.css';

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

export default App;