I was coding and practicing a project and I learned some new things as I was coding. It was very fascinating, I am working on a digital clock project in JavaScript, and I learned there was two ways to write the JavaScript logic. You can write the JavaScript logic for the toggle either with your custom logic ai give you or you know how to write or the second way is to use the built in strategy like with the toggle and connecting it to the time on the main clock section, you can also use the Intl.DateTimeFormat. I also learned that with intl.DateTimeFormat api, there is two ways to write it. One of the ways was using a fixed string , but your time will be static and not update,and the other was using new Date() which will change your time live on screen, but the newDate(); doesn't format two different times for the 12 hour and 24 hour format until it turns 1 pm. I chose to go with the Intl.DateTime and newDate(); method. I also learned when I first started with this digital clock I had to start over and over because I kept running into this same bug where the city and time values would display before you click the show city button. I tried a lot of methods to debug, I tried commenting out, using breakpoints,looking at local scope, and looking at the call stack, I tried more debugging strategies. I also tried ai over and over and looking in documentation. I tried asking ai to create a mini project around the problem, and that helped at first. Then I asked ai how it would code my version of the project, and it showed me the code for html, css,JavaScript, and I commented out or removed my other code tested ai version of this digital clock, and found the reason for this bug was because I didn't include the city.display = 'none' or hide, but I didn't include the city.display to none or hide or block, it was one of those three for this issue, and the second issue for this was I needed to set an interval, and both of them needed to be in the citySelect where the cities were in the drop down because you don't want the city and time to show on screen before users select the city and press the show city button.

These few days of learning React and React 19, I learned state management, styling options in React, tanstack query, react router: The purpose of state management is when multiple components need to share data, when you notice there may be prop drilling or you need to pass props down to other components(even if all of the components don't use the prop), and also Styling options is like the styles to style each component, your app, and website. This is just like CSS except this is for React and there are multiple options to style in React and React 19. The traditional CSS and module css is different because in traditional css, you have to give each thing with the same class different name, like if you have the button class, you have to name one of them button 1 , button 2, or just differentiate the name if there are things that are the same thing, but in modules css, you can have the same components and name it a name and it won't affect the other components that are the same thing. (I hope I am explaining this the right way.) The purpose of Tanstack Query is to fetch data, cache and store data. Tanstack query works with asynchronous data. (Asynchronous data means the data don't show up or come immediately in the app or browser, it takes time.) Tanstack Query is used when your app or website talk to servers a lot and you want the website or app to feel fast and be fast and smooth for the user while the tanstack is talking to the server. You also use tasnstack query when there is certain data that needs to be constantly updated on the screen or just updated. You don't use Tanstack query when your website or app isn't talking to servers a lot or certain data don't need to be updated constantly. The purpose of React Router is when you have a website that has multiple pages and the user can go to different pages. There is a homepage, about us page, contact us page, testimonials page, or any page. I also learned even though I am not done with the React guide in the Senior Dev Accelerator and the React Course on Udemy is that to create a website in React, it is divided up into two categories. The two categories are for pages that is gone show on every page the visitor go to like the navigation bar, the footer, the header, and these go in the layout in the app.js.

I was studying the React Course/React guide, and I learned something new today about React. I learned that Fragment is a built in React component that groups html elements (h1 tags, p tags, buttons, and any html element that can make up the web page.) together. You only use the fragment tag when you want to group together html elements like h1, paragraphs, buttons and any html element that make up the webpage , and also when you don't need to style the container or section in CSS and also when you don't need to style the html elements as a group, but if you are going to style the html elements individually in CSS (buttons, h1, paragraphs etc.) then you can use the fragment. I also learned that the fragment is written like this <> </>, and the html elements go between the opening and closing fragment tag.

Congrats to our most active members this October https://www.skool.com/devmastery/-/leaderboards 🥇 1st Place: @Miguel Rosales (+55) 🥈 2nd Place: @Costin Georgescu (+50) 🥉 3rd Place: @Alex Helm (+49) Your Free Cursor AI subscriptions are on the way... Keep engaging and helping others in the community and the top 3 will get more rewards every month.

I was studying React tonight and learned: 1. You include all pages and components that are supposed to go on the websites, and the components and webpages you want to show on every page the user visits, you put these components and webpages outside of the routes on app.js, but the components and webpages you don't want to show on every page , you put these webpages and components in routes on the app.js file. 2. You use a context provider to wrap all of the route, routes router and wrap everything in the context provider, so you can share data with all the components inside the context provider in the function app. 3. The purpose of context providers is they allow you to share date with the child components that are inside the context providers without using prop drilling. 4. Some components don't need to use the context provider in their own individual file while some components need to use the context provider in their own file because some components need access to the shared data . An example of this : import React from 'react'; 5. import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 6. import UserContext from './UserContext'; 7. import Header from './Header'; 8. import Profile from './Profile'; 9. import Home from './Home'; 10. import About from './About'; 11. 12. function App() { 13. const user = { name: 'Alice', loggedIn: true }; 14. return ( 15. <UserContext.Provider value={user}> 16. <Router> 17. <Header /> {/* This will show on every page */} 18. <Routes> 19. <Route path="/" element={<Home />} /> 20. <Route path="/profile" element={<Profile />} /> 21. <Route path="/about" element={<About />} /> 22. </Routes> 23. </Router> 24. </UserContext.Provider> 25. ); 26. } 27. export default App; import React from 'react'; 28. function Home() { 29. return <div>Home Page</div>; 30. } 31. export default Home;import React from 'react'; 32. function About() { 33. return <div>About Page</div>; 34. } 35. export default About;import React, { useContext } from 'react'; 36. import UserContext from './UserContext'; 37. 38. function Profile() { 39. const user = useContext(UserContext); 40. return ( 41. <div> 42. <h2>Profile</h2> 43. <p>Name: {user.name}</p> 44. <p>Status: {user.loggedIn ? 'Logged In' : 'Logged Out'}</p> 45. </div> 46. ); 47. } 48. export default Profile;import React, { useContext } from 'react'; 49. import UserContext from './UserContext'; 50. 51. function Header() { 52. const user = useContext(UserContext); 53. return <header>Welcome, {user.name}!</header>; 54. } 55. export default Header; 56. Prop drilling is when you pass props to multiple components.