React Icon

React

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

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

React reactjs.org

Create React App 2.0 is here

Here’s a few things that are new, but “don’t feel pressured to upgrade anything.”

sorrycc umijs.org

UmiJS – a pluggable, enterprise-level React app framework

Umi is based on routing, supports next.js-like conventional routing, and various advanced routing functions, such as routing-level on-demand loading. Then with a complete plugin system, covering every life cycle from source code to build product, umi is able to support various functional extensions and business needs, currently umi have almost 50+ plugins in both community and inside company.

0:00 / 0:00