BCSL657B Program 1

1. Use create-react-app to set up a new project. Edit the App.js file to include a stateful component with useState. Add an input field and a element that displays text based on the input. Dynamically update the content as the user types.

Step 1: Create a new React app
First, you need to create a new React app using create-react-app. Open your terminal and run:

npx create-react-app my-dynamic-app

This will set up a new React project in a folder called my-dynamic-app. After the installation is complete, navigate to the project directory:

cd my-dynamic-app

Step 2: Modify the App.js file
Open the src/App.js file in your favorite code editor and update the code to include a stateful component using the useState hook. Here’s how you can modify it:

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

function App() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className="App">
      <h1>Dynamic Text Display</h1>
      <input
        type="text"
        value={text}
        onChange={handleChange}
        placeholder="Type something..."
      />
      <p>You typed: {text}</p>
    </div>
  );
}

export default App;

Step 3: Run the application
Back in your terminal, start the development server by running:

npm start

This will open the app in your default web browser, typically at http://localhost:3000, and you should see an input field where you can type, and the content will update dynamically as you type.

OUTPUT:

“Fixing the Module not found: Error: Can't resolve 'web-vitals' Error in React”

The error you’re seeing occurs because the web-vitals package, which is used for performance monitoring in a React app, is not installed by default in the project or has been removed. Since web-vitals is an optional package, you can safely resolve this issue by either installing the package or removing the code that imports it.

Option 1: Install the web-vitals package
If you want to keep the performance monitoring functionality and resolve the error, simply install the web-vitals package.

1. In the terminal, navigate to your project folder (if not already there):

cd my-dynamic-app

2. Install web-vitals by running the following command:

npm install web-vitals

3. After installation is complete, restart the development server:

npm start

This should resolve the error, and your application should compile correctly.

Option 2: Remove the Web Vitals Code (If Not Needed)
If you don’t need performance monitoring and want to get rid of the error, you can safely remove the import and usage of web-vitals from your code.

1. Open src/reportWebVitals.js and remove its contents or just comment out the code:

// import { reportWebVitals } from './reportWebVitals';

// You can safely remove the call to reportWebVitals or leave it commented out
// reportWebVitals();

2. Save the file, and the application should compile without the error. You can now continue developing your app.