# 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:
```bash
cd Desktop
```
2. Next, go into the frontend folder:
```bash
cd frontend
```
3. Then, go into the front-end folder where your React app is located:
```bash
cd front-end
```
After this, your command prompt should look like this:
```bash
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:
```bash
npm start
```
2. This will start the development server and open the app in your browser at [`http://localhost:3000/`](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,
[name]: value,
}));
};
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 (
);
}
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 (
Patient Form
{/* Render the Form component */}
);
}
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:
```markdown
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:
```bash
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](https://medium.com) 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.