Day 2 - EMR task

Here are the instructions you provided, formatted for easy reading:

---

Task 1: Using the Existing React App (front-end) and Building the Patient Form

Step 1: Open Command Prompt

1. Press the Windows key + R, then type cmd and hit Enter. This will open Command Prompt.

---

Step 2: Navigate to the Project Directory

Now that Command Prompt is open, let's navigate to the front-end React app you created.

1. Type the following command to go to the Desktop directory:

    cd Desktop
   

2. Next, go into the frontend folder:

    cd frontend
   

3. Then, go into the front-end folder where your React app is located:

    cd front-end
   

   After this, your command prompt should look like this:

    C:\Users\YourName\Desktop\frontend\front-end>
   

---

Step 3: Start the React App

Since you're already inside the front-end project folder, let’s run the app:

1. Start the React app by typing:

    npm start
   

2. This will start the development server and open the app in your browser at http://localhost:3000/. If it doesn’t open automatically, just type that URL into your browser’s address bar.

---

Step 4: Create the Patient Form

Now, let's create the form that will collect the patient's data.

1. Create a new file called Form.js inside the src folder:

   • In File Explorer, navigate to your front-end project folder and go to src folder.

   • Right-click inside the src folder, choose New > Text Document, and name it Form.js.

2. Add the following code to the Form.js file:

   ```jsx import React, { useState } from 'react';

   function Form() { const [patient, setPatient] = useState({ name: '', age: '', gender: '', });

   const handleChange = (e) => { const { name, value } = e.target; setPatient((prev) => ({ ...prev,

})); };

const handleSubmit = (e) => { e.preventDefault();

// Simple validation to ensure no fields are empty if (!patient.name || !patient.age || !patient.gender) { alert('Please fill in all fields'); return; }

// Log the patient data to the console (you can later save to backend or local storage) console.log('Patient data submitted:', patient); };

return (

Name:
Age:
Gender:
Submit ); }

export default Form;

---

#### Step 5: Integrate the Form into `App.js`

Now we need to render this form inside the main `App.js` file.

1. Open **App.js** (inside the `src` folder) and modify it to import and use the `Form` component:

    ```jsx
    import React from 'react';
    import './App.css';
    import Form from './Form'; // Import the Form component

    function App() {
      return (
        <div className="App">
          <h1>Patient Form</h1>
          <Form /> {/* Render the Form component */}
        </div>
      );
    }

    export default App;

---

Step 6: Verify It’s Working

1. Check your browser: Since the React app should already be running (thanks to npm start), the browser should automatically refresh, and you should see the Patient Form with fields for Name, Age, and Gender.

2. Test the form: Try entering some data and clicking the Submit button. The form data will be logged in the browser’s developer console.

   • To open the console, right-click on the webpage, select Inspect, then go to the Console tab.

---

Task 2: Write a Technical Article on How to Create Your First React App

Now that the React app and the form are set up, let’s move on to writing the technical article for Medium.

Step 1: Write the Article

Here’s a simple outline you can follow to write the article.

1. Introduction:

   • Start by explaining what React is and why it's widely used.

   • Mention that in this tutorial, you'll show how to create a simple React app and add a form to collect data.

2. Setting Up the React App:

   • Provide the steps to set up the React environment, like installing Node.js and npm.

   • Explain how to create a new React app using create-react-app (though since she already has the app, she can skip this part and just explain how it was done previously).

Example:

    First, ensure that you have Node.js and npm installed on your system. Then, create a new React app with the following command:

    npx create-react-app patient-form

Once the app is created, navigate to the app's directory and run:

    cd patient-form
    npm start

This will open the app in your browser.

3. Building the Form:

   • Describe how you created the Form component and added input fields for the patient's name, age, and gender.

   • Explain the use of useState to manage form data and the handleSubmit function to handle form submission.

4. Running the App:

   • Walk through how to run the app with npm start and check the output in the browser.

5. Conclusion:

   • Summarize what was built and how easy it is to start with React.

   • Mention possible next steps, like connecting the form to a backend or adding more features to the form.

Step 2: Publish the Article

1. Sign in to Medium: Go to Medium and log in or create an account if you don’t already have one.

2. Create a New Post: Click on your profile picture in the top-right corner and select New Story.

3. Copy and Paste the Article: Copy the article you wrote in your text editor and paste it into Medium's editor.

4. Publish: Once you're happy with your article, click the Publish button at the top-right and follow the instructions to make your post public.

---

Task 3: Create a Patient Form with React (Already Done!)

You’ve already completed this part by creating the patient form in React and rendering it in your App.js file.

---

Summary of Tasks Completed

1. Used the existing React app (front-end) and started it using npm start.

2. Built a patient form that collects patient data (Name, Age, Gender).

3. Written and published a technical article on how to create your first React app and added the form functionality.

4. Tested the React app and confirmed the form works by logging data to the console.

---

Feel free to share if you have any wahala.