How to create a React App Using React.js Libraries and Functions? Give example

React.js has become the go-to library for building interactive and dynamic web applications. Its component-based architecture and the vast ecosystem of libraries and functions make it a powerful tool for web developers. In this article, we’ll walk you through the process of creating a React app using some popular React.js libraries and functions. We’ll illustrate each step with code examples for a hands-on learning experience.

Step 1: Setting Up Your Development Environment

Before you can start building your React app, you need to ensure you have Node.js and npm (Node Package Manager) installed on your computer. If you don’t have them already, you can download and install them from the official Node.js website.

Once you have Node.js and npm installed, you can create a new React app using the create-react-app command-line tool. Open your terminal and run:

npx create-react-app my-react-app

Replace my-react-app with your desired project name. This command will create a new React app with all the necessary files and dependencies.

Step 2: Exploring the Project Structure

After running the create-react-app command, you’ll have a project structure like this:

• my-react-app/
  • src/: Contains your application’s source code.
    • App.js: The main component of your app.
    • index.js: The entry point of your app.
  • public/: Contains static assets like HTML files.
  • package.json: Lists your project dependencies.
  • node_modules/: Contains project dependencies.

In your src directory, you will find App.js, the main component of your app.

Step 3: Building Components Using Functions

React components can be created using functions, and this is a fundamental concept in React development. Let’s create a simple functional component to display a “Hello, React!” message. Create a new file called HelloReact.js inside your src directory and add the following code:

// src/HelloReact.js
import React from 'react';

function HelloReact() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default HelloReact;

Here, we’ve created a functional component named HelloReact that returns a simple HTML structure. The export default statement makes this component available for use in other parts of your application.

Step 4: Using the Component in App.js

Now that you’ve created your functional component, it’s time to use it in your App.js file. Open src/App.js and add the following code:

// src/App.js
import React from 'react';
import './App.css'; // You can create this CSS file for styling
import HelloReact from './HelloReact';

function App() {
  return (
    <div className="App">
      <HelloReact />
    </div>
  );
}

export default App;

In this code, we’ve imported the HelloReact component and used it within the App component. This demonstrates how to compose your React application from smaller, reusable components.

Step 5: Running Your React App

To see your app in action, open your terminal and navigate to the project directory (my-react-app). Then, run the following command to start the development server:

npm start

Your React app will be available at http://localhost:3000. Open your web browser, and you should see the "Hello, React!" message displayed on the page.