Road map of Frontend Developer (React)
Pintu Sharma
Posted on June 1, 2024
React Developer banne ke liye kuch important skills ka hona zaruri hai. Yeh skills aapko frontend development mein expert banane mein madad karenge. Yeh document unhi skills ko detail mein cover karta hai.
Documnet me,
- HTML (HyperText Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript
- Tailwind CSS
- React JS, Task and Importent Projects.
1. HTML (HyperText Markup Language)
- HTML web development ki foundation hai. Yeh ek markup language hai jo web pages ki structure define karti hai. React developer ke liye, HTML ki strong understanding honi chahiye kyunki React components bhi HTML structure par based hote hain.
- <!DOCTYPE html>: Yeh declaration document ka prakar aur HTML ka version (yahan HTML5) define karta hai.
1. h1 to h6 :
h1: Yeh sabse bada aur sabse important heading tag hai. Yeh usually page ke mukhya heading ko dikhata hai.
<h1>Yeh <h1> Heading Hai</h1>h2: Yeh dusra heading level hai, jo h1 se thoda chhota hota hai. Yeh secondary headings ke liye upayog hota hai.
<h2>Yeh <h2> Heading Hai</h2>h3: Yeh teesra heading level hai. Yeh h2 ke niche ki headings ke liye upayog hota hai.
<h3>Yeh <h3> Heading Hai</h3>h4: Yeh chautha heading level hai. Yeh aur bhi chhoti headings ko dikhane ke liye upayog hota hai.
<h4>Yeh <h4> Heading Hai</h4>h5: Yeh paanchwa heading level hai. Yeh h4 se chhota hota hai.
<h5>Yeh <h5> Heading Hai</h5>h6: Yeh chhatha aur sabse chhota heading level hai. Yeh sabse kam mahattvapurn headings ke liye upayog hota hai.
<h6>Yeh <h6> Heading Hai</h6>
2. img tag :
- img tag ka use image ko web page mein dikhane ke liye hota hai.
<img src='example.png' alt='img'/>
3. List(ol & ul) :
- HTML mein lists do tarah ki hoti hain: ordered list (
- ) aur unordered list (
- ). Ordered list ko numbers ya letters ke saath display kiya jata hai, jabki unordered list ko bullets ke saath display kiya jata hai. In dono ka example niche diya gaya hai:
- Ordered List :Items ko sequence mein dikhata hai.
<body>
<h1>Meri Pasandida Kitaben</h1>
<ol>
<li>Harry Potter</li>
<li>Lord of the Rings</li>
<li>To Kill a Mockingbird</li>
</ol>
</body>
output:
- Unordered List : Items ko non-sequence mein dikhata hai.
<body>
<h1>Shopping List</h1>
<ul>
<li>Doodh</li>
<li>Anda</li>
<li>Roti</li>
</ul>
</body>
output:
4. div Tag :
- HTML mein 'div' tag ka use ek division ya section create karne ke liye kiya jata hai. Ye tag ek container ki tarah kaam karta hai jisme aap dusre HTML elements ko group kar sakte hain. 'div' tag ka use generally styling ya layout ke purpose se hota hai, jise CSS ke saath style kiya ja sakta hai.
<body>
<div class="container">
<div class="header">
<h1>Yeh Header Hai</h1>
</div>
<div class="content">
<p>Yeh Content Section Hai.</p>
</div>
<div class="footer">
<p>Yeh Footer Hai.</p>
</div>
</div>
5. span Tag:
- HTML mein span tag inline elements ko group karne ke liye use hota hai. Ye tag kisi specific text ko style ya manipulate karne ke liye kaam aata hai bina line break create kiye. span tag ka use inline styling ke liye aur JavaScript ke sath bhi hota hai.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Span Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Yeh ek normal paragraph hai jisme kuch <span class="highlight">highlighted text</span> hai.</p>
</body>
</html>
output:
5. table Tag:
HTML mein table tag ka use tabular data ko display karne ke liye kiya jata hai. table tag ke andar kaafi sare nested tags hote hain jaise tr, th, aur td. In tags ka use table rows, headers, aur data cells banane ke liye kiya jata hai.
tr Tag: Ye tag table row create karta hai.
th Tag: Ye tag table header cell create karta hai. Is example mein headers "Name", "Age", aur "City" hain.
td Tag: Ye tag table data cell create karta hai. Is example mein data cells mein "Rahul", "25", "Mumbai" etc. hain.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Simple Table</h1>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Rahul</td>
<td>25</td>
<td>Mumbai</td>
</tr>
<tr>
<td>Anjali</td>
<td>30</td>
<td>Delhi</td>
</tr>
<tr>
<td>Raj</td>
<td>28</td>
<td>Bangalore</td>
</tr>
</table>
</body>
</html>
output:
2. CSS (Cascading Style Sheets)
- CSS ka use web pages ko visually appealing banane ke liye hota hai. Yeh HTML elements ko style dene ke liye use hota hai. React development mein CSS ka knowledge essential hai kyunki aapko apne components ko design aur style karna hota hai.
3. JavaScript
- JavaScript ek programming language hai jo web pages ko interactive banati hai. React khud JavaScript library hai, isliye JavaScript mein proficiency React development ke liye bahut zaruri hai. Yeh language aapko dynamic web applications banane mein madad karti hai.
4. Tailwind CSS
- Tailwind CSS ek utility-first CSS framework hai jo rapid UI development ke liye use hota hai. Yeh predefined classes provide karta hai jo aapko apne elements ko quickly style karne mein madad karti hain. React ke saath Tailwind CSS use karne se aapko fast aur efficient UI development ka advantage milta hai.
5. React JS
- React ek JavaScript library hai jo user interfaces banane ke liye use hoti hai. Yeh component-based architecture ko follow karta hai, jo reusability aur maintainability ko enhance karta hai. React ke fundamentals, state management, props, hooks, aur lifecycle methods ka knowledge ek successful React developer banne ke liye zaruri hai.
Posted on June 1, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024