View profile

Webpack, Web Components and VS Code


Robin Wieruch - A Developer's Newsletter

July 4 · Issue #23 · View online

Hello, it's Robin. I am the author of books such as The Road to React and much more content about JavaScript and its ecosystem.

This is my newsletter which delivers comprehensive tutorials, books, and courses straight to your inbox. Quality content only. Give it a chance and become a better developer every month.

Hey everyone, it’s Robin. I hope you have a great time reading The Road to learn React and my other books about Redux, GraphQL, and Firebase.
This month’s Newsletter is less about React but more about the ecosystem around it. If you have a good understanding of React, these tutorials may be super useful for you to improve your skills. If not, save them for later :-)

Custom Webpack Setup (with React)
I am super happy to present to you a tutorial series to set up a custom JavaScript application with Webpack. If you want to go beyond create-react-app at some point, you might enjoy this series.
It starts with setting up a JavaScript project and bundling it with basic Webpack. Afterward, you will learn how to add Babel to use JavaScript features that are not known by your browsers yet. From there you can move on multiple ways:
  1. Integrate React in your custom Webpack Setup
  2. Add ESLint for your Code Style
  3. Advance your Webpack Setup (in-depth tutorial)
A gentle introduction to Web Components
The client I am working for asked me about Web Components and how to use them in companies with more than one team to build a foundation of UI components. Since I have never used Web Components before, I took one week off to learn more about them. As a result, I wrote a long read introduction to Web Components.
Since my client asked me about using them as foundation for a UI library, I also documented how to use Web Components in React with a Web Components React Hook. It could go the same way for other frameworks such as Angular or Vue. This way, Web Components would always look and behave the same – acting as your foundational UI library – and still can be utilized in different frameworks for different teams in your company.
Prettier and ESLint in VS Code
These two tutorials should boost your developer experience. While Prettier gives you auto formatting for your source code, ESLint notifies you about code style violations. Both tools give you more time to focus on your actual code.
  1. How to integrate and use Prettier
  2. How to combine Prettier with ESLint
That’s it from my side this month. I hope you enjoy the tutorials which I wrote to take you beyond React. Even though you are not using Webpack or Web Components, take the chance to make yourself familiar with them :-)
Best wishes, Robin
Monthly Recommendation
The last month I didn’t have much time to read though, but watched an intensive yet educational mini series that I want to recommend to you: Chernobyl. I couldn’t watch more than one episode a day because of its dramatic staging, but you should definitely check it out.
Did you enjoy this issue?
In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue