Project 3 - Dice Game | 10 React Projects for Beginners
HTML-код
- Опубликовано: 14 май 2023
- Discover the best React project series ever created for beginners! Follow along as we guide you through 10 engaging projects that use Figma design to create stunning UI. From building a to-do list app to a weather app, you'll learn the fundamentals of React while developing real-world web apps. With our step-by-step tutorials, you'll become a React pro in no time! So join us now and unlock the secrets of building awesome web apps with React and Figma
Project 3 React Dice Game Figma Design
www.figma.com/file/rephrU2FVg...
Project 3 React Dice Game . - Source Code
github.com/anshuopinion/React...
10 React Projects Playlist - • 10 React Projects For ...
HTML Course
• HTML Course Hindi - B...
CSS Course
• CSS Course Hindi - Be...
Html and CSS practice Projects
• HTML CSS 10 Practice P...
Javascript Course
• Javascript for beginne...
Linkedin - / anshuopinion
Telegram Channel - telegram.me/dosomecodinghelp
Instagram - / dosomecoding
Github - github.com/anshuopinion
bhaiya app 10 project nhi 20 bana dijiye .
But level upper than previous project hona chiaye bahut kuch sikhne mil raha h bhaiya
Dil jeet liya bhaiya apne bahut maja aya
Bro this series is legit fire. React nahi samajh aa raha tha but since I started working on your projects series, ab aane lag gaya. Thank you so much for all the work. Really appreciated. Ram Ram!
Your projects helped a lot in every field like JSX, css, scss, module as well as ReactJS
Thanks a lot for the Projects and may God bless u for the efforts.❤❤❤
i am really glad that i found your videos , you are really a amazing teacher . keep doing the great work !!!!!!
just completed this project. Thank you for your effort
Insane Series. Thanks a lot , with this playlist help I landed my first internship :)
Which is the best practice of designing styled components or modules based in react js
Thank you so much for such kind of videos. Please try to add time stamps as well.
Thanks brother your explaination is really knowledgable and a good experience for me🤩
Awesome tutorial, I think whoever had watched, liked it
Thank you, I've learned so much from you.
Amazing brother, thank you so much
Thank bro i get learn a lot form only video, i'll follow your other project.
This man will change my future
Love From Pakistan
Such a beautiful content bro.. Help to understand the flow of data
What a brilliant work🤗👏
for begginers it is very good channel please add e-commerce and blog projects
Thank you so much for the video, learnt a lot...
Great work. I just disable AD's Block for your content.
i am able one page to another on clicking start i am not able to Startgame page help me out and there is no errors in console else where help me out anyone please
sir, agar mujhe module wala css mai ye jo select karne wala tha wah kese hoga
Thanks bro your doing great work❤
It was great project thanks for it it was very needful
You are real Hero brother because you r helping everyone to learn code in easy way Tons of Thanks, god bless u with lot of happiness in your life... keep it up and I am enjoying your code and interesting App... Australia Supporter...
hi brother I am watching that you are also struggling just like me same scenario.
What about connecting with each other on some social media platform to help out each other
very helpful for a start
Sir me ye wali project me work kra hu but mere index.html ka code show nai hora hai mai kya kru?
thanks sir i made it and it was wonderful experience
I really Appreciate brother your designed course projects are really helpfull to learn in an easy way thanks so much i recommend all viewers to watch from first project from basics you will easily understand reactjs love from 😍Gilgit Baltistan ❤thanks brother😍
You are most welcome
sir aap ko figma me button ki styles kese mili ?
Sir I also want to start freelancing but I have not any proper guidance so can you make a video or please guide me.
Thanks for such a good project.
Thank you for the project, I watched your video, and then i did it on my own and also deployed it on vercel!!
That’s great brother
How to enable emmet for styled components
Very nice explain sir ji thank you so very much
box not showing using map method in Number selector
cant upload image to jsx file from local storage
you are doing amazing bro
Behtareen bhai behtareen 😍☝🏻 khatarnak tutorial
Project is great but i have problem to learn and make project without looking video and source code usse but i try to learn this *.*
nice project and explantion bro keep it up and keep uploading such videos
It helped me a lot
really appreciate your videos
atleast some one is making good videos for beginners
What are the technologies used here??
You are great brother !
Thank you ✨
thank for your lecture, love from pak :)
Thank you :)
very nice content . i recommend to watch the complete series it will make you a nice beginner level react developer
thank you for the app
bro please make video on complex react topics which are important for react developer jobs...and also backend. Your videos are so wholesome to watch....I can easliy watch your videos for straight 3 to 4 hours...because they are so interesting
Okay
I agree with you
i am making it using Next JS with backend ❤❤❤❤😊😊😊😊
has anyone made this with context API please help
Bhaiya koi side earning ka bata do college ke sath saath
Please make more if these bhai.
Bro proved bro is the best. 🔥🔥🔥🔥
Boht acha explanation
In this project, I learned so many things, but the way you presented , it's really tough for beginners and confusing.
I will improve
Awesome project
Bhai Mera total score bahut bade size ka kyu aa Raha jab ki code pura exact copy kar diya fir bhi
Best 🔥🔥
bro also create a one video tutorial on gatsby js 🙏
I am not able to find inspect option in figma(timestamp 16:04). It is available in free subscription or not
mera bhi yahi masla a raha hai
[plugin:vite:import-analysis] Failed to resolve import "styled-components" from "src/App.jsx". Does the file exist? My styled component is not working... any idea how to fix it?
Wrong import
Match with source code
@@dosomecoding when I run the command on terminal, I got a whole bunch of errors. Although I copied exactly the same from the official site of styled-components. Thats what I get while running the "npm install styled-components" in the terminal "npm ERR! Cannot read properties of null (reading 'edgesOut')
npm ERR! A complete log of this run can be found in:........"
Pls continue series 😢
bhai there is one issue, as soon as I am placing the useState hook elements in the parent component...I am facing issues with dice images not being displayed
Pass state as props
is it due to props validation error that we are facing??
completed projects 1-3. #Nepal
Good bro
Sir, how to change the background colour of selected div using onSelect.
Sudo class active
@@dosomecoding bro please update the project 2 source code, while cloning the project 2 all the UI is messy and not according to tutorial
Wow this game is very useful than that of the tic tac toe game.
bro wouldn't it be nice if you provide us figma tutorial to create a khatarnak design like you It will be very helpful for us
okay i will create series on figma too.
difficult lg raha hai.......sb alg alg componets banana chahiye tha sir i am pure beginner
Hello everyone especially you brother(creator) please help me out of the problem because its my second time that I am facing problem and I can't geting the Figma design. Please help me thanks!
Check description or first video
sir love youuuuuu alot alot
Jesé college me ek project banana kr dikana hai muje toh me yeh project dika skti huh iske front end back end dono hai kya
1:00:00
project 1 responsive krein aur us mein side wala slider lagaein joh kafi websites mein hota he
Nav me jada kuch nahi hi so top se hide and show dikhna hoga
1:13:00
completed
Usestate me jo prep use kiya wo samjh nhi aaya ek bar btana bhiaya
wo previous value hi state usko hamlog modify kar rahe hi uska , use statek ka video hi channel pe
i just say awesome
thank you
Sir g real mai aap vo sabb kuch content de rahe hai jo. Paid courses mai bhi nahi mil sakta hai.
I know
bro mera template literal nahin ho pa raha hai tumhari tarah
kahan galti hai samajh nahin aa pa raha hai
Compare code
@@dosomecoding already done bro
But I can't find the error why it is happening
28:15
51:10
2:00
14:20
vs code theme?
Andromeda
pleae upload project after project 7 ASAP
yes project 8 design is done
bhai tere content me dum h
College me end sem ka project ata hai kya yeh project babakr dika skti huh
Try kr sakti ho@@snehajain376
Last 30 minutes were confusing, and required too much of attention. Else the playlist contains best videos.
Okay bro i will try to fix teaching
@@dosomecoding Bro wanna Know when the last 3 projects gonna come?
❤❤🩹
your project is not responsive
@dosomecoding. Bro what theme are you using it's is very colourful and beautiful.
Check va code video
hello , i use this code , const [currentDice, setCurrentDice] = useState(1);
const [selectedNumber, setSelectedNumber] = useState();
const [totalScore, setTotalScore] = useState(0);
const [hasRolled, setHasRolled] = useState(false);
const [selectionErr,setSelectionErr] = useState(false)
const RollingDice = (max, min) => {
const num = Math.floor(Math.random() * (max - min + 1)) + min;
if(selectedNumber){
setCurrentDice(num);
setHasRolled(true);
console.log('selectedNumber in RollDice',selectedNumber)
updateScore();
setSelectedNumber(undefined)
setSelectionErr(false)
}else{
setSelectionErr(true)
}
};
const resetScore = () => {
alert("resetScore");
};
const updateScore = () => {
if (hasRolled) {
console.log('selected number in updateScore',selectedNumber)
if (currentDice == selectedNumber) {
setTotalScore(totalScore + currentDice);
} else {
setTotalScore(totalScore - 2);
}
setHasRolled(false);
}
};
useEffect(() => {
updateScore();
}, [currentDice, hasRolled,selectedNumber]); here when i console the selectedNumber in RollDice.jsx it shows the correct value but inside updateScore.jsx is shows me undefined why is it happend even though the setSelectedNumber(undefined) is calling after calling the updateScore function here's the source code link :- github.com/Deepak-gusaiwal/react-project-3
Compare with my code
Even i am facing the same issue. Did you find the answer?
Project is great but i have problem to learn and make project without looking video and source code usse but i try to learn this *.*
Then look
56:00