Making SVG icon libraries for React apps

Nicolas Gallagher:
At Twitter I used the approach described here to publish the company’s SVG icon library in several different formats: optimized SVGs, plain JavaScript modules, React DOM components, and React Native components.
There is no One True Way© to make an SVG icon system. The only thing that SVG icon systems have in common is that, somehow, some way, SVG is used to show that icon. I gotta find some time to write up a post that goes …
The post Making SVG icon libraries for React apps appeared first on CSS-Tricks.

Link: http://nicolasgallagher.com/making-svg-icon-libraries-for-react-apps/

JavaScript to Native (and Back!)

I admit I’m quite intrigued by frameworks that allow you write apps in web frameworks because they do magic to make them into native apps for you. There are loads of players here. You’ve got NativeScript, Cordova, PhoneGap, Tabris, React Native, and Flutter. For deskop apps, we’ve got Electron.
What’s interesting now is to see what’s important to these frameworks by honing in on their focus. Hummingbird is Flutter for the web. (There …
The post JavaScript to Native (and Back!) appeared first on CSS-Tricks.

Link: https://css-tricks.com/javascript-to-native-and-back/

Rendering Lists Using React Virtualized

Working with data in React is relatively easy because React is designed to handle data as state. The hassle begins when the amount of data you need to consume becomes massive. For example, say you have to handle a dataset which is between 500-1,000 records. This can result in massive loads and lead performance problems. Well, we’re going to look at how we can make use of virtualized lists in React to seamlessly render a long list of data in …
The post Rendering Lists Using React Virtualized appeared first on CSS-Tricks.

Link: https://css-tricks.com/rendering-lists-using-react-virtualized/

JavaScript Bake-Off: Angular, React, and Vue

In this post, we present an open source reference application developed three times using three different frameworks: React, Vue & Angular.
As Keyhole consultants, we are exposed to a plethora of technology stacks and implementations from client project to client project. Particularly with our enterprise clients, great care must go into selecting the best technologies for the company’s technical needs and current landscape. After all, they don’t want to be re-writing the same application in just a couple of years due to lackluster choices and shortage of developers to add functionality.

Link: https://dzone.com/articles/javascript-bake-off-angular-react-and-vue

Bridging the Gap Between CSS and JavaScript: CSS-in-JS

In this article, we’re going to dig into the concept of CSS-in-JS. If you’re already acquainted with this concept, you might still enjoy a stroll through the philosophy of that approach, and you might be even more interested in the next article (coming tomorrow!).
Web development is very interdisciplinary. We’re used to working closely with multiple languages. And, as developing web applications becomes more commonplace and nuanced, we often look for creative ways to bridge the gaps between those languages …
The post Bridging the Gap Between CSS and JavaScript: CSS-in-JS appeared first on CSS-Tricks.

Link: https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-in-js/

An Overview of Render Props in React

An Overview of Render Props in React
Using render props in React is a technique for efficiently re-using code. According to the React documentation, “a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic." To understand what that means, let’s take a look at the render props pattern and then apply it to a couple of light examples.

The render props pattern
In working with …
The post An Overview of Render Props in React appeared first on CSS-Tricks.

Link: https://css-tricks.com/an-overview-of-render-props-in-react/

A Guide to Custom Elements for React Developers

I had to build a UI recently and (for the first time in a long while) I didn’t have the option of using React.js, which is my preferred solution for UI these days. So, I looked at what the built-in browser APIs had to offer and saw that using custom elements (aka Web Components) may just be the remedy that this React developer needed.
Custom elements can offer the same general benefits of React components without being tied to …
The post A Guide to Custom Elements for React Developers appeared first on CSS-Tricks.

Link: https://css-tricks.com/a-guide-to-custom-elements-for-react-developers/

Understanding React Render Props and HOC

Here’s a great post by Aditya Agarwal on the difference between render props and higher-order components in React. I particularly like the demo he chose to explain the two. But, to summarize:
Higher-order components (HOCs) take a component and return a component. So let’s say you have a component called Username that just returns a string of a user’s name and you want to capitalize that somewhere – this is the perfect opportunity to use a HOC that wraps …
The post Understanding React Render Props and HOC appeared first on CSS-Tricks.

Link: https://blog.bitsrc.io/understanding-react-render-props-and-hoc-b37a9576e196

Building Skeleton Components with React

One of the advantages of building a Single Page Application (SPA) is the way navigating between pages is extremely fast. Unfortunately, the data of our components is sometimes only available after we have navigated to a specific part of our application. We can level up the user’s perceived performance by breaking the component into two pieces: the container (which displays a skeleton view when it’s empty) and the content. If we delay the rendering of the content component until we …
The post Building Skeleton Components with React appeared first on CSS-Tricks.

Link: https://css-tricks.com/building-skeleton-components-with-react/