# 2. Basic React Tutorial for Web Development

### Setting Up a React Project

1. **Install Node.js**: Download and install Node.js from [nodejs.org](https://nodejs.org/).
2. **Create a New React App in your terminal**:

   ```bash
   npx create-react-app my-chatbot
   cd my-chatbot
   ```
3. **Run the Development Server**:

   ```bash
   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`:

   ```javascript
   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`:

   ```javascript
   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;
   ```