Book Image

Modern JavaScript Web Development Cookbook

By : Federico Kereki
Book Image

Modern JavaScript Web Development Cookbook

By: Federico Kereki

Overview of this book

JavaScript has evolved into a language that you can use on any platform. Modern JavaScript Web Development Cookbook is a perfect blend of solutions for traditional JavaScript development and modern areas that developers have lately been exploring with JavaScript. This comprehensive guide teaches you how to work with JavaScript on servers, browsers, mobile phones and desktops. You will start by exploring the new features of ES8. You will then move on to learning the use of ES8 on servers (with Node.js), with the objective of producing services and microservices and dealing with authentication and CORS. Once you get accustomed to ES8, you will learn to apply it to browsers using frameworks, such as React and Redux, which interact through Ajax with services. You will then understand the use of a modern framework to develop the UI. In addition to this, development for mobile devices with React Native will walk you through the benefits of creating native apps, both for Android and iOS. Finally, you’ll be able to apply your new-found knowledge of server-side and client-side tools to develop applications with Electron.
Table of Contents (15 chapters)

Creating StyledComponents for inline styling

CSS-in-JS is a sometimes controversial topic. Before React, it was almost mandatory that you'd have a trio of sets of JS, HTML, and CSS separate files. When React introduced JSX, that was a shot against the trio, because we started placing HTML in the JS code. CSS-in-JS is the natural extension of that idea, because now we want to also include styling within the same JS files.

A first reaction to this is: Isn't that just going back to inline styles? This is a valid question, but inline styles aren't just powerful enough. While you can manage lots of styling by inlining styles, the fact is that there are several features that aren't accessible in this way: keyframes animation, media queries, pseudo selectors, and more.

The idea of going with CSS-in-JS is writing styles by using JS, but then injecting those styles...