React Icon

React

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

JavaScript github.com

A Minecraft clone built entirely with JS

Having to open an additional app to play a game is sometimes too tiring. Therefore, I thought it’d be interesting to somehow implement Minecraft with javascript, essentially bringing the whole Minecraft game into the web. This not only takes away the tedious process of installing the game, it also brings the entire game to players within a couple clicks. Words cannot describe how much I adore the thought that building this extremely ambitious piece of software was a better alternative to the tedious process of installing the game. 😆

read more

Slack Engineering Icon Slack Engineering

When a rewrite isn’t: rebuilding Slack on the desktop

The Ship of Theseus is a thought experiment that considers whether an object that has had each of its pieces replaced one-by-one over time is still the same object when all is said and done. If every piece of wood in a ship has been replaced, is it the same ship? If every piece of JavaScript in an app has been replaced, is it the same app? We sure hoped so, because this seemed like the best course of action. Fascinating look behind the scenes at both the process of rewriting a massively used application and the particular architectural choices made along the way. The approach used was at once incremental and all-encompassing, rewriting a piece at a time into a gradually growing “modern” section of the application that utilized React and Redux. And the results? 50% reduction of memory use and 33% improvement in load time… not too shabby.

read more

Tom Warren The Verge

Slack’s new desktop app loads 33 percent faster and uses less RAM

Good news fellow Slack users, your productivity just got bumped by the perf gods of Slack thanks to their continued efforts and focus on the desktop app’s performance. Slack is unveiling a new version of its desktop app for Windows and macOS today that promises big performance improvements. Slack has rebuilt its desktop app to focus on speed, and the company claims Slack will now launch 33 percent faster than before. The Slack app will even use 50 percent less RAM than before, according to the company. Slack has been working on this overhaul for two years, slowly modernizing parts of its code along the way. While the desktop apps still run on Electron, all of the UI parts have been rebuilt using React to fix some of the shortcomings of the existing Slack app.

read more

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.

read more

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.

read more

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.

read more

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.

read more

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() }

read more

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.

read more

0:00 / 0:00