Scribd
Upload
10 views6 pages

Devops 4 Sasiauto

This document provides a step-by-step guide for setting up a React app, initializing Git, creating a new branch, editing a contact form with validation, and pushing changes to GitHub. It also addresses common issues related to GitHub permissions and offers solutions for configuring remote repositories. The guide emphasizes the importance of source code management practices using Git and GitHub.

Uploaded by

sriharshinigeethikayalamati
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views6 pages

Devops 4 Sasiauto

This document provides a step-by-step guide for setting up a React app, initializing Git, creating a new branch, editing a contact form with validation, and pushing changes to GitHub. It also addresses common issues related to GitHub permissions and offers solutions for configuring remote repositories. The guide emphasizes the importance of source code management practices using Git and GitHub.

Uploaded by

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

🧱 Step 1: Setup React App (if not done yet)

bash
Copy
Edit
npx create-react-app react-form-app
cd react-form-app
💾 Step 2: Initialize Git (if not already)
bash
Copy
Edit
git init
git remote add origin https://github.com/your-username/react-form-app.git
git add .
git commit -m "Initial commit with basic React app"
git push -u origin main
🌱 Step 3: Create a New Branch
bash
Copy
Edit
git checkout -b feature/form-validation
✍️ Step 4: Edit Your React Form Code
In src/ContactForm.js, add or update the form like this:

jsx
Copy
Edit
import React from 'react';

function ContactForm() {
const [name, setName] = React.useState("");

const handleSubmit = (e) => {


e.preventDefault();
if (!name.trim()) {
alert("Please enter your name.");
return;
}
alert(`Hello, ${name}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Your Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}

export default ContactForm;


Then use it in App.js:

jsx
Copy
Edit
import ContactForm from './ContactForm';

function App() {
return (
<div>
<h1>React Form App</h1>
<ContactForm />
</div>
);
}
💾 Step 5: Commit the Changes
bash
Copy
Edit
git add .
git commit -m "Add simple validation to form"
🔀 Step 6: Merge Back to Main
bash
Copy
Edit
git checkout main
git merge feature/form-validation
git push origin main
🧹 Step 7: Clean Up
bash
Copy
Edit
git branch -d feature/form-validation
✅ Done!

You just:

Made a new branch

Changed your React form

Merged it back to main

Pushed to GitHub
No PRs, no fuss. 🎉

Want me to give you copy-paste-ready code for another form feature?

You said:
Q4. Practice source code management on GitHub:

- Branching and merging strategy


- Work with your React form code

gve easily step by step

ChatGPT said:
Absolutely! Here's a super simple and clear step-by-step guide for:

✅ Q4. Practice source code management on GitHub


Branching and merging strategy

Work with your React form code

No PRs, just local git + GitHub.

🚀 Step-by-Step (EASY)
🔹 Step 1: Create React App
bash
Copy
Edit
npx create-react-app react-form-app
cd react-form-app
🔹 Step 2: Initialize Git & Connect to GitHub
bash
Copy
Edit
git init
git remote add origin https://github.com/your-username/react-form-app.git
git add .
git commit -m "Initial commit"
git push -u origin main
🔹 Step 3: Create a New Branch
bash
Copy
Edit
git checkout -b feature/form-update
Now you are working in a separate branch.

🔹 Step 4: Edit React Form Code


Create src/ContactForm.js:

jsx
Copy
Edit
import React, { useState } from 'react';

function ContactForm() {
const [name, setName] = useState("");

const handleSubmit = (e) => {


e.preventDefault();
if (!name.trim()) {
alert("Please enter your name.");
return;
}
alert(`Hello, ${name}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={name}
placeholder="Your Name"
onChange={(e) => setName(e.target.value)}
/>
<button type="submit">Submit</button>
</form>
);
}

export default ContactForm;


Then update App.js:

jsx
Copy
Edit
import ContactForm from './ContactForm';

function App() {
return (
<div>
<h1>React Form</h1>
<ContactForm />
</div>
);
}

export default App;


🔹 Step 5: Commit Your Change
bash
Copy
Edit
git add .
git commit -m "Add validation to form"
🔹 Step 6: Merge the Branch into Main
bash
Copy
Edit
git checkout main
git merge feature/form-update
🔹 Step 7: Push Final Code to GitHub
bash
Copy
Edit
git push origin main
🔹 Step 8: (Optional) Delete the Branch
bash
Copy
Edit
git branch -d feature/form-update
✅ You’ve Practiced:
GitHub-based source code management

Branching & merging

React form editing

Want me to give you a ZIP-ready version of this code or another feature to try
next?
You said:
git push -u origin main
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights


and the repository exists.
PS C:\devops4\react-form-app> git remote add origin
https://github.com/geethika138/devops_4.git
error: remote origin already exists.
PS C:\devops4\react-form-app> git push -u origin main
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights


and the repository exists.
PS C:\devops4\react-form-app>

ChatGPT said:
Thanks for sharing the error—this happens when your Git is trying to use SSH, but
your GitHub access is set up with HTTPS or you don’t have the SSH key configured
properly.

Let’s fix it step by step:

✅ Step 1: Check Current Git Remote


Run this:

bash
Copy
Edit
git remote -v
You’ll probably see something like:

bash
Copy
Edit
origin [email protected]:geethika138/devops_4.git (fetch)
origin [email protected]:geethika138/devops_4.git (push)
This shows it's using SSH, which is causing the permission error.

🔄 Step 2: Fix by Changing Remote to HTTPS


Run this to remove the SSH remote:

bash
Copy
Edit
git remote remove origin
Now, add the remote again using HTTPS:

bash
Copy
Edit
git remote add origin https://github.com/geethika138/devops_4.git
🚀 Step 3: Push to GitHub Again
Now push your code:

bash
Copy
Edit
git push -u origin main
It will ask for your GitHub username and a token (not password).

🔐 Step 4: Get a GitHub Personal Access Token (if needed)


If you’re asked for a password and it doesn’t work, go to:

🔗 https://github.com/settings/tokens

Click Generate new token (classic)

Select repo permissions

Generate, then copy and paste the token when Git asks for a password

✅ Done!
Let me know if you want to set up SSH keys instead for long-term use (no token
prompts). Want help with that too?

You might also like