I just want to say a huge thank you for your amazing React tutorial! Your ability to explain complex topics in a simple and understandable way is truly impressive. It's clear that you put a lot of effort into making the material accessible for all skill levels, and it makes a big difference for those of us learning. Keep up the fantastic work - you're a huge help to the entire developer community! 😄🙏🏽
You're welcome! Thank you so much for such a thoughtful comment - it truly means a lot to me. I'm thrilled to hear that the tutorial was helpful! Feedback like yours really validates the effort I put into creating these resources and inspires me to keep going. Knowing that it's making a difference for the developer community is incredibly rewarding. Thanks again for your support!
Good tutorial with good explanation and your teaching is systematic. I went through your channel and I deduce that you tilt towards game development. Well done!
Thank you! I’m glad you enjoyed the tutorial and that it helped with using arrays. Always happy to hear that the tutorials are helpful! Appreciate the suggestion and hopefully will make more react tutorials in the future.
at 15:17 when i put in the value={tiles[0]} i get an error saying "Cannot read properties of undefined (reading '0')" what does this mean? google hasn't been of much help.
It means that the variable tiles does not exist. Perhaps it was not initialized or passed into the component. I would console log tiles at different parts of the code to find where it does not exist.
Hey Adam, I tried using a map across the tiles array to render a unique tile to reduce the repetitive code on the Board component. Thanks for creating this video. Really appreciate it! 😄
You’re welcome! That’s awesome, I’m happy you got the map to work to reduce the repetition! I’m also glad you enjoyed the tutorial! Thanks for the feedback!
Sounds like tiles might not be initialized to a value and is null. Console log tiles to check. You can also compare your code to the solution on GitHub. I hope this helps.
The tutorial helped me in understanding many concepts, thank you But just one question - I see that you have hosted this using the github pages, can you please tell the steps to host it? I tried but its not working.
You’re welcome! Glad the tutorial was helpful. If you have not already found the answer I made video a few years ago on how to deploy to gh pages it should still be relevant. Let me know if it works.
Can you explain how to configure the css for strike-through I made my own implementation of the tic tac toe game but the strike through is not aligned with my grid
It was a lot of trial and error to get the line In the correct location. I used absolute positioning. Check out my css to get a better understanding. It is linked in the description.
That's awesome, sounds like you are really close to getting it working. Sounds like it might be crashing at the end of the game. I would take a look at the chrome dev tools console to see if you see any errors. You can try the version that I uploaded to github to check if it is also working correctly in your browser. codingwith-adam.github.io/tic-tac-toe-react/ You can also compare it to the complete version here github.com/CodingWith-Adam/ti... Hope that you get it to work! Thanks for taking the tutorial!
@@CodingWithAdam Yes, we can create any board size easily. By adding CSS and utilizing fill(size * size), we can adjust the board dimensions. However, we need to dynamically determine the winning combinations by adding loops for vertical, horizontal, and diagonal checks.
I would add some console logs to check the values returned. Also first check if the strike css works by adding it manually as we do during one of the steps of the video. Let me know if you get it 😀
@@CodingWithAdam ... Hello Adam ... a wonderful tutorial you have here. I've been glued onto it for nearly 24 hours now. I tried implement the strike line CSS using the 'useState', dynamically and manually, it doesn't return the strike. If I hardcode the CSS, I get the lines produced. Am I missing something. I realized while I try to implement the official Tic-Toc-Tac game from react too, I couldn't get the status line outputted as well. I followed the steps all through.
@sobowalet I would suggest adding some console logs to see if you are getting the strike through value set correctly in the tic toe component and then checking the value is passed down into the various children correctly board etc. let me know if you find the issue. Also compare your solution to the final solution on GitHub.
@@CodingWithAdam Thanks Adam, the CSS prop strikeClass is passed onto the components, parent and children, however, the CSS class displays "undefined" in the console.
@@CodingWithAdam ... One thing I actually noticed is that I get a page error on the console, indicating a failed stylesheet URL loading. What is suprising is the stylesheet works when coded manually .... every other thing works fine but just this.
I just want to say a huge thank you for your amazing React tutorial! Your ability to explain complex topics in a simple and understandable way is truly impressive. It's clear that you put a lot of effort into making the material accessible for all skill levels, and it makes a big difference for those of us learning. Keep up the fantastic work - you're a huge help to the entire developer community! 😄🙏🏽
You're welcome! Thank you so much for such a thoughtful comment - it truly means a lot to me. I'm thrilled to hear that the tutorial was helpful! Feedback like yours really validates the effort I put into creating these resources and inspires me to keep going. Knowing that it's making a difference for the developer community is incredibly rewarding. Thanks again for your support!
Really well structured and good voice over. Thank you
You’re welcome! Thank you for the great feedback! 😁
Really well structured and good voice over. Thank you☺☺
Thank you for the wonderful feedback! I’m really glad you enjoyed the video! 😁
I'm gonna use this as my practical project cause I have to talk about ReactJS on my university presentation. Thank you so much!!!
You’re welcome! Good luck on the presentation!
I followed each and every step and learn a lot from here.
and also the shortcuts which where really usefull.
That’s awesome! I’m really glad that you learned a lot and that the video was helpful. Thank you for taking the tutorial!
It's very helpful! Decent Logical and Structured Tutorial, Clear explanation about code, stylesheet, even extension tools.
Happy to hear that the tutorial was helpful! Thank you for the wonderful feedback 😁
Good tutorial with good explanation and your teaching is systematic. I went through your channel and I deduce that you tilt towards game development. Well done!
Thank you for the feedback. That’s right I have focused a little bit more on game development as it’s a fun topic to explore 😁
This is an incredible guide! Thank you sir!
You’re welcome! Thank you for the wonderful feedback! 😀
Really good! Thank you for sharing this amazing content!
You’re welcome! Glad you enjoyed the tutorial 😁
Very clear explanation 😊
Thank you!!! 😁
Wow I loved this tutorial, helped me a lot the use of array, pls could you do some more react tutorial??
Thank you! I’m glad you enjoyed the tutorial and that it helped with using arrays. Always happy to hear that the tutorials are helpful! Appreciate the suggestion and hopefully will make more react tutorials in the future.
Thank you for the wonderful tutorial 🙏
You’re welcome! 😁
at 15:17 when i put in the value={tiles[0]} i get an error saying "Cannot read properties of undefined (reading '0')"
what does this mean? google hasn't been of much help.
It means that the variable tiles does not exist. Perhaps it was not initialized or passed into the component. I would console log tiles at different parts of the code to find where it does not exist.
@Nop3.1 You must be using "for in" loop. Try to use "for of" loop
He forgot to show that he actually had added 2 parameter in useEffect Checkwinner() function down
Hey Adam, I tried using a map across the tiles array to render a unique tile to reduce the repetitive code on the Board component. Thanks for creating this video. Really appreciate it! 😄
You’re welcome! That’s awesome, I’m happy you got the map to work to reduce the repetition! I’m also glad you enjoyed the tutorial! Thanks for the feedback!
This is really awesome!, thanks a lot!!
You’re welcome! Glad you liked the tutorial!
43:42 , its showing an error "tiles.every is not a function" please help!
Sounds like tiles might not be initialized to a value and is null. Console log tiles to check. You can also compare your code to the solution on GitHub. I hope this helps.
Great video!
Thank you! I’m glad you enjoyed the video! 😁
The tutorial helped me in understanding many concepts, thank you
But just one question - I see that you have hosted this using the github pages, can you please tell the steps to host it?
I tried but its not working.
You’re welcome! Glad the tutorial was helpful. If you have not already found the answer I made video a few years ago on how to deploy to gh pages it should still be relevant. Let me know if it works.
Can you explain how to configure the css for strike-through I made my own implementation of the tic tac toe game but the strike through is not aligned with my grid
It was a lot of trial and error to get the line In the correct location. I used absolute positioning. Check out my css to get a better understanding. It is linked in the description.
Awesome... Thank You.
You’re welcome!
Great video keep it up
Thank you! 😁
I got the game to work only problem is when X or O wins the game just disappears then I have to refresh
That's awesome, sounds like you are really close to getting it working. Sounds like it might be crashing at the end of the game. I would take a look at the chrome dev tools console to see if you see any errors. You can try the version that I uploaded to github to check if it is also working correctly in your browser. codingwith-adam.github.io/tic-tac-toe-react/
You can also compare it to the complete version here github.com/CodingWith-Adam/ti...
Hope that you get it to work! Thanks for taking the tutorial!
does this work for any board size?
It only works for 3x3. But the code could be changed to work for different board sizes.
@@CodingWithAdam Yes, we can create any board size easily. By adding CSS and utilizing fill(size * size), we can adjust the board dimensions. However, we need to dynamically determine the winning combinations by adding loops for vertical, horizontal, and diagonal checks.
@SagarTakoresdt yes that would be the more difficult part 😀
If you have a course i will buy put a link
Thank you! Although I do not have any paid courses at this time. Perhaps some time in the future. 😁
@@CodingWithAdam i hope you will do some video on react forms
I completed combo and if statement but when ever I won the game the strike line is not coming
I would add some console logs to check the values returned. Also first check if the strike css works by adding it manually as we do during one of the steps of the video. Let me know if you get it 😀
@@CodingWithAdam ... Hello Adam ... a wonderful tutorial you have here. I've been glued onto it for nearly 24 hours now. I tried implement the strike line CSS using the 'useState', dynamically and manually, it doesn't return the strike. If I hardcode the CSS, I get the lines produced. Am I missing something.
I realized while I try to implement the official Tic-Toc-Tac game from react too, I couldn't get the status line outputted as well.
I followed the steps all through.
@sobowalet I would suggest adding some console logs to see if you are getting the strike through value set correctly in the tic toe component and then checking the value is passed down into the various children correctly board etc. let me know if you find the issue. Also compare your solution to the final solution on GitHub.
@@CodingWithAdam Thanks Adam, the CSS prop strikeClass is passed onto the components, parent and children, however, the CSS class displays "undefined" in the console.
@@CodingWithAdam ... One thing I actually noticed is that I get a page error on the console, indicating a failed stylesheet URL loading. What is suprising is the stylesheet works when coded manually .... every other thing works fine but just this.