2. Basic React Tutorial for Web Development

Setting Up a React Project

1. Install Node.js: Download and install Node.js from nodejs.org.

2. Create a New React App in your terminal:

   npx create-react-app my-chatbot
   cd my-chatbot

3. Run the Development Server:

   npm start

This will start the app on http://localhost:3000.

Understanding React Basics

1. Components: React apps are made up of components. Create a simple component in src/App.js:

   javascriptCopy codefunction App() {
     return <h1>Hello, Chatbot!</h1>;
   }
   
   export default App;

2. State and Props:

   • State is data managed within a component.

   • Props are inputs to a component passed from a parent component.

3. Handling User Input:

   • Add an input field and button in App.js:

   javascriptCopy codeimport { useState } from 'react';
   
   function App() {
     const [userInput, setUserInput] = useState('');
   
     const handleInputChange = (e) => {
       setUserInput(e.target.value);
     };
   
     return (
       <div>
         <input type="text" onChange={handleInputChange} value={userInput} />
         <button onClick={() => alert(userInput)}>Send</button>
       </div>
     );
   }
   
   export default App;