Skip to content
Submitted over 1 year ago

Responsive newsletter subscribe form using Typescript, Vite, & React

Christopher Castaneda•90
@chrisdcast
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Initial Thoughts

This challenge definitely took longer than usual. I wanted to practice using React and this was my first project built with Typescript so there was a lot of tooling and learning and reading docs. I probably could have built it in a 10th of the time with vanilla HTML/CSS/JS but I'm glad I took the time to learn it.

Challenges

  • Using the react-router-dom package was only a little confusing because some of the docs recommended using createBrowserRouter and others recommended wrapping Route components in a parent BrowserRouter component. Getting past that I was able to get things running smoothly.
  • Using react-hook-form was a little weird. React with all of it's support makes sure you get in the mindset of doing things 'the React way' with controlled inputs on all your text fields, but that's not how this package works by default. It encourages you to use uncontrolled raw html form components and it felt kind of wrong.
  • Typescript syntax was a little tricky at first, but I'm getting more used to it. I am a little confused why the handbook recommends not explicitly typing everything but I'm sure it's something that's up to personal taste.

Things to Improve

  • I still need some practice and guidance on how to organize my react project and where to put my various components.
  • I also need better judgement on when to separate various elements into different components or just build them as one block of html.

Questions

  • If anyone has any insight on how a react app files are typically structured I'd love to hear it.

Community feedback

  • Hassan•940
    @hnasser44Posted over 1 year ago

    Hello, a typical React project follows a folder structure that helps to keep things organized. A common structure is:

    src/
  |- components/
  |- pages/
  |- utils/
  |- assets/
  |- App.js
  |- index.js
  |- index.css

    components: This folder contains reusable components that can be used across different pages.

    pages: Each page of your application should have its own folder here, containing the components specific to that page.

    utils: Utility functions or helper functions can be placed in this folder.

    assets: Images, fonts, or other static assets can be stored here.

    Component Separation: When deciding whether to separate elements into different components or keep them as one block, consider the reusability and complexity of the component.

    Reusability: If an element is used in multiple places or has the potential to be reused, it's better to create a separate component. This follows the DRY (Don't Repeat Yourself) principle, making your code easier to maintain and reducing duplication.

    Complexity: If a block of HTML and logic becomes too complex, it's a good idea to break it down into smaller components. Smaller components are easier to understand, test, and manage.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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