From f84c997c332dd7def36d2dd8d171b829ddcc34d6 Mon Sep 17 00:00:00 2001 From: Joaquin Ferreira Date: Mon, 23 Sep 2024 08:40:53 -0300 Subject: [PATCH] updated document titles hierarchy --- docs/10_frontend_unit_testing.md | 5 +---- docs/1_introduction.md | 8 ++++---- docs/2_client_server_side.md | 18 +++++++++--------- docs/3_folder_structure.md | 2 ++ docs/4_styling_library.md | 2 +- docs/5_data_fetching.md | 2 +- docs/7_form_management.md | 4 ++-- docs/8_localization.md | 6 ++++-- 8 files changed, 24 insertions(+), 23 deletions(-) diff --git a/docs/10_frontend_unit_testing.md b/docs/10_frontend_unit_testing.md index e22adae..b242ea8 100644 --- a/docs/10_frontend_unit_testing.md +++ b/docs/10_frontend_unit_testing.md @@ -4,10 +4,7 @@ layout: default nav_order: 10 --- -## Frontend Test - -Technology Review -Writer: Leonel Mazzan +# Unit testing (Front): ### Introduction diff --git a/docs/1_introduction.md b/docs/1_introduction.md index c36af3b..a6a67a4 100644 --- a/docs/1_introduction.md +++ b/docs/1_introduction.md @@ -4,18 +4,18 @@ layout: default nav_order: 1 --- -### What is React.js? +# What is React.js? React is an open-source JavaScript library developed by Facebook that is used to build interactive and efficient user interfaces (UIs) for web applications. As a library, it's important to know that it doesn't compile, but rather transpiles from JSX (JavaScript XML) to JavaScript, which is a code that browsers can understand. React manages a virtual DOM to improve performance and minimize updates to the actual DOM. -#### Virtual DOM and Real DOM +### Virtual DOM and Real DOM The Virtual DOM acts as an intermediary layer that allows for efficient updates in memory before applying changes to the Real DOM. This strategy enhances the efficiency and performance of applications by minimizing direct operations with the Real DOM and performing selective updates more efficiently. -#### Pros of Using React +### Pros of Using React Virtual DOM: The way React handles the virtual DOM and the Real DOM, improving the efficiency and performance of the application, is a significant advantage. Code Reusability: The component-based approach facilitates the creation of modular and reusable UIs. Community: React has an active community and a broad ecosystem of supporting libraries and tools. Efficient State Management: React offers an efficient state management system, and when combined with libraries like Redux, provides a robust solution for managing the application's state in a centralized manner. -#### Cons of Using React +### Cons of Using React Architecture Decision: React is a library and does not impose a specific structure. The freedom to make architectural decisions can be advantageous but can also be a challenge for teams without experience in making these decisions. Initial Learning Curve: For some developers, especially those new to concepts like JSX, the initial learning curve of React can be steep. Understanding concepts such as components, props, and the component lifecycle can be challenging at first. Different Implementations: Unlike a framework where all the tools are already defined, in React, different implementations can occur due to the number of libraries that exist. diff --git a/docs/2_client_server_side.md b/docs/2_client_server_side.md index 2caac6a..4c25996 100644 --- a/docs/2_client_server_side.md +++ b/docs/2_client_server_side.md @@ -4,11 +4,11 @@ layout: default nav_order: 2 --- -### When to use client-side or server-side? +# When to use client-side or server-side? (Depending on the correct analysis of the business, consult the React referents and React group) -### Trigger questions +## Trigger questions What is the area of the business? What will be given priority? @@ -17,37 +17,37 @@ How important is the SEO of the page? Do we need to sell something? Do we use external services, what do we have to take into consideration? -#### Client-Side Rendering - Vite +### Client-Side Rendering - Vite Client-side rendering, often associated with Single Page Application (SPA) frameworks like Vite, means most of your application logic, including routing and rendering, runs in the browser. -##### Pros: +#### Pros: - **Interactivity**: Since everything is already loaded and ready to run on the client's device, user interactions can feel faster and more fluid. - **Decoupled Backend**: The API is usually a separate project, which means frontend and backend can be developed and deployed independently. - **PWA**: Is easy to create a pwa because you have all data loaded in the user device -##### Cons: +#### Cons: - **SEO**: While search engines have improved at indexing client-rendered websites, server-rendered sites are generally preferable for SEO. - **Initial Load Time**: Large applications can result in a larger initial bundle size, leading to slower initial load times. - **Calls to back**: More calls to backend in case the calls have a cost, this would be a problem -#### Use Cases: +### Use Cases: Interactive web applications like dashboards, admin panels, other internal tools, or even some consumer-facing apps where SEO is not a priority. -#### Server-Side Rendering - NextJS +### Server-Side Rendering - NextJS Server-side rendering (SSR) basically means your server generates the HTML for each page on the server and sends that HTML to the client's browser. Common frameworks for this are Next.js and Remix. -##### Pros: +#### Pros: - **SEO**: SSR is great for SEO because search engine crawlers can directly parse the fully rendered HTML sent from the server. - **Initial Page Load**: The client receives pre-rendered HTML from the server leading to faster initial page load times. This is great when we have different languages or different components/pages by country - **Call to back cost**: In the event that calls to the back have to be limited due to cost issues, we can run crons that update the properties at a set time -##### Cons: +#### Cons: - **Server Load**: Every request may necessitate a new HTML page rendered on the server, leading to higher server load. - **Developer Experience**: Dealing with SSR usually requires more consideration and care, especially when integrating with client-side libraries (interacting or including libraries that interact with doom is more difficult). diff --git a/docs/3_folder_structure.md b/docs/3_folder_structure.md index 04c1d8d..96fed2a 100644 --- a/docs/3_folder_structure.md +++ b/docs/3_folder_structure.md @@ -4,6 +4,8 @@ layout: default nav_order: 3 --- +# Folder structure + ### What folder structure to use depends on the needs of the project? Modular Architecture: diff --git a/docs/4_styling_library.md b/docs/4_styling_library.md index 8b19936..eed6cba 100644 --- a/docs/4_styling_library.md +++ b/docs/4_styling_library.md @@ -4,7 +4,7 @@ layout: default nav_order: 4 --- -### Choosing the Right Styling Library for Your React Project +# Choosing the Right Styling Library for Your React Project When it comes to styling your React project, the decision should depend on the project nature and complexity. diff --git a/docs/5_data_fetching.md b/docs/5_data_fetching.md index 4cc9cf7..5b39b52 100644 --- a/docs/5_data_fetching.md +++ b/docs/5_data_fetching.md @@ -4,7 +4,7 @@ layout: default nav_order: 5 --- -## Data fetching +# Data fetching **Technology Review** _Written by: Federico Castañares, Facundo Panizza_ diff --git a/docs/7_form_management.md b/docs/7_form_management.md index 14fd86d..8aa013a 100644 --- a/docs/7_form_management.md +++ b/docs/7_form_management.md @@ -4,7 +4,7 @@ layout: default nav_order: 7 --- -## Choosing the Right Form Handling Library for Your React Project +# Choosing the Right Form Handling Library for Your React Project Handling forms in React can be complex because of state management and validation. @@ -15,7 +15,7 @@ Here are some libraries you could consider: Your choice of a form library should depend on your specific project requirements, and there isn't a "one-size-fits-all" solution. However, some general guidelines can be considered. -### Pros & Cons +## Pros & Cons - **Formik**: This is a good choice if your application has complex forms with multiple fields, nested properties, and array fields. It might be slightly heavy in terms of bundle size but provides an enriched developer experience with thorough documentation. - **React Hook Form**: If performance and a smaller package size is a concern, you might want to consider React Hook Form. Its hook-based approach results in less re-rendering, offering better overall performance than Formik, particularly in forms with a large number of fields. diff --git a/docs/8_localization.md b/docs/8_localization.md index 58347d2..13d3c5c 100644 --- a/docs/8_localization.md +++ b/docs/8_localization.md @@ -1,10 +1,12 @@ --- title: Localization layout: default -nav_order: 8 +nav_order: --- -### What is react-i18next? +# Localization: + +### react-i18next It is a library that facilitates the integration of internationalization (i18n) into React applications using the ‘I18next’ library. It provides a set of specific components and functions designed to work with react, simplifying the translation and localization process in web applications.