View profile

Webpack, Web Components and VS Code

Hey everyone, it's Robin. I hope you have a great time reading The Road to learn React and my other b
Webpack, Web Components and VS Code
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?
Robin Wieruch - A Developer's Digest

Are you interested in becoming a software engineer? My newsletter teaches ten thousands of developers about JavaScript by delivering free tutorials and eBooks straight to their inbox.

I am happy about all the success stories that reach me everyday from people who were able to become professional web developer after completing my complete courses and learning material. The newsletter now provides them with latest industry trends, interesting reads and new learnings. After all, you live and learn.

This newsletter delivers comprehensive tutorials, books, and courses straight to your inbox. Quality content only and no spam. Give it a chance and become the best developer you can be.

If you don't want these updates anymore, please unsubscribe here
If you were forwarded this newsletter and you like it, you can subscribe here
Powered by Revue