How to Create Your First React App Tutorial programming

Introduction

React is a popular JavaScript library for building user interfaces. It is used by many companies and developers around the world to create powerful web applications. In this tutorial, we will show you how to create your first React app and get started with the basics.

Prerequisites

Before you begin, you should have a basic understanding of HTML, CSS, and JavaScript. You should also have Node.js and npm installed on your machine. If you don’t have these installed, you can find instructions on how to do so here: https://nodejs.org/en/download/ or read our guide about first steps in node.js

Creating the App

The first step is to create the React app. To do this, open a terminal window and run the following command:

npx create-react-app my-app

This will create a new directory called my-app and install all the necessary dependencies. Once the installation is complete, you can navigate to the directory and start the development server:

cd my-app
npm start

This will start the development server and open a new browser window with the React app. You should see a page with the text “Welcome to React” and a few other components.

Exploring the App

Now that you have the app running, let’s take a look at the files that were created. Open the my-app directory in your favorite text editor. You should see the following files and directories:

public/
src/
package.json
README.md

The public/ directory contains the HTML file that is used to render the app. The src/ directory contains all the JavaScript files that make up the app. The package.json file contains all the dependencies and configuration for the app. The README.md file contains instructions on how to use the app.

Adding Components

Now that you have the basic structure of the app, you can start adding components. Components are the building blocks of React apps and are used to create the user interface. To create a new component, create a new file in the src/ directory and add the following code:

import React from 'react';
const MyComponent = () => {
  return ( 
    <div>My Component</div>
  ); 
};
export default MyComponent;

This is a basic React component that will render the text “My Component” on the page. To use the component, you need to import it into the App.js file and add it to the render method:

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

Now when you reload the page, you should see the text “My Component” on the page.

here is more advanced example: calculator app in react:

// calculator app in react

import React, { useState } from 'react';

const Calculator = () => {
  const [input, setInput] = useState('');
  const [result, setResult] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const calculateResult = () => {
    try {
      setResult(eval(input).toString());
    } catch (e) {
      setResult('Error found');
    }
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleInputChange} />
      <button onClick={calculateResult}>Calculate</button>
      <p>{result}</p>
    </div>
  );
};

export default Calculator;

Summary

In this tutorial, we showed you how to create your first React app. We covered the basics of creating components and adding them to the app. Now that you have the basics down, you can start exploring the other features of React and building more complex apps.

How to Create Your First React App Tutorial