Building a react project | bgChanger
Вставка
- Опубліковано 27 вер 2024
- Visit chaicode.com for all related materials, community help, source code etc.
Sara code yaha milta h
github.com/hit...
Discord pe yaha paaye jaate h:
hitesh.ai/discord
Instagram pe yaha paaye jaate h:
/ hiteshchoudharyofficial
Actually the initial state has color olive and the reload technically resets the state. So, it gets the olive color.
I think this is right
apna default color olive hai that's why after clicking
refresh its show olive color
Obviously
Same answer. ;)
agar latest color ko local storage mein save kr lein tou desired output aye gi
8:48 Note: Of your background Color doesn’t change, delete all the initial styling from index.css (don’t nt remove tailwind’s 3 lines of code)
saved me
Thanks bro❤
thanks
thanks man ❤🫂
not working don't know why it is not taking the width height as that of the page
literally this channel will become the best code channel on youtube one day
Channel hi banna hai.
Sir hamare already no 1 hai 😎
definitely bro but that'll happen only after you share this channel
❤️❤️❤️
@@chaiaurcodenext project todo app le aao sir
It's already the best.
But underrated.😅
Sir, the initial state is set once a page is reloaded.
Sir, I also understood why two curly braces were used in style part. coz one to show that it is a js statement + the second one for the object. style is an object.
last class mein aapne sikhaya tha ki code reusability ke liye ek component ko baar baar reuse kiya ja sakta hai. Yaha meine button ka component banate reuse kiya use.
Button.jsx
import React from "react"
function colName(color){
return color.charAt(0).toUpperCase() + color.slice(1);
}
function Button(props){
const buttonStyle = {
backgroundColor: props.color,
color: props.text || "white"
}
return (
{colName(props.color)}
);
};
export default Button
App.jsx
import { useState } from "react"
import Button from "./components/Button"
function App() {
const [color, setColor] = useState("olive");
const handleButtonClick = (color) => {
setColor(color);
}
return (
handleButtonClick("red")}/>
handleButtonClick("green")}/>
handleButtonClick("olive")}/>
handleButtonClick("grey")}/>
handleButtonClick("yellow")}/>
handleButtonClick("pink")}/>
handleButtonClick("purple")}/>
handleButtonClick("lavender")}/>
handleButtonClick("blue")}/>
handleButtonClick("white")}/>
handleButtonClick("black")}/>
)
}
export default App;
1:39 Paused and completed the task. My approach was a bit different, I created a component and passed required color in the props, which created a button with {props.color} text and executed onclick btn which passes to function colorChange where the props.color is set { document.body.style.bgColor = props.color; }
Thus it only took me 10-11 line of code and 7 component line code for 7 different colours.
Completed 9 videos loving it to be very honest its sometimes complicated to learn from english video but this playlist directly connects with the heart and mind or hum chai peene ke sath react ke concepts bhi nhi bhool paate. Thank you sir hitesh sir >>> college
17:15 as olive is the default value for variable color and on clicking button we are updating values & UI as well
specificity in css , inline style has been given highest priority , it is default color so it is olive
IMPORTANT TAKE AWAY FROM VIDEO
The on click method in React expects a function reference
You can't directly pass parameters inside the function, instead, you need to pass it as a reference or use arrow function syntax
17:12 Refresh karne pe olive is lie aa rah a kio ke usestate ki defualt value di ha humne
please check the video once again from 14:36, Onclick expect the function not function reference or function return value. And also last 2 line of yours is correct
@@curiousforever1271 He is talking right bro. when you want to pass anything in onClick function, you have to pass the function reference that's why if you want to pass any function without parameters, for example handleClick() you will write like this, onClick={handleClick}. It is without parantheses because it is reference for that function and passed as an onclick event handler. Ofcourse you can like it like this onClick={()=> handleClick()}. But we mostly write this syntax when you have any parameters in the function. I mean to say that this person commented is right that it passes function references. Research on your own.
@@curiousforever1271 Yes that's correct, also he said "The on click method in React expects a function reference" but this is not about react. This is will happen in plain javascript and html as well. it has to do with javascript not react
You’ve got me falling in love with React all over again! ❤💻, Thank youuuuuuuuuuuuuuuuuuu so much Sirrrrrrrrrrrrrrrrrrr!
Your content really awesome no-one can replace you, Sir please try to upload videos regularly but the only problem is consistency
React's useState doesn't persist state across page reloads. When the page refreshes, the entire component re-renders, and useState resets the state to the initial value defined in its argument
Refresh karte hi color ko value olive set horahi hai that is useState ki default value: useState("olive") . Thankyou so much sir for this beautiful lecture
Very nice video again and because I paused the video right at the start and attempted it by myself so I ended up making different components for container and buttons. Because I took this approach, I also came across this irritating problem where button text was getting lost becasue of background color, so I used ternary operators to sort that out and use "white" for black button. I noticed that you too have done that in your original finished version which you didn't discuss in the video and that was great! Learnt a lot again
u are right
i use text-white for black color
ap k samjhany c to itna smj a e gia h k olive color es liyee a rhaa we set olive color in initial state. when we reload then reset the state and color olive e aaay ga na .. thanks for learning us with good n friendly style sir .. more respect from Pakistan
when we reload the page the background is return to the default color bacause the change we do in page is not save anywhere , and when we reload the page browser dom is repainting. in other word actually the initial state has color olive and the reload technically resets the state. So, it gets the olive color.
Actually the initial state has color olive and the reload technically resets the state. So, it gets the olive color.
Olive islie .. qk state ki initial value ham ne olive set kr rakhi hai.. so whenever we refresh the page state b apni initial value pe chala jaata hai...
defualt value set is olive that's why it is showing the olive color when refreshed
This project is a good chance to show off your knowledge via Event Delegation concept. Instead of adding event listener to each button you can put it on parent div.
Background Changer
Red
blue
green
Refresh karne pe app reload hoti hai to component phirse create hoga and color ki initial value olive set kar dega
Because we have set olive as default background color but when we click specific colored button the our setColor takes argument value which we have passed and change the color parameter value
17:12 Refresh krne par dobara se DOM print hota hai, ham by default jo color state ka value dia hua hai wo olive hai, is liay refresh krne pr olive aa raha hai.
17:24 because we have set the default colour to be olive when declaring the useState() in the function
Because the initial state we set is olive colour and when we reload the page it resets it to the initial state which is olive colour that is why on reloading the page olive colour is displayed .
Initial State: Yeh wo shuruaati state hoti hai jise hum reset karke wapas usi haal mein laa sakte hain jaisa wo pehle tha. Jaise, maine background color change kiya, toh color change ho gaya. Lekin jab maine reset kiya, toh wo apni original state mein aa gaya. Is process ko hum initial state kehte hain.
User State: User state us waqt ki current condition par kaam karta hai. Matlab, agar maine background color change kiya, toh us waqt ka current state jo hai, wo user state hota hai. User state hamesha present ya current situation ko dikhata hai.
Refresh krte time state reset ho ja rha hai, or hmari initial state olive hai isliye olive colour apply ho ja rha hai
17:12 The intial value of color is set as "olive" which we are using to set the backgroundColor of our parent div, that's why on refreshing we are getting olive in place of any other color
olive is the default value, once page gets reload, the state again sets to olive as it is the default state.
onclick method in react expects a function, so here we have to pass function not a parameter.
Thanks a lot sir for this great series🥰🥰🥰
Thanks a lot sir video pause karke jitna ab tak sikha tha aapse wo sab use karke khud se banaya hai pura project ye wala i know basic hai sir ye project but still thankyou aapka padhane ka traika hi khuch aisa hai ki koi cheez bhooli hi nahi jati 🙏🙏
I set the background color for the div but it is not applied, but when I write something inside the div i.e. an h1 tag then the color is applied, how to fix this?
same problem facing
cuz initial state olive h to reload hone pe dom repaint ho jata h aur bg color olive set ho jata h.
Because olive is default value of state and the reload state is take a default value. so it gets the olive color
olive color is coming on refresh, because the preset value in the useState function if set to be "olive"
Actually the initial state i.e. in useState('olive') is set so that's why on refresh its showing its default color set in useState('olive')
when we reload the pade the default colour in setcolur is olive
you make easy to understand sir 🤗 I was worried that how can I learn these code because it was like rocket science in your language 😅 btw, thank you sir.
Sir ye onClick waala kaafi important note the kyuki mujhe ye nhi pta lg paata tha ki onclick me agsr function ko call krna h to fhir anonymous function kyu banna pad rha h thank you so much sir ye clear krne ke liye. Or ha waapis color 'olive' isliye ho ja rha h kyuki refresh hone par useState ki initial value hi trigger hogi jo aapne 'olive' rakhi hui hai i hope i am correct😅😅
Q ki initial bgColor Olive hai main page ka our jese hi refresh kr tey hai jo function call Hui rha ha ti hai O bhi refresh ho jaati hai Our initial bgcolor aa jata hai
Initial state is olive when we referesh react reads code from top to bottom and here after refresh click ebent didn't happened that's why its is giving color olive if you don't want this to happen use local storage it will save the last state with the help of get and set
he initial state has color olive and the reload technically resets the state. So, it gets the olive color.
Olive is the default color in usestate therefore when we refresh our webpage it automatically changes its bg-color to olive
because in main function the initial state color is olive
inital default color is olive that's why we get the olive color after reloading page
after refresh background color is cange becouse we use usestate by default value which is olive thats why and we have also the solution if we used to store local Storage then background color not will be change
THe reason why olive is coming is because when we refresh our page our state variable also refreshes so it set the function to its default value,
17:26 because we set the color at olive hard coded so...
when we reload it sets the color to default which is olive
i made a button component and used props to change individual value in the buttons no need to copy the button 11 times
import React from 'react'
function button(props) {
return (
{props.name }
)
}
export default button
When we refresh the webpage, the initial state of the color is Olive , hence the background will always be Olive when the page loads.
In the initial state we've set the color as olive, so everytime we refresh it resets the state and color becomes olive
Done with the proj and made some changes and turned it into a flag in which you can change the color of top and bottom portion.
sir which theme you are using can u tell me
Becuase you already had initialized the color state with the olive color and whenever you refresh the browser it renders the component or reset the state variables
olive is hardcoded to be default background color in setState so on reload the state is reset to default = olive
All buttons can be generated dynamically in a more easy and scalable manner:
const colors = ['green','red','blue] etc maintain array of all colors
inside the App(){
use map function to generate buttons:
{colors.map((color,key)=>(
{color}
))}
sir `setColor` on default "olive pe set h isliye har bar reload krne p vo bg olive hota h. we can use localStorage to prevent it.
17:15 because olive is default variable color define in useState.
Upon refreshing the color is olive because olive is set as default state and upon refreshing the state gets reset.
By default, olive is set in use state, so when you click refresh, the default background appears
Question - Refresh krne pe olive q aa rha ?
Ans - q ki hmne useState ki default value olive set kr rkha hai Aur initially page useState mein jo color hai whi render kr rha..
Sir mene to ak hi button ka component banaya or kaam ho gaya♥
Code:
let text = props.text;
return (
{
document.querySelector("body").style.backgroundColor = text;
}}
className="px-10 py-3 rounded-full text-white border-none"
style={{ backgroundColor: text }}
>
{text}
17:13 ye isliye hua kyunki aapne useState me default value "'Olive" kar rakha hai. I can't thank you enough for this course sir.
the image at 16:58 is good overview of the code. Its the css part.
otherwise the hook is the important one.
When you reload the page, all of the variables are cleared and whole of the html, css and javascript is rendered again. Since in our app we have set initial value of color as olive, the background would be olive after the whole app is rendered.
Refresh karne se pura page paint naya dom tree ban rha hai, toh nae dom tree mai jo value initialise ki hai vo he jaegi islie page olive he paint hoga refresh karne pe 17:26
State ki initial value olive hai jub button par click hoga to color change hoga verna olive hi rahega same Refresh krne par olive ho jata hai because vo initial state main chala jata hai
Because we have given the constant value in the useState as Olive that's why it is changing to olive after refreshing which resets the state.
Refresh karne par default color jo hai olive, vo set ho rahan hai...
17:24 olive is the default value for variable color
after refreshing the color is resetting to olive as the useState hook accepts the initial value of the state color as argument which in this case is "olive".
17:13 after reload color apne initial state me wapis aa jata h.. That's why after reloading we get olive color
17:15 useState me olive set kr ke rhke hue h . olive ke jhga blank rhe gy to by default white lelega
the default color is olive because you initiated the color state variable with olive color.
nice project
Basic building
Refresh ke bad pura dom reload hota hai na wo usestate ka defult value leta hai
I did it using components (code is below). Awesome Explaination.
return (
handleEvent("red")} />
handleEvent("green")} />
handleEvent("blue")} />
handleEvent("yellow")} />
handleEvent("pink")} />
handleEvent("violet")} />
handleEvent("white")} />
handleEvent("black")} />
)
when we are refreshing the page state will be reset so out initial state is olive. thats why it is showing olive color when we refreshed.
There is also an optimization technique for writing the onClick methods. Event Delegation if I am not wrong. Write a common onClick method on parent and refer each child with name .... and the parent tracks the element's name in "e.target" ... from there also, we can set the value of bg-color. This is bcoz we are adding handler to each buttons. If there are 100s of color buttons then 100s of handlers will be created for each buttons which is not good for page performance.
can you share this in code
while we are reloading the page then state are reset and its default color is olive so that's is rendering the olive color
Sir, one suggestion pls maybe instead of creating a new project everytime, we can create a new git branch and add code for that video in that separate branch.
sir your explanation is top-notch, you are the best and i hope this channel will reach millions of subscribers.
Main channel already million sub ke kareeb ha
@@SohelDarwajkar This one deserves too.. what do you think?
@@sainaid yeah ofc and sir other channels pe bhi padhate ha like College Wallah channel pe sir ki tailwind series uploaded ha and freecodecamp pe react eng version ha
@@SohelDarwajkar yes i know.. sir himself is saying "where ever you go, you will find me there!"
in useState there is default color or we can say we set that string olive thats why when we refresh page it goes to its default behaviour
Becase the default value of the state is olive and once we reset the tab the state's get reset to it's defalut value.
olive cause setstate() has olive as its deful value can change it to setState(" ") for no color
Cuz default value for useState is olive
const [color, setColor] = useState("olive")
Because default value set as olive in useState("olive") method
Cuz we've declared the default value of color variable as olive while defining the state
const [color, setColor] = useState("olive")
We have already set "olive" as the default color at the time of useState.
Sir plz upload react js project series as soon as possible. bez lot of employees refer your series for learning react js
Yes right 👍
We get olive on refreshing because we set default state of color to olive.
I have been learning coding for 2 years on Yoututbe. But when I find this channel I think I wasted much of my time in watching useless toutorials. I wish I UA-cam already suggested me this channel. Thank You Sir Hitesh.
initial state is olive. So on refresh of the page it's sets to initial state.
`const [color, setColor] = useState("olive");`
The default useState is olive, that's why...
And always thanks sir...
As useState has Olive color initialized to it !! Amazing video sir ,Thankyou !!
17:18 Kyonki jab app refresh ho rha hai to state fir se canvas paint kar rha hai aur usme jo predefined value hai "olive" vo set ho ja rhi hai.
We have set the initial state as olive colour that is why when we refresh the page we get the initial state itself because further in the code we are not updating it any where
Finished this video. Loving the series. Thankyou Sir.
Because in our useState hook main initial value 'olive' set hai isiliye default background color olive hai
17:18
Because, first me background color : olive set kiya hai
Because default value of state is olive therefore it is giving this color on refresh