How to Create Your First React Component

In the last article, we have seen how to set up a development environment for React using create-react-app. Now, we will create the first React component. Although create-react-app comes up with the default component, still we will create a small component from scratch to teach you.

Before we start, we suggest you install create-react-app first. Please follow the guidelines given in the link above. Let’s start with component creation.

Step 1: Download and Install Visual Studio Code Editor

We had run create-react-app’s default component using Command Prompt. But, if we do need to make some changes in files then we need an editor to open create-react-app files. So we suggest you download and install the Visual Studio Code which is free and open source.

Step 2: Open Project in Visual Studio Code

We have created srs-test project while setting up a development environment. Now, open Visual Studio Code. Go to the File Open Folder and select srs-test folder from the directory you have saved it. You can see the following directory structure after you have selected folder.

Note: You might have created a folder with a different name (not srs-test).

Note: We suggest you open Visual Studio Code as an administrator.

How to Create Your First React Component - Select Project



Step 3: Check If Application Running

Go to the Terminal menu item. Select the New Terminal. You will see the following window at the bottom of the editor. Your project directory path automatically will get selected in the terminal.

How to Create Your First React Component - Terminal Window



Type npm start and hit enter. It will open an application in a browser.

How to Create Your First React Component - NPM Start



You have managed to setup project in Visual Studio Code successfully if an application is running in a browser. To stop application come to the terminal window. Press Ctrl + C and then type Y. It will shut down the application.

Step 4: Create New React Component

Go to the folder structure on left. Expand src folder. Click on app.js and write below code (Remove Existing Code) for Hello component. This component returns ‘Welcome to React World‘ message.

app.js 



Now Come to the index.js file. Make changes there given in below code. Here we are just Replacing our Hello component with the old one.

index.js



Save all changes by pressing Ctrl + S.

Basically, our Hello component will get rendered to the root div element which you will find inside index.html inside the public folder.

Now, come again to the terminal, Type npm start and hit enter. It will open an application in a browser.

How to Create Your First React Component - Welcome React



Great. We have just created our first component. In the next article, we will see how to use React Hooks.

Tutorial Funda

Tutorial Funda will keep you updated with the latest Programming Languages, Software Tools and related technologies used in Software Development.

Leave a Reply

Your email address will not be published. Required fields are marked *