Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Newsletter page with react, react-router-dom & tailwind

@Efobi-Francis

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

@SadeeshaJayaweera

Posted

It's great to hear that you're continuing your React journey and finding concepts like useState and the react-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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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

@ajeetachal

Posted

"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-Francis

Posted

@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

@ajeetachal

Posted

@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 GitHub
Discord logo

Join 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