Building your first React Js application

Last updated : Jul 30, 2023 12:00 AM

In this article, I will explain how to build a simple React Js application. I will also explain how the React Js project structure is organized.

The application is a simple signup form. Hence the project name is signup-form.

The following command creates the project.

Create a React Js project

npx create-react-app signup-form

1. Understanding the React project structure

Now I have a React Js project named signup-form. Navigate to that project directory:

Change directory

cd signup-form

Start the development server by running the following:

Start the app

npm start

Now I can access my default React Js home page at http://localhost:3000.

Now, let's explore the project structure created by Create React App. The folders public and src and the files index.html, index.js, and App.js play a key role in React Js projects.

public/: Contains static files like the index.html file, which serves as the main template for the app.
src/: Contains the main source code for my React application, including components, styles, and other JavaScript files.
src/index.js: The entry point for my React application, where the root component is rendered to the DOM in index.html.
src/App.js: The root component of my application, which can be used as a starting point for building my app.

You may notice files in addition to the files mentioned above. Just ignore them for now. I will explain them later.

In a typical React.js project, index.html, index.js, and App.js are three essential files that work together to create a web application. Here's how they are related:

index.html

This file is the main HTML file for my application and serves as the React application's entry point. It contains the basic structure of the web page, including the <head></head> and <body></body> elements. The <body></body> element includes a <div></div> element with an id attribute (usually root) that React will use to render the application. Here is the simplified version of the index.html file.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js

This file is the main JavaScript file for the application, and it serves as the entry point for React. It imports the React and ReactDOM libraries and the App component from the App.js file. It then renders the App component into the

element specified in index.html. In addition, index.js also sets up any other configurations or services that my application might need.

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

App.js

This file is a React component containing the application's logic and structure. It typically includes a render() method that returns the HTML structure of the application, and it may also have other methods and lifecycle hooks that handle events and data changes in the application. App.js is imported and used by index.js to render the application into the HTML document.

App.js

function App() {
  return (
    <div>Simple App</div>
  )
}
export default App

Figure 2: React Js Rendering Architecture

In summary, index.html provides the basic structure for the web page. The index.js sets up React and renders the App component into the index.html page. The App.js contains the logic and structure of the application. By working together, these three files allow me to build complex and interactive web applications using React.

2. Creating and importing components

As you saw in the above explanation, App.js is the entry point for my React Js project components. I can edit the App.js and code my signup form there. But it is not a good practice. As my app grows in complexity, I should have a scalable way to add more components.

Let's start by creating a new component for our signup form. Create a new file named SignupForm.js in the src/ directory and add the following code. I include the CSS styles at the same time. The next topic is about creating the CSS file.

src/SignupForm.js


const SignupForm = () => {
  return (
      <div className="signup-form">
      <h1>Signup Form</h1>
      <form>
        <div className="form-field">
          <label htmlFor="name">Name</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div className="form-field">
          <label htmlFor="email">Email</label>
          <input type="email"id="email" name="email" required />
        </div>
        <button type="submit">Signup</button>
      </form>
    </div>
  )
}
export default SignupForm

Now I have to import this SignupForm into App.js. So I can display the signup form in place of the App.js content.

Now, open the src/App.js file and replace its contents with the following code to import and render the SignupForm component.

Import SignupForm

import React from 'react';
import SignupForm from './SignupForm';
function App() {
  return (
    <div>
      <SignupForm />
    </div>
  )
}
export default App

Now I can see the contents of my SignupForm.js on http://localhost:3000.

3. Adding styling to the React application

The contents of my signup form need styling. They look messy. There are multiple ways to style my React application, such as using CSS files, CSS modules, or styled-components. In this example, I will use a simple CSS file.

Create a new file named SignupForm.css in the src/ directory and add the following CSS rules.

Styles

.signup-form {
  width: 300px;
  margin: 0 auto;
}
.form-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
input {
  padding: 0.5rem;
}

Now, import the CSS file in the SignupForm.js file by adding the following line at the top.

Import css

import './SignupForm.css'

My signup form component should include the form fields, buttons, and styling defined in the SignupForm.css file. When I run the application using npm start, I should see the styled signup form in the browser.

Building your first React Js application

1. Understanding the React project structure

index.html

index.js

App.js

2. Creating and importing components

3. Adding styling to the React application

Related Links

By: Lance