Getting Start with Front-End Journey with Sheryians Coding Schools (Front-End Domination : Create any thing with Code)
Embark on an insightful journey as we unravel the intricacies of our learning platform. Navigate uncertainties with proven techniques, ensuring a smooth learning experience. This video serves as your guide, equipping you to confidently resolve doubts and make the most of your educational adventure
Dive into the essentials! This video serves as your gateway to the world of programming. From laying the foundation with basics to providing a step-by-step installation guide, it's your go-to resource for a smooth start on your coding journey
Embark on the HTML adventure! This video introduces you to the building blocks of web development. Uncover the power of HTML as we demystify its essentials, setting the stage for your journey into the fascinating world of coding.
- HTMl level 1 Craft a robust coding foundation with HTML! This video guides you through the essentials, ensuring you build a sturdy base for your web development journey. From tags to structure, master the art of creating solid HTML structures.
- HTML Level 2 Dive into HTML mastery! This video breaks down the magic of HTML tags. Unlock the power of these building blocks, understanding how each tag contributes to the creation of dynamic and structured web content.
Demystifying HTML5 Semantic Elements! Learn what they are and how to wield them effectively. This video offers insights into utilizing HTML5 Semantic Elements to enhance website structure and accessibility.
CSS, or Cascading Style Sheets, is the language used to control the presentation and layout of web pages. It allows you to define the visual style of HTML elements, including fonts, colors, spacing, and more.
Uncover the power of layout design! Dive into 'CSS Grid: A Complete Guide to CSS Grid' and master the art of creating dynamic, responsive layouts. Explore the versatility of CSS Grid for modern web design.
Project Link - https://in.pinterest.com/pin/825214331746058643/feedback/?invite_code=689163d3868f4d64a87a3871664a5557&sender_id=825214469129958622
Project Link - https://in.pinterest.com/pin/825214331745736027/feedback/?invite_code=eeb26c2039134ae9bcddc4c5d10d622a&sender_id=825214469129958622
Responsive web development is all about creating websites that adapt to various screen sizes and devices. In this topic, you'll get a fundamental introduction to the principles and techniques behind building web pages that look great on everything from large desktop monitors to tiny mobile screens.
--> Understanding Units - px - % - vw,vh - vmax,vmin - em,rem
--> Layout of website - absolute vs flex
--> flexbox - Display flex - aligning items in x and y axis - flex direction - flex wrap
--> CSS Media Queries - min height, min width - min width, max width
--> Key points to keep in mind to make website responsive
CSS flexbox CSS Units Responsive Typography Mobile-First Approach Flexible Images and Media Practice! Practice! Practice!!
Unlock the world of captivating web design! Dive into 'Introduction to CSS Animations' and discover the magic of breathing life into your websites. Learn the basics of CSS animations, from transitions to keyframes, and embark on a journey to create visually stunning and dynamic web experiences!
The CSS Responsive Project is a hands-on exploration of creating a responsive web project. In this introduction, you'll get an overview of what to expect in this project and the importance of making web content adaptable to various screen sizes.
Unlock creativity in action! Discover 'Introduction to CSS Bonus Project' and embark on a hands-on journey. Elevate your skills by diving into this project, applying foundational CSS knowledge to create a captivating web masterpiece.
Project Link - https://abhishekshrivastav73.github.io/Dribbble-Clone/
Master Tailwind CSS in a single session! Dive into a comprehensive guide covering the entire spectrum of Tailwind CSS. Elevate your skills and streamline your workflow with this powerful utility-first framework.
Created Paytm Clone for Practicing Tailwind CSS. This is not included in Course.
JavaScript is a versatile and essential programming language for web development. This topic serves as your entry point into the world of JavaScript, providing an overview of its role in web development and its significance in creating interactive web pages.
-JS the language
-JS Developer - breiden eich
-Managed by ECMA
-JS the DOM - creating
-Basics
-Error check in console
-Inbult features
-variables constants
-compilers & interpreters
-window types
-conditionals loops
-functions return
-undefined not defined null
-arrays objects questions
-prototypes prototypal inheritance
-asynchronous synchronous js
-es6 climax -questions
-miscellaneous switch case and ternary do-while forin forof
-interview prep
-call apply bind this prototypal inheritance
Master advanced JavaScript concepts in a single session! Dive into an intensive guide covering the breadth of advanced JavaScript topics. Elevate your skills and deepen your understanding of complex JavaScript functionalities.
-Understanding this
// Global scope
// Global scope mtlb kisi bhi braces k andar code na hona
console.log(this); // Window
// in Function
(function(){
console.log(this); // Window
})()
// In method - Object
// method-- Object k andar jab koi function h usko method bolte hai
let obj = {
name : 'Lucifer',
default : function(){
console.log(this); // Returns object
}
}
obj.default();
let obj2 = {
title : {
age :22,
head : function(){
console.log(this); // Returns the object jisme woh bana hai
}
}
}
obj2.title.head();
// Function inside method (es5)
let user = {
sayName : function(){
console.log(this); // Ye object return kr rha hai
function childFnc(){
console.log(this); // ye window return kr rha hai, to isse koi object ki value nahi access kr skte hai
}
childFnc()
}
}
user.sayName() // Returns Window
// functions inside method (es6) - object
// es6 function == arrow function
let userDetails = {
name : function(){
let child =()=>{
console.log(this); //returns object
}
child()
}
}
userDetails.name();
// Value of this in event listener
document.querySelector('button').addEventListener('click',function(){
console.log(this);// issme this refer krega uss element ko jisko select kr rakha hai
this.style.backgroundColor = "cyan"
this.style.color = "white"
})
-Prototypal Inheritance
-Closures
-Event Delegation
-Higher-Order Functions
-Error Handling (try...catch blocks)
-call apply bind
-Custom Events - Below are steps to Create a Custom Event
const evt = new Event('chacha');
let btn = document.querySelector('#btn');
btn.addEventListener('chacha',function(){
console.log('Chacha vala event run hogya');
})
// to Run event
btn.dispatchEvent(evt)
Unlocking Asynchronous JavaScript: Navigate the world of async programming. Understand promises, async/await, and callbacks, mastering the art of handling asynchronous tasks in JavaScript.
Ways to write Asynchronous Code
-Set Timeout
-Set Interval
-Promises
-Axois
-Fetch API
-
setTimeout
setTimeout(() => { console.log("Timeout runs !!!"); }, 1000); -
setInterval
setInterval(() => { console.log("Interval runs !!!"); }, 1000); -
Fetch API
fetch("https://randomuser.me/api") .then((data) => data.json()) .then((res) => console.log(res)); -
Axios (or other HTTP libraries)
-
use CDN for using axios
axios .get("https://randomuser.me/api") .then((res) => console.log(res.data.results[0]));
-
-
callbacks
-
Promises
-
Async/Await
- Event Loop
- Callbacks vs Promises vs Async/Await
- Generators
- Error Handling in Asynchronous Code
- Web Workers
- AJAX
JavaScript animations are a dynamic way to bring life and interactivity to your web projects. This topic serves as your introduction to the world of JavaScript animations, explaining their importance and how they can enhance user experiences on your website.
-DOM
-DOM Manipulation
-Accessing Elements:
document.querySelector()
-Modifying Elements:
innerHTMl, textContent
-Manipulating Styles and Classes:
style
classList
-Creating and Deleting Elements:
createElement()
appendChild()
removeChild()
-Event Handling:
addEventListener()
-Event Object
Embark on mastery! Join 'Introduction to JS Practice Like Hell Series' to dive into intense JavaScript practice sessions. Level up your skills with hands-on challenges, solidifying your expertise in JavaScript programming.
- Create an HTML page with a button. When the button is clicked, change the text of a paragraph element.
- Create a page with two images and a button. When the button is clicked, swap the source attribute of the images.
- Create a form with input fields and a submit button. Use JavaScript to validate the form and display an error message if the input is invalid.
- Create an unordered list. Allow users to add and remove list items dynamically using buttons.
- Build a countdown timer that starts when a button is clicked and updates the display in real-time.
- Create a tabbed interface where clicking on tabs displays different content sections without page reload.
- Display a progress bar that updates in real-time, showing the progress of a task, download, or form submission.
- Create a search bar that displays live search results as users type, updating the results without requiring a full page reload.
- Build a character counter for a text area or input field, which updates real-time as the user types and enforces a character limit.
- Show a progress bar which shows how much page has been scrolled.
This introductory topic sets the stage for an exciting journey into advanced web animation techniques. GSAP (GreenSock Animation Platform), ScrollTrigger, Locomotive, and other tools are introduced as powerful resources for creating dynamic and engaging web animations.
Embark on our final project—a polished clone of obys.agency, showcasing everything you've learned in the course. We've poured our hearts into making the website and videos as simple as possible, a testament to our dedication and hard work. This website isn't just visually appealing; it's a showcase of seamless design and captivating animations. Dive into six engaging videos, each offering a glimpse behind the scenes. The introduction video sets the tone, giving you a sneak peek into the inspiration. Join me in celebrating the beauty of simplicity and skill in this front-end development masterpiece! 🚀✨
- JavaScript Library for creating user interfaces.
Embark on the React JS journey! Discover the essentials in 'Introduction to React JS'. Uncover the basics and get started with this popular JavaScript library for building user interfaces.
- UI Library
- for solving the real time problem (facebook build this cool library)
- for notification update on real time basically (2013).
Understanding React JS: Delve into its theory and historical roots. Explore the foundational aspects and historical development of React JS
-
react -> lang X
-
react -> framework X
-
react -> technology X
-
react -> library
-
facebook - 2013
-
2015 - open source
- Copy of real DOM
jab websites par khhob sare change hote hai to khoob saara repaint hota hai wo bhi wo elements jo badle bhi nahi, aur ye website ko slow down kar deta hai, is cheej se bhi bachne ke liyein facebook ne react create ki gyi
-
likes count, notification count side by side (change/update)
-
when ever there is change in UI the DOM repaint or rerender things
-
This is not the case with virtual DOM or with React. React solves this problem of not repaint Those part which was not updated or changed only re render things which are updated.
Core Foundations of React JS: 'Essentials - Everything You Need to Learn'. Delve into essential components, foundational concepts, and crucial skills required to master React JS in this comprehensive guide
-
array objects destructuring import and export
-
map filter arrow fncs (implicit return) spread operator
-
Copy array using spread operator
let arr = [1, 2, 3, 4]; // real copy let arr2 = [...arr]; arr.pop(); console.log(arr, arr2); // object copy let state = { name: "lucky", age: 23 }; let stateCopy = { ...state }; state.name = "HArsh"; console.log(state, stateCopy); -
Object Destructuring
let obj = { name: "lucky", age: 23 }; let { name, age } = obj; console.log(name); console.log(age); -
Array Destructuring
let arr = [12, function () {}]; let [first, sec] = arr; console.log(first); console.log(sec); -
import export
-
hum log component banaate hai, component matlab page ka hissaa
-
navbar sidebar cart home landing page second page, ab dikkat yeh aati hai har hissa alag alag component hai aur components ko hum log alag alag files mein rakhte hai, to inko last mein jodna bhi padta hai, jodne ke liyein use hota hai import & export
-
navbar - export
-
sidebar - export
-
cart - import navbar sidebar
-
main - import navbar
function Cart() {} export default Cart; export function Cart(){ } import Cart from "./script"; import { Cart } from ".script.js"; -
arrow functions
let sum = (a, b) => a + b; console.log(sum(10, 12)); -
impicit return
let value = val=>val+10; console.log(value(20)); -
map filter
-
dono hi array pe chlte hai, aur dono kaa kaam hai array par kuchh perform krna hand "ek naya array return karna"
let arr = [1, 2, 3, 4, 5]; -
map - har element par kuch karo aur naye array mein rakho
let arr2 = arr.map((item) => item * 10); console.log(arr2); let state = [11, 22, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14]; let greaterFive = state.map((elem) => (elem > 5 ? elem + 5 : elem)); console.log(greaterFive); -
map filter mein ek hi farak hai, map saare bande lautata hai matlab ki count kam nahi hoga, filter bando ko kam kar skta hai
-
ek array mein sabhi nums jo ki 5 se bade hai unmein 10 add kro
-
jab originl array ka size kam naa hona ho waha map use hota hai
-
jab original array ka size kam krna ho toh wha filter use hota hai
-
ek array mein se saare wo nums hata do jo ki 5 se chhote hai
-
filter
let arr = [1, 2, 3, 4, 5, 6]; let filterArr = arr.filter((elem) => elem > 5); console.log(filterArr);
Extensions:
- tabnine
- prettier
Download :
-
node js
-
use vite vs create react app
npm create vite@latest vite project : setup cd setup npm i npm run dev
-
jsx -> jsx is actually a very similar looking structure like HTMl but with super powers
-
jsx sirf dikhta hai HTML ki trah par hota nhi
-
It converted into React.createElement
-
jsx is very similar to HTML but with superpowers
-
conversion to javascript
<h1>{login ? 'profile':'login'}</h1> <h1>Hey {2 + 2}</h1> // output Hey 4
-
Component
-
React "react" when changes occurs
function App(){ return ( <div> <h1>App Component</h1> </div> ) } -
Component is a reusable code
-
Header
import React from "react"; const Header = () => { return ( <div> <h1>Header</h1> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Contact</a> </li> <li> <a href="#">Skills</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> </ul> </div> ); }; export default Header; -
Configure Tailwind CSS
-
Creating Card Component
-
Use Array map method.
const data = ["ajay", "rahul", "sachin", "udesh"]; {data.map((item, index) => ( <h1 key={index}>{item}</h1> ))} -
Showing Card With Data
-
Create Array of data
const data = [ { image:'', name:'', desc:'' } ] -
and use map method to use different data with card.
-
unnecessary div creation stop
-
Enclosed all elements in one wrapper without creating div or other element use React Fragment
<> </> <React.Fragment> </React.Fragment>
-
Instock Check
{item.inStock ? "InStock" : "Out Of Stock"} -
Handling Events:
<button onClick={() => console.log("download song")} > Download Now </button> // seperatae function const handleClick = () => {console.log("mouse over event"); };
-
state variable takes care of react updation
-
It will take care of react changes
-
state ek data hota hai, react is data ka khayaal rkhta hai, jab bhi ye data change hota hai react page ko update karta hai
-
state koi bhi data ho skta hai, jaise ki score = 0
const [score,setScore] = useState(0); // onClick par apply krdo const handleScore = () => { setScore(score + 1); }; -
Based on Previous Value
onClick={() => setVal((prev) => prev + 1)} -
Use object data in useState
const [data,setData] = useState({name:'Lucky',isBanned:false}); onClick={() => setData({ name: "Divyanshu", isBanned: true })} onClick={() => setData({ ...data, isBanned: !data.isBanned })}
-
useState not update synchronously
-
add object property to useState
-
useState state ko turant update nahi karta, wo useState state ko update karta hai apne hisaab se function completion ke baad to fix performance issue
const [val, setVal] = useState({ name: "lucky",age: 23 }); <h1>Name : {val.name}</h1> <h2>Age : {val.age}</h2> <h3>Role : {val.gender}</h3> <button className="px-3 py-1 mt-3 bg-red-500 text-md rounded-full" onClick={() => {setVal({ ...val, gender: "Male" }) console.log(val); } } > Click </button> -
Use Array in useState
{val.map((item, index) => ( <h1 key={index}>{item}</h1> ))} <button onClick={() => setVal(() => val.filter((item, index) => index != 2))} // onClick={() => // setVal(() => { // return val.filter((item, index) => index != val.length - 1); // }) // } className="px-3 py-1 text-md bg-blue-500 rounded-full text-white" > Change </button> -
Remove even values from an Array
onClick={() => setVal(() => val.filter((item, index) => item % 2 !== 0)) } -
Arrays Addition
onClick={() => setVal([...val, 10])} -
Change array of an object
const [val, setVal] = useState([ { name: "Abhi", age: 23 }, { name: "Aman", age: 34 }, { name: "Anush", age: 25 }, ]); onClick={() => setVal(() => val.map((item, index) => item.name === "Shivam" ? { name: "Aman", age: 55 } : item ) ) }
-
Solve small-small questions
-
print bahar jaao if val is false and print mat jao iv val is true
<p>{data === false ? "BAHAR JAO" : "MAT JAO"}</p> -
Use React icons
npm i react-icons --save -
switch Images:
<div className="w-60 relative h-32 flex bg-zinc-500 rounded-md overflow-hidden"> <img className={`w-full h-full ${ val === false ? "-translate-x-[0%]" : "-translate-x-[100%]" } transition-transform ease-out duration-300 object-cover shrink-0`} src="https://images.unsplash.com/photo-1682685797743-3a7b6b8d8149?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="card" /> <img className={`w-full h-full transition-transform ease-out duration-300 ${ val === false ? "-translate-x-[0%]" : "-translate-x-[100%]" } object-cover shrink-0`} src="https://images.unsplash.com/photo-1702234867439-bec43ed4e369?q=80&w=1472&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="card" /> <span onClick={() => setVal(() => !val)} className="w-10 h-10 bg-[#dadada8b] flex items-center justify-center rounded-full absolute bottom-[0%] left-1/2 -translate-x-[50%] -translate-y-[50%]" > <FaArrowRight size={"1em"} /> </span> </div>
-
Pass Data via prop
-
props use hote hai aapke components ko reuable bnane ke liyein consider karo aapke pass ek button hai and aapko us button ko alag alag jagah daalna hai app mein, to aap ek button ek mein baaneyin aur uska data hard coded karne ki jagah parent component se send karde and child component par use kar le
<Props btn={"Know More"} color="bg-blue-600" /> <Props btn={"Learn More"} color="bg-red-600" /> <button className={`px-3 py-1 ${color} text-zinc-100 text-xs rounded m-2`} > {btn} </button> -
Array of object change via props functions
const handleFriendsBtn = (index) => { setRealData((prev) => { return prev.map((item, ind) => { if (ind === index) { return { ...item, friends: !item.friends }; } return item; }); }); }; -
Dynamic class change
<button onClick={() => handleFriendsBtn(index)} className={`px-3 mt-4 py-1 text-sm text-white ${ friends ? "bg-green-600" : "bg-blue-500" } font-semibold rounded-md`} > {friends ? "Add Friend" : "Friend"} {/* {friends ? "ADD FRIEND" : "Friends"} */} </button>
-
Create card add build feature Add To favourites
const [song, setSong] = useState(data); const [favouritesCount, setFavouritesCount] = useState(0); const handleFavourites = (index) => { setSong((prev) => { return prev.map((item, indx) => { if (indx === index) { return { ...item, favourites: !item.favourites }; } return item; }); }); setFavouritesCount((prev) => prev + 1); }; <div className="p-10"> <Header favouritesCount={favouritesCount} setFavouritesCount={setFavouritesCount} /> <div className="w-full h-52 flex gap-20 flex-wrap mt-10 justify-between"> {song.map((item, indx) => ( <Card song={item} handleFavourites={handleFavourites} index={indx} /> ))} </div>
-
CSS Modules - jismein aap kabhi kisi website ka code dekhte ho aur wha par aapko css classes ka naam bada aada teda dikhta hai
-
UI library- tailwind css, material UI,bootstrap,Chakra UI
-
create file style.module.css
.a{ color:'red'; }
-
Form Handling
-
form basic nature or we can say default nature is to get submmitted but react says no page reload
-
website submit ho jaati hai form submit krne par.
-
How react handle things in Form
-
React prevents Form Submission
-
use Ref - is trike mein hum har input ko select kar lete hai and unki value tab nikaalte hai jab form submit hota hai
-
use ref ke through html input ko select kar skte hai
const name = useRef(null); const password = useRef(null); const handleSubmit = (e) => { e.preventDefault(); console.log(name.current.value, password.current.value); }; -
controlled components
const [username, setName] = useState({ name: "", age: "" }); const handleSubmit = (e) => { e.preventDefault(); console.log(username); }; <form action="" onSubmit={handleSubmit}> <input type="text" placeholder="name" onChange={(e) => setName({ ...username, name: e.target.value })} /> <input type="text" placeholder="age" onChange={(e) => setName({ ...username, age: e.target.value })} /> <input type="submit" /> </form> -
react hook form
-
install react-form-hook package
npm i react-hook-form import React from "react"; import { useForm } from "react-hook-form"; const ReactForm = () => { const { register, handleSubmit } = useForm(); // console.log(register()); return ( <div> <form action="" onSubmit={handleSubmit((data) => console.log(data))}> <input className="px-3 mt-2 border-2" {...register("name")} type="text" placeholder="name" />{" "} <br /> <input className="px-3 mt-2 border-2" {...register("email")} type="email" placeholder="email" />{" "} <br /> <input className="px-3 mt-2 border-2" {...register("age")} type="text" placeholder="name" />{" "} <br /> <input className="px-3 mt-2 border-2" {...register("color")} type="color" placeholder="email" />{" "} <br /> <input className="px-3 mt-2 border-2" {...register("password")} type="password" placeholder="name" />{" "} <br /> <br /> <textarea className="px-3 mt-2 border-2" name="comment" {...register("comment")} placeholder="Write your feedback" cols="30" rows="10" ></textarea>{" "} <br /> <br /> <input type="submit" /> </form> </div> ); }; export default ReactForm;
-
Form Handle Exercise
-
App - Cards - Card - Form
-
Add form Data into Card component
const [users, setUsers] = useState([]); const addFormData = (data) => { setUsers([...users, data]); }; -
Reset Input Values
// provided by react-hook-form reset() -
Remove Elements From Card
const handleRemove = (id) => { setUsers(() => users.filter((item, index) => index != id)); };
-
Configure react router to use react-routing
-
React Uses single page approach in application i.e. no page reload after page changes, for this we use react routing.
-
To move From one Page to another without reloading the website, so that website is called Web Application (for not reloading whole page).
npm i react-router-dom -
Wrap Main Container main.jsx
<BrowserRouter> <App/> </BrowserRouter> -
Create Navbar
<nav> <Link to="/">Home</Link> <Link to="/user">User</Link> <Link to="/about">Home</Link> <Link to="/services">services</Link> </nav> // Implement Routing <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/user" element={<User />} /> <Route path="/services" element={<Services />} /> </Routes> -
Use navigate hook for back to particular route
const navigate = useNavigate(); const back = () => { navigate("/"); // console.log("hey"); }; -
Use NavLink to active & de-Activate class
<NavLink style={(e) => { console.log(e); }} to="/" > Home </NavLink> -
Change color three ways :
-
through style
style={(e) => { return { color: e.isActive ? "tomato" : "" }; }}
-
Through className :
<NavLink className={(e) => { return [ e.isActive ? "text-red-300" : "", e.isActive ? "font-semibold text-xl" : "", ].join(" "); }} to="/about" > About
-
-
Inside Child Component
<NavLink to="/user"> {(e) => { return ( <span className={[ e.isActive ? "text-red-300" : "", e.isActive ? "font-semibold text-xl" : "", ].join(" ")} > User </span> ); }} {/* <span>User</span> */} </NavLink>
-
The concept for connecting frontEnd With Backend is called AJAX (Asynchronous JavaScript XML) & which implements this communication is through fetch/axois.
-
API is an communication medium to build relation
-
API allow the communication with each other using requests and responses.
-
Using FETCH/AXIOS Method we can access third party API.
-
Connect frontEnd with Backend through an API
import axios from "axios"; import "./App.css"; import { useState } from "react"; function App() { const [products, setProducts] = useState([]); const getProducts = () => { const api = "https://fakestoreapi.com/products"; axios .get(api) .then((products) => { // console.log(products); setProducts(products.data); }) .catch((err) => console.log(err.message)); }; const addProducts = () => { const api = "https://fakestoreapi.com/products"; axios .post(api, { title: "test product", price: 13.5, description: "lorem ipsum set", image: "https://i.pravatar.cc", category: "electronic", }) .then((products) => { console.log(products); }) .catch((err) => console.log(err.message)); }; return ( <div className="p-4"> <h1>App</h1> <button onClick={getProducts} className="px-3 py-2 bg-orange-500 mt-4 rounded-sm text-white text-sm" > Get Products </button> <button onClick={addProducts} className="px-3 py-2 mx-10 bg-orange-500 mt-4 rounded-sm text-white text-sm" > Add Products </button> <hr className="my-10" /> <ul> {products.length > 0 ? products.map((item, index) => ( <li key={index} className="rounded p-5 mb-2 bg-orange-300"> Product Name: {item.title} </li> )) : "Loading....!!"} </ul> </div> ); } export default App; -
LifeCycle Method name useEffect in functional Component:(Three Types of LifeCycle Methods)
- Component Mounting - creation - Component Updating - updation (when useState is Changed or changes in view) - Component UnMounting - deletion/destroy -
Component Creation
useEffect(()=>{ console.log('Component Creation'); return ()=>{ console.log('Component Deletion From DOM'); } }) useEffect(() => { console.log("SErvices Run"); return () => { console.log("SErvice Destroyed"); }; });
-
Hook - useEffect() on state change
-
Refresh : Component Deletion + Component Updation
-
Update : Component Deletion + Component Creation
const [first, setFirst] = useState("This is normal data"); const [second, setSecond] = useState("This is very Large Data"); useEffect(() => { console.log("SErvices Run"); return () => { console.log("SErvice Destroyed"); }; }, [second]); -
Call API When component is loaded using useEffect HOOk we call it.
useEffect(() => { const api = "https://fakestoreapi.com/products"; axios .get(api) .then((products) => { // console.log(products); setProducts(products.data); }) .catch((err) => console.log(err.message)); }, []); -
OutSourcing the Code
-
writing import axois from 'axios' causes sometimes problem & write this line in 10 20 30 40 .. components is lengthy & create issue for Us
-
While requesting to the API - the Header information, cookies,authorization,token, many things generated & for this we have to take of this to not to call an API when other component is added
-
Login - profile, timeline , chats enabled
-
Call one time & reference call everytime (create one time object).
-
Not call axios everytime.
import axios from "axios"; // export { axios }; const instance = axios.create({ baseURL: "https://fakestoreapi.com", }); axios .get("/users") .then((users) => { console.log(users); // setProducts(users.address); }) .catch((err) => console.log(err.message)); export default instance;
-
It solves Prop Drilling Problem
-
Prop Drilling means sharing data between one component to another & another to another means parent to child to son
-
From Parent to Child Data Pass only .
-
Wrap Application via context
-
create context & create UserContext
import React, { createContext, useState } from "react"; export const UserContext = createContext(); const Context = (props) => { // console.log(props); const [users, setUser] = useState([ { id: 0, username: "John Doe", city: "USA", }, { id: 1, username: "Lucky", city: "Delhi", }, { id: 2, username: "Harsh", city: "Bhopal", }, ]); return ( <> <UserContext.Provider value={{ users, setUser }}> {props.children} </UserContext.Provider> </> ); }; export default Context; -
use data via components
const { users, setUser } = useContext(UserContext); -
use navigate hook for go back
const navigate= useNavigate(); // apply on go back button const handleBack =()=>{ navigate('/user'); }
- Essential Redux Insights: Gain a comprehensive understanding of Redux. This guide covers everything you need to know about Redux, offering key insights into state management for robust React applications.
- HandsOn in Redux