React Icon

React

React is an open source JavaScript library used for designing user interfaces.
127 Stories
All Topics

Peter Lu github.com

XSM – an "extraordinarily simple" state management solution

[XSM] consists of a global store and the machinary to re-render the component when the state is updated. The store is just a JavaScript object with key and value pairs. By binding the instance reference, this, to the store, each component can react to the changes of the store whether it is re-render or unmount. It is really this simple, no need to use HOC, provider, reducer, decorator, observer, action, dispatcher, etc. Hence, all the three most popular framewokrs work the same way in XSM and that’s why we can keep the code size very small and support the three frameworks without framework specific modules.

Works out of the box with Angular, React, and Vue.

Chris Biscardi gatsbyjs.org

Gatsby themes promoted to stable!

Our friends at Gatsby just announced the stable release of Gatsby themes.

Chris Biscardi writes on the Gastby blog:

Using a Gatsby theme, all of your default configuration (shared functionality, data sourcing, design) is abstracted out of your site, and into an installable package.

This means that the configuration and functionality isn’t directly written into your project, but rather versioned, centrally managed, and installed as a dependency. You can seamlessly update a theme, compose themes together, and even swap out one compatible theme for another.

What does “stable” mean?

The core theme APIs have been stable for a long time under the __experimentalThemes flag in gatsby-config.js. Since they’re being used in production by a number of different companies to great effect, we’re promoting these APIs, specifically composition and shadowing, to stable within Gatsby core so that people can take advantage of them with confidence.

JavaScript sebastiandedeyne.com

Forget about component lifecycles and start thinking in effects

Great description of how the Hooks API leads us from an imperative style of implementing side effects (“Do thing x on mount, do thing y on unmount”) to a declarative style of implementing side effects.

Author Sebastian De Deyne puts it this way:

Instead of thinking about when we should apply the side effect, we declare the side effect’s dependencies. This way React knows when it needs to run, update, or clean up.

JS Party JS Party #75

LIVE at ReactJS Girls

Emma Wedekind MC’d a live show at ReactJS Girls with a panel of 3 amazing women — Eve Porcello, Marcy Sutton, and Kate Beard. It was a great discussion covering the biggest challenges they’ve faced, how no matter who you are imposter syndrome occurs and never really goes away, ways to support and encourage under-represented groups and people to get into tech, and how to choose a topic when writing a talk.

React github.com

200 bytes to never think about React state management libraries ever again

Gotta love when a library is so small that Logbot can JIT inline it in the News and save us precious clicks…

import React from "react"

export interface ContainerProviderProps {
	children: React.ReactNode
}

export interface Container<Value> {
	Provider: React.ComponentType<ContainerProviderProps>
	useContainer: () => Value
}

export function createContainer<Value>(useHook: () => Value): Container<Value> {
	let Context = React.createContext<Value | null>(null)

	function Provider(props: ContainerProviderProps) {
		let value = useHook()
		return <Context.Provider value={value}>{props.children}</Context.Provider>
	}

	function useContainer(): Value {
		let value = React.useContext(Context)
		if (value === null) {
			throw new Error("Component must be wrapped with <Container.Provider>")
		}
		return value
	}

	return { Provider, useContainer }
}

export function useContainer<Value>(container: Container<Value>): Value {
	return container.useContainer()
}

Vadim Demedes vadimdemedes.com

Building rich command-line interfaces with Ink and React

Could this be the future of writing interactive CLI tools? If you know React you know Ink.

Ink is a library for building and testing command-line applications using React components. Since it acts as a React renderer, you can use everything that React has to offer: hooks, class components, state, context, everything. Ink lets you build interactive and beautiful CLIs in no time.

Building rich command-line interfaces with Ink and React

Dan Abramov overreacted.io

React as a UI runtime

At a 37 minute read time, this post from Dan Abramov on using React as a programming runtime is near book length and will give you a deeper understanding of React “than 90% of its users.”

We’ve touched on pretty much all important aspects of the React runtime environment. If you finished this page, you probably know React in more detail than 90% of its users. And there’s nothing wrong with that!

Alyson Swerdloff github.com

Visualize your React app's component performance with a live heat map

React Quantum parses through your React application to create a color-coded tree model of its component hierarchy. On hover, each tree node will display two key component performance metrics—render time and re-render frequency—as well as memoized state and props to indicate what, specifically, initiated the render.

Visualize your React app's component performance with a live heat map

Gaming script-8.github.io

A fantasy computer for making, sharing, and playing tiny retro-looking games

SCRIPT-8 is designed to encourage play — the kind of wonder-filled play children experience as they explore and learn about the world. In order to support this goal, everything in SCRIPT-8 has immediate feedback. It is what some call a “livecoding” environment.

Send this to $YOUNG_PERSON in your life. But also bcc it to yourself. 😉

A fantasy computer for making, sharing, and playing tiny retro-looking games
0:00 / 0:00