Submitted almost 2 years ago

Responsive newsletter subscribe form using Typescript, Vite, & React

react, typescript, vite, react-router

Christopher Castaneda•90

@chrisdcast

A solution to the Newsletter sign-up form with success message challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Hassan•940
@hnasser44
Posted almost 2 years 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

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