How To Create A React.Jsx App

Dianna Russini

3 min read

·

Apr 04, 2025

29

Share

How To Create a React.jsx App: A Step-by-Step Guide

Creating a React application is easier than you might think. This guide walks you through building a basic React app from scratch, covering everything from setting up your environment to rendering your first component. We'll focus on using JSX, the syntax extension that makes React development more intuitive.

Setting Up Your Development Environment

Before diving into coding, you need the right tools. Here's what you'll need:

• Node.js and npm (or yarn): Node.js is a JavaScript runtime environment, and npm (Node Package Manager) or yarn is a package manager for Node.js. Download and install the latest LTS version of Node.js from the official website; npm will be included. Yarn is an alternative package manager and can offer performance improvements.

• A Code Editor: Choose a code editor you're comfortable with. Popular options include Visual Studio Code, Sublime Text, Atom, and WebStorm.

Once you have these installed, you're ready to create your project.

Creating Your First React App

We'll use Create React App (CRA), a tool that sets up a modern build environment for React projects. It handles the complex configuration for you, letting you focus on writing code.

1. Install Create React App: Open your terminal or command prompt and run:

npx create-react-app my-react-app

Replace my-react-app with your desired project name. This command will download and install all the necessary dependencies.

2. Navigate to your project directory:

cd my-react-app

3. Start the development server:

npm start

This command will start a local development server and open your app in the browser. You should see the default React welcome page.

Understanding the Project Structure

Create React App provides a well-organized project structure. Key directories include:

• src/: This folder contains your application's source code. The App.js file is the main component.
• public/: This folder contains static assets like HTML, images, and CSS files.
• node_modules/: This folder stores all the project's dependencies.

Building Your First Component with JSX

Let's modify the App.js file to create a simple component that displays "Hello, world!". Open src/App.js and replace the existing code with the following:

import React from 'react';

function App() {
  return (
    

      
Hello, world!
    
  );
}

export default App;

This code defines a functional component named App that returns a JSX expression. JSX allows you to write HTML-like syntax within your JavaScript code. Save the file, and you'll see the changes reflected in your browser.

Adding More Complexity: Props and State

React components can receive data through props and manage their internal data using state. Let's enhance our app to demonstrate this:

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    

      
Hello, world!
      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

export default App;

This example uses the useState hook to manage a counter. Each click increments the counter, demonstrating how state updates the UI.

Beyond the Basics

This tutorial provides a foundation for building React applications. To further enhance your skills, explore these topics:

• Component Lifecycle: Learn how components mount, update, and unmount.
• Event Handling: Handle user interactions effectively.
• Conditional Rendering: Render different UI based on conditions.
• Routing: Implement navigation between different views in your app.
• State Management: Explore libraries like Redux or Context API for managing complex application state.

By following these steps and continuing to learn, you can build sophisticated and engaging React applications. Remember to practice consistently and explore the vast resources available online to master this powerful JavaScript framework.