DEV Community: Pedro Velazquez

React + Vite + Ts templates for you

Pedro Velazquez — Mon, 20 Feb 2023 16:16:45 +0000

Hi there. I want to share with you two repos for building (guess what) react apps, powered by vitejs and typescript. They include i18n, caching, custom http client (no more axios), tailwindcss, vitest and file-config based routing (no more a single file with all yout routes). Any feedback is welcome

https://github.com/Pedro-Velazquez/revit (with material design)
https://github.com/Pedro-Velazquez/vint (with ant design)

Architecting React Applications

Pedro Velazquez — Sun, 10 Oct 2021 01:11:41 +0000

React is easy to learn, hard to master. It give you all the freedom you need (or not) to organize your proyects. It have amazing stuff like hooks, contexts, Suspense, and more (and more in React 18). But now it´s time to do some real world large proyects where thing like maintainability, separation of concerns and reusability REALLY matter. So, what to do? You need to architect your codebase to resist both the test of the time and changes in requirements. How to do that? I prefer 2 ways to organize my code: domain-driven or based on the type of feature a framework or library provide.
Now i will share with you a approach that take the best of the two worlds:

Here we have:

components: Here we will place our Components, and then we will divide they based on domain, the page that use it or parts of one more complex component
constants: enums, route paths, static select models..
contexts: Context who are domain-agnostic. For example UserContext or configuration to use libraries based on context like @apollo/client or use-http.
hooks: Hooks who are domain-agnostic. For example useWindowSize, useDocumentTitle
pages: All pages of the application. Nested routes are places inside a folder with the same name as the root route.
routing: Configuration of the routes. Logic related to public/private routes are placed here too.
services: Here we have functions || classes || hooks to comunicate to the API. Business logic lives here.
util: Utilities that don´t match any category.

Thanks for reading. I will appreciate all the feedback. Keep learing...

Vue over React just for the syntaxis? :(

Pedro Velazquez — Tue, 27 Oct 2020 18:39:37 +0000

Hi there. I really like these two workhorse of all frontend developers. Personally, i prefer react. I have a friend that told me he select vue all times because vue allow to "separate" your html, css and js code in a more clean way that react does... i think Yeah, maybe... but that can't be the reason to discard react and all his power... We must fell confortables with ours frameworks and coding should be pleasent, but i think that the beauty isn't only what you may see while reading code but also the hardwork performed by the library or framework and the ways you can customize it's behavior. What do you think?
PD: Excuse me if i make a mistake when writting the post. I am learning English :)