Responsive Newsletter page with react, react-router-dom & tailwind
Design comparison
Solution retrospective
My react journey continues, During the project, I implemented useState and components from the react-router-dom library. it was fascinating implementing these concepts, especially handling the error state.
Community feedback
- @SadeeshaJayaweeraPosted about 1 year ago
It's great to hear that you're continuing your React journey and finding concepts like
useState
and thereact-router-dom
library fascinating! React is a powerful and popular library for building user interfaces, and learning how to use these fundamental concepts is a significant step in becoming proficient with React.Here are a few points to consider as you continue your React journey:
-
useState: The
useState
hook is a fundamental part of React's state management system. It allows you to add and manage state within your functional components. As you gain more experience, you can explore more complex state management techniques like using Redux or the Context API for global state. -
React Router:
react-router-dom
is a vital library for handling routing in your React applications. It enables you to create navigation, route-specific rendering, and dynamic page updates. Understanding how to use it effectively is crucial for building complex, multi-page applications. -
Error Handling: Handling errors gracefully is an essential skill when building robust applications. In React, you can use error boundaries to catch and display errors without crashing your entire application. Make sure to explore and implement error handling practices as your projects become more complex.
-
Component Architecture: As your projects grow, you'll want to pay close attention to your component structure and organization. Consider using reusable components and adopting best practices like prop drilling or using state management libraries when needed.
-
React Ecosystem: React has a vast ecosystem of libraries and tools that can help you with various tasks, such as form handling, data fetching, and styling. Explore these libraries to make your development process more efficient and enjoyable.
-
Testing: As your projects become more significant, incorporating testing becomes increasingly important. Learn about testing frameworks like Jest and testing libraries like React Testing Library to ensure the reliability and maintainability of your code.
Remember that learning React is an ongoing process, and there's always more to discover and explore. Keep building projects, experimenting with new concepts, and referring to the React documentation and community resources to continue improving your skills. Happy coding!
1 -
- @ajeetachalPosted about 1 year ago
"Excellent job on your work! I do have some valuable suggestions and feedback to share with you, if you don't mind.
While reviewing the design comparison, it appears to be well-centered and visually appealing. However, when it comes to the preview section, it's currently occupying the entire screen. To enhance control over this element, consider implementing a 'max-width' property. For desktop mode, employing a 'flex' layout could optimize the display, while sticking to the default grid layout would work well for mobile devices. These adjustments will undoubtedly elevate the visual aesthetics and professionalism of the project."
1@Efobi-FrancisPosted about 1 year ago@ajeetachal thanks alot, i appreciate the feedback and will implement the above corrections going forward.
I also have a question, in the code i noticed a bug when an email address is pasted, it doesn't recognizes it as an email, rather when a letter is deleted from the pasted email, it fixes it.. do you have a hint on how i can fix it?
1@ajeetachalPosted about 1 year ago@Efobi-Francis just try this to filtter the input
const emailValue = emailInput.value.trim(); const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord