@GabrielMessiasdaRosa
@TheMcnafaha
Submitted
I got two questions.
This was a single-component project so I just stuffed everything into the component directory without regard for organizing since the scope was soooo small.
I am happy to learn more and have pretty hard skin :)
@GabrielMessiasdaRosa
Posted
Hello there!
I recently had the opportunity to review your code, and I'd like to provide some constructive feedback. This review is also a valuable learning experience for me, as it allows me to help you improve your coding skills and learn together.
In your code, I noticed the absence of two crucial principles in software development: OCP (Open/Closed Principle) and SRP (Single Responsibility Principle). These principles are essential for writing clean and maintainable code. Let's delve into them briefly:
OCP (Open/Closed Principle) is one of the foundational principles of SOLID, a set of software design guidelines. OCP suggests that software entities, such as classes and modules, should be open for extension but closed for modification. In simpler terms, it encourages extending an entity's behavior without changing its original source code. This promotes flexibility and robustness in your codebase.
SRP (Single Responsibility Principle), another SOLID principle, emphasizes that a class should have only one reason to change, i.e., it should have a single responsibility. This leads to more organized, comprehensible, and maintainable code. It also enhances code reusability by ensuring that each class focuses on a specific task.
Here are some specific suggestions:
Import Organization: Keep your imports organized to enhance code readability.
Separate Logical Functions: Divide logical functions into separate modules, especially those that handle complex validations and calculations. This modularity simplifies testing.
Descriptive Naming: Use descriptive names for variables and functions to make your code more understandable.
Avoid Global Variables: Minimize the use of global variables like "submitted" by passing values as function arguments when necessary.
Reduce Code Duplication: Identify and refactor duplicated code into reusable functions.
Consistent Naming: Maintain naming consistency for variables and functions throughout your codebase.
Now, let's explore some next steps to further enhance your coding skills:
1. React Mastery and Componentization: Dive deeper into React's inner workings, especially the concept of componentization. Understanding how components create, pass props and states, and interact with each other is crucial for effective React development.
2. Design Principles and SOLID: Learn about software design principles, particularly SOLID. These principles help you create organized and maintainable code. Pay special attention to SRP and OCP, as they can significantly improve your code's structure and modularity.
3. UI Enhancement and CSS: Explore CSS styling, especially in web applications. You're already using CSS classes, but you can learn more effective styling techniques, create responsive layouts, and enhance the user experience by crafting attractive and user-friendly interfaces.
4. Read More About Clean Code: Consider reading books or articles on clean code practices. Books like "Clean Code: A Handbook of Agile Software Craftsmanship" by Robert C. Martin offer valuable insights into writing clean, maintainable code.
If you're working with React, consider these additional areas of study:
5. React Router: If you're building multi-page applications, delve into React Router to implement efficient page navigation.
6. React Hooks: Deepen your understanding of React hooks like useEffect, useContext, useReducer, and more. These hooks help manage side effects, share state, and control component logic more effectively.
7. Redux (or Other State Managers): As your application grows in complexity, consider learning global state management with Redux or another state manager. These tools help maintain shared state in an organized manner.
Happy coding!
