Tools and Best Practices for Front-End Developers: A Comprehensive Guide with React, CSS, and VS Code

When I started in the front-end world, I felt overwhelmed by the amount of new technologies and concepts. I made many mistakes, but that was key to learning. In this second part, I will share the tools, practices, and little tricks that helped me grow as a frontend developer. This is not a definitive guide, just recommendations based on my experience, so you can avoid some of the stumbles I had along the way.

1. Essential Tools for Developers

Example Configuration in Visual Studio Code

Imagine you are writing code and unknowingly make a syntax error. The ESLint extension will notify you in real time with a red underline and a suggestion to fix it. This way, you avoid common errors and keep your code clean.

For example, in the following image, ESLint detects a type error in TypeScript, indicating that you cannot assign an argument of type string to a parameter of type SetStateAction<null>:

As you can see, ESLint not only marks the error but also offers the option to see the problem in more detail and, in some cases, quick fix suggestions.

Another useful tool is Prettier, which formats your code automatically. For example, if you write this messily

When you save the file with Prettier, it will become:

Another example with more extensive code

After saving or running the formatting, Prettier will organize the code consistently, maintaining a uniform and easy-to-read structure.

Besides ESLint and Prettier, another very useful extension is GitLens. This tool allows you to see the history of changes in your code directly in the editor. With GitLens, you can know who made a change, when it was made, and a brief description of the associated commit.

Here is an example of how this information is displayed in Visual Studio Code:

As you can see, GitLens shows details like "5 days ago • Code update," which makes it easier to track modifications in your project without needing to open the terminal or check Git manually.

These tools not only improve the readability of your code but also allow you to focus on the logic without worrying so much about style or minor errors.

2. Advanced Styles and Design

Advanced CSS Example: Flexbox

Suppose you have three buttons that need to be aligned horizontally and distributed evenly. Instead of manually adjusting margins, use Flexbox:

HTML:

This will ensure that the buttons are evenly distributed without needing to manually adjust their positions.

Responsive Design Example

To make a website look good on mobile and desktop, use Media Queries. For example:

This will make the buttons stack in a column when the screen is less than 600 pixels wide.

3. Advanced Techniques in React

Example of State Management with Context API

Suppose you have an application with a dark theme and a light theme, and you want the user to be able to switch between them. Instead of passing this information to every component, use Context API:

Example of Routes with React Router

If you have an application with different pages (Home, About, Contact), instead of reloading the entire page every time the user navigates, use React Router:

This allows navigation to be faster and smoother.

4. Optimization and Best Practices

Example of Lazy Loading

Suppose you have an application with many images, but you don't want them all to load at the same time, as it would slow down the page. Use lazy loading:

This makes the image load only when the user needs it.

Example of Bundle Splitting

If your application is large, it's better to split the code into smaller parts so it loads faster. With React.lazy(), you can do this:

Here, the page only loads when the user visits it, instead of loading it from the start.

5. Building Complex Projects

Example of Blog with Authentication

Imagine you want to create a blog where users can post articles. Use Firebase Authentication to manage logins:

With this, users can sign in with Google on your blog.

6. Quick Tips or Express Advice

• Use Keyboard Shortcuts in VS Code:
  • Ctrl + D: Select multiple occurrences of the same text.

• • Alt + Shift + F: Automatically format your code (if you have Prettier configured).
• Recommended Extensions:
• *Bracket Pair Colorizer:* to easily identify matching braces.
• *Path Intellisense:* to autocomplete file paths in VS Code.
• Productivity Tip:
• Don't obsess over finding "the best solution" on the first try. Build something functional first, then improve.

To keep learning, check the official documentation

• Official React Documentation
• GitHub
• MDN Web Docs for JavaScript and CSS.
• FreeCodeCamp for free interactive courses.

Front-end development is a constant learning journey. It's not about knowing everything immediately, but about progressing step by step. Make mistakes, experiment, break things, and rebuild. Every line of code written is a lesson learned.

Don't be afraid to feel lost sometimes, that means you're exploring something new. The important thing is to never stop. Keep creating, keep learning! 💙

Ready to take your front-end development skills to the next level?

At Kranio, we have web development experts who will help you implement best practices and tools in your projects. Contact us and discover how we can help you build modern and efficient interfaces.​