Building Your First Web Application with React.js

In this page header section, you can provide details about the purpose of the page. This helps users quickly understand what to expect from the page content.

Our Story

Prerequisites

If you’re looking to build your first web application, React.js is a great choice. It’s a powerful JavaScript library for building user interfaces, maintained by Facebook, and widely adopted by developers around the world. In this blog post, we will walk through the process of building a simple React.js web application, including setting up the environment, creating components, and running your app.

building Up Your React Application

Explore the range of services we offer to elevate your business.

Setting Up Your React Application

To create a new React project, the easiest way is to use the Create React App tool. This tool sets up a new project with everything you need for development, such as build tools and a development server.

Starting the Development Server

Now that your project is created, you can run the development server to view your app in the browser. Run the following command
npm start

Understanding the Folder Structure

Your project folder will have a structure similar to this
my-first-react-app/
├── node_modules/ # Installed dependencies
├── public/ # Public assets like index.html
├── src/ # Source code for your app (React components)
├── package.json # Metadata and dependencies

Styling Your App

You can also modify the src/App.css file to add some basic styles for your app. For example, This will give your app a cleaner and more polished look.

.App {
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

input {
  padding: 8px;
  margin-top: 10px;
  font-size: 16px;
}

h1 {
  color: #4CAF50;
}

p {
  font-size: 18px;
  color: #555;
}

Our Story

Adding More Components

React is built around components, and you can break your app into smaller, reusable pieces. Let’s create a new component called Greeting.js:
Create a new file in the src/ folder called Greeting.js.
Add the following code

import React from 'react';

function Greeting({ name }) {
  return <p>Hello, {name ? name : "Stranger"}!</p>;
}

export default Greeting;

Now, modify App.js to use this new Greeting component:

import React, { useState } from 'react';
import Greeting from './Greeting';
import './App.css';

function App() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div className="App">
      <h1>Welcome to My First React App!</h1>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={handleChange}
      />
      <Greeting name={name} />
    </div>
  );
}

export default App;