Select Page

Category: react

An Almost Ideal React Image Component

Yes, this is a React component, but regardless if you care about that part or not, the “ideal image component” part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with: Placeholder space (and then flexible responsive styles after loading) Low-quality placeholder images Responsive images syntax (srcset) Image formats (e.g. using WebP when you can) Click-to-load on bad network connections Better UX for loading errors, with translatable copy That’s not even all of it. So much to think about with poor little . I enjoyed Alejandro Sanchez’s response: The readme file for this component is amazing to teach you how to think like a front-end developer. — Alejandro Sanchez (@alesanchezr) June 12, 2018 Direct Link to Article — Permalink The post An Almost Ideal React Image Component appeared first on CSS-Tricks....

Read More

A Quick Roundup of Recent React Chatter

Like many, many others, I’m in the pool of leveling up my JavaScript skills and learning how to put React to use. That’s why Brad Frost resonated with me when he posted My Struggle to Learn React.” As Brad does, he clearly outlines his struggles point-by-point: I have invested enough time learning it React and ES6 travel together Syntax and conventions Getting lost in this-land I haven’t found sample projects or tutorials that match how i tend to work I’m less competent at JS than HTML and CSS It seems that Brad’s struggles resonated with others as well, inspiring empathy and help from the community. For example, Kevin Ball touches on the second and third frustrations by supplying a distinction between React and ES6 and examples of the syntax and conventions of each: For each feature, I show a couple examples of what it might look like, identify where it is coming from, give you a quick overview of what is called and what it does, and link off to some resources that can help you learn about it. Super awesome! Shortly following Brad’s post was this tweet from Sara Soueidan: I’m just gonna throw this bomb here: React is the new jQuery There you go. — Sara Soueidan (@SaraSoueidan) May 24, 2018 You know that lit up the Twitterverse. Yes, it’s provocative, but the sentiment is pretty clean...

Read More

Managing State in React With Unstated

As your application becomes more complex, the management of state can become tedious. A component’s state is meant to be self-contained, which makes sharing state across multiple components a headache. Redux is usually the go-to library to manage state in React, however, depending on how complex your application is, you might not need Redux. Unstated is an alternative that provides you with the functionality to manage state across multiple components with a Container class and Provider and Subscribe components. Let’s see Unstated in action by creating a simple counter and then look at a more advanced to-do application. Using Unstated to Create a Counter The code for the counter we’re making is available on GitHub: View Repo You can add Unstated to your application with Yarn: yarn add unstated Container The container extends Unstated’s Container class. It is to be used only for state management. This is where the initial state will be initialized and the call to setState() will happen. import { Container } from 'unstated' class CounterContainer extends Container { state = { count: 0 } increment = () => { this.setState({ count: this.state.count + 1 }) } decrement = () => { this.setState({ count: this.state.count - 1 }) } } export default CounterContainer So far, we’ve defined the Container (CounterContainer), set its starting state for count at the number zero and defined methods for adding and...

Read More

What’s wrong with CSS-in-JS?

Brad Frost thinks it’s: Lack of portability Context Switching Flushing best practices down the toilet In the spirit of good-ol-fashioned blog-and-response, here’s: Brian Muenzenmeyer’s response Micah Godbolt’s response I’d like to point out that “CSS-in-JS” is an umbrella term, and that there are lots of takes on actual implementations of this. It’s possible to like one approach and not another. My guess is we’ll end up with a split down the middle as a best practice someday. When we write styles, we will always make a choice. Is this a global style? Am I, on purpose, leaking this style across the entire site? Or, am I writing CSS that is specific to this component? CSS will be split in half between these two. Component-specific styles will be scoped and bundled with the component and used as needed. Direct Link to Article — Permalink The post What’s wrong with CSS-in-JS? appeared first on CSS-Tricks....

Read More

Understanding React `setState`

React components can, and often do, have state. State can be anything, but think of things like whether a user is logged in or not and displaying the correct username based on which account is active. Or an array of blog posts. Or if a modal is open or not and which tab within it is active. React components with state render UI based on that state. When the state of components changes, so does the component UI. That makes understanding when and how to change the state of your component important. At the end of this tutorial, you...

Read More
000webhost logo