Scribd
Upload
4 views1 page

Prg-1 React

This document provides a step-by-step guide to creating a dynamic React application using create-react-app. It includes instructions for setting up a new project, modifying the App.js file to implement a stateful component with useState, and dynamically updating displayed text based on user input. Finally, it instructs users to run the application using npm start.

Uploaded by

friendname12345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views1 page

Prg-1 React

This document provides a step-by-step guide to creating a dynamic React application using create-react-app. It includes instructions for setting up a new project, modifying the App.js file to implement a stateful component with useState, and dynamically updating displayed text based on user input. Finally, it instructs users to run the application using npm start.

Uploaded by

friendname12345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 1

React (BCSL657B)

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

You might also like