How to Set Up React.js Environment and Create Your First React App

When I was working on a project where I needed to quickly set up a modern front-end application with interactive UI components. React.js was the perfect choice for this task. The issue is, many beginners find the React setup process intimidating at first.

In this article, I will cover how to set up your React environment and create your first React application from scratch. I will share methods I have used across dozens of projects over the years.

So let’s get started!

What is React.js?

React is a JavaScript library created by Facebook (now Meta) that makes building interactive user interfaces simpler and more efficient. Instead of manipulating the DOM directly, React uses a virtual DOM to optimize rendering and improve performance.

React uses a component-based architecture, which means you build encapsulated components that manage their state, then compose them to create complex UIs.

Prerequisites for Setting Up React

Before we begin, make sure you have the following installed:

1. Node.js and npm – React projects are built using Node.js
2. Code Editor – I recommend Visual Studio Code
3. Terminal/Command Line – You’ll use this to run commands

Method 1: Create React App (CRA) – The Official Way

Create React App is the officially supported way to create single-page React applications. It sets up your development environment with a pre-configured build setup.

Here are the steps to create your first React app using CRA:

1. Open your terminal or command prompt
2. Run the following command:

npx create-react-app my-first-react-app

3. Navigate to your project directory:

cd my-first-react-app

4. Start the development server:

npm start

After running these commands, your browser should automatically open with your new React app running on localhost:3000.

CRA gives you a fully configured development environment with features like:

• React, JSX, ES6, and TypeScript support
• Development server with hot module replacement
• Testing environment with Jest
• Build a script to bundle JS, CSS, and images for production

Method 2: Use Vite – The Modern, Faster Alternative

While Create React App is great, it can be slow for larger projects. Vite is a newer build tool that offers a much faster development experience.

Here’s how to create a React app with Vite:

1. Open your terminal
2. Run the following command:

npm create vite@latest my-vite-react-app -- --template react

3. Navigate to the project directory:

cd my-vite-react-app

4. Install dependencies:

npm install

5. Start the development server:

npm run dev

Vite provides an extremely fast development experience because it leverages native ES modules and only bundles what’s needed on demand.

Understand the Project Structure

Now that you’ve created your React app, let’s understand the key files and folders:

In a CRA project:

• public/index.html – The HTML template
• src/index.js – The JavaScript entry point
• src/App.js – The main App component
• package.json – Lists dependencies and scripts

In a Vite project:

• index.html – The HTML template (at the root)
• src/main.jsx – The JavaScript entry point
• src/App.jsx – The main App component
• package.json – Lists dependencies and scripts

Create Your First Component

Let’s create a simple component to display a list of U.S. states. Here’s how:

1. In your src folder, create a new file called StatesList.jsx
2. Add the following code:

import React from 'react';

function StatesList() {
  const usStates = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia'
  ];

  return (
    <div className="states-container">
      <h2>Top 10 US States Alphabetically</h2>
      <ul>
        {usStates.map((state, index) => (
          <li key={index}>{state}</li>
        ))}
      </ul>
    </div>
  );
}

export default StatesList;

3. Now, update your App.js or App.jsx to use this component:

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My First React App</h1>
        <p>Welcome to the United States Explorer</p>
      </header>
      <main>
        <StatesList />
      </main>
    </div>
  );
}

export default App;

Add State and Interactivity

One of React’s most powerful features is managing state. Let’s enhance our states list to make it interactive:

1. Update your StatesList.jsx file:

import React, { useState } from 'react';

function StatesList() {
  const allUsStates = [
    'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia',
    'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa'
  ];

  const [visibleStates, setVisibleStates] = useState(5);

  const showMore = () => {
    setVisibleStates(prevVisible => 
      prevVisible + 5 > allUsStates.length ? allUsStates.length : prevVisible + 5
    );
  };

  const showLess = () => {
    setVisibleStates(prevVisible => 
      prevVisible - 5 < 5 ? 5 : prevVisible - 5
    );
  };

  return (
    <div className="states-container">
      <h2>US States Explorer</h2>
      <ul>
        {allUsStates.slice(0, visibleStates).map((state, index) => (
          <li key={index}>{state}</li>
        ))}
      </ul>
      <div className="button-group">
        {visibleStates < allUsStates.length && (
          <button onClick={showMore}>Show More</button>
        )}
        {visibleStates > 5 && (
          <button onClick={showLess}>Show Less</button>
        )}
      </div>
    </div>
  );
}

export default StatesList;

This component now:

• Uses the useState hook to maintain state
• Displays a limited number of states initially
• Provides buttons to show more or fewer states
• Conditionally renders buttons based on the current state

Style Your React App

React offers several ways to style your components. Here’s how to add some basic styles:

Method 1: CSS Files

1. Create a file called StatesList.css in the src folder
2. Add the following CSS:

.states-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px 15px;
  margin: 5px 0;
  background-color: white;
  border-left: 3px solid #3498db;
  transition: background-color 0.3s;
}

li:hover {
  background-color: #ecf0f1;
}

.button-group {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

button {
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}

3. Import this CSS file in your component:

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

// Rest of your component code

Method 2: Inline Styles

You can also use inline styles directly in your JSX:

function StatesList() {
  // Previous component code...

  const styles = {
    container: {
      maxWidth: '600px',
      margin: '0 auto',
      padding: '20px',
      backgroundColor: '#f5f5f5',
      borderRadius: '8px',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
    },
    heading: {
      color: '#2c3e50',
      borderBottom: '2px solid #3498db',
      paddingBottom: '10px'
    },
    // Additional styles...
  };

  return (
    <div style={styles.container}>
      <h2 style={styles.heading}>US States Explorer</h2>
      {/* Rest of your component JSX */}
    </div>
  );
}

Build and Deploy Your React App

When you’re ready to deploy your app to production, you need to create an optimized build:

For Create React App:

npm run build

For Vite:

npm run build

This will create a build or dist folder with optimized, minified files ready for deployment.

You can deploy your React app to various platforms:

• Netlify: Drag and drop your build folder or connect your GitHub repository
• Vercel: Similar to Netlify, with excellent support for React applications
• GitHub Pages: Free hosting for static sites
• AWS S3: For simple static hosting
• Firebase Hosting: Google’s hosting solution with additional backend services

Troubleshoot Common Issues

Issue 1: “Module not found” errors

If you see errors about missing modules, run npm install to ensure all dependencies are installed.

Issue 2: App crashes with state or hook-related errors

Remember that hooks like useState can only be used in function components and must be called at the top level.

Issue 3: Changes are not reflecting in the browser

Try a hard refresh (Ctrl+Shift+R or Cmd+Shift+R) or restart the development server.

React provides excellent developer tools for debugging. Install the React Developer Tools extension for Chrome or Firefox to inspect your component hierarchy and state.

I hope you found this article helpful for setting up your React environment and creating your first React application. React’s component-based architecture makes it a powerful tool for building complex user interfaces, and the tooling around it has matured significantly over the years.

Related tutorials:

• How to Upload Files in React JS
• React Cancel Button: 5 Methods with Examples
• Form Validation in React.js

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/