Create Your First React Web Application
React is a JavaScript library for building user interfaces. in this article, we are going to create hello world application with React. This tutorial is only for very beginners. Let’s get started:
Table of Contents
- Prerequisites
- Create React App
- Folder Structure
- Change Port Number
- Make Component
- Use Component
- React Developer Tools
Prerequisites
Before getting started with React, you should have basic knowledge of HTML, CSS, JavaScript, DOM, ES6. And Node.js, npm need to be installed globally on your machine.
Create React App
Run the following command to create a react app:
npx create-react-app hello-world
It generates all files, folders, and libraries we need. Now navigate the project folder and start the app:
# go to project folder
cd hello-world
# start app
npm start
We’re able to see the app at http://localhost:3000/
.
PORT=3005
Folder Structure
Let’s have a look at the React app folder structure in short.
- 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
React lets us define components as classes or functions. Components are reusable bits of code. We can create component in .JSX or .JS file. The component name should be written in Title Case like HelloWorld.
Let’s create our first component named ‘HelloWorld‘ inside src folder:
import React from 'react';
const HelloWorld = () => {
function sayHello() {
alert('Hello, World!');
}
return (
);
};
export default HelloWorld;
This is a simple component. It will show “Hello World” alert on button click.
Use Component
We can import the component in any file. After importing component, we can use it anywhere like:
<ComponentName/>
Let’s use our HelloWorld component. Open src/App.js
file and paste these codes:
import React from 'react';
import HelloWorld from './HelloWorld';
import './App.css';
function App() {
return (
<div className="App">
<HelloWorld />
</div>
);
}
export default App;
React has hot reloading feature. App will be reloaded automatically and you’ll see the “Say Hello!” button. Click the button and see the output.
React Developer Tools
React Developer Tools that will make our life much easier when working with React. It allows us to inspect the React component hierarchies. You can add the extension into Chrome, Firefox browser.
That’s it. Thanks for reading. ?Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)