 Resources from Phil Holden in 2024

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React components we want to be able to do this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.  

Radium: Updating Button Styles via Props

React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo selectors like `:hover` and `:active`. By using Radium to listen to mouse events we can restore `:hover` and `:active` selectors to inline styles.

Styling a React button component with Radium

[React Playground Styled](https://ncredinburgh.github.io/react-playground-buble/) is a responsive playground that can be configured with styled-components. It is built for documenting React components in the minimum space possible. You will normally wrap it in your own component to provide sensible defaults that make it blend with the look and feel your style guide.

React Playground Styled for Component Docs

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how. 

Setup Nuclide to use Flow and Eslint (Mac)

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Canvas is great for high performance graphics rendering but by default the results look blocky on phones tablets and laptops with high pixel density or Retina displays. By using canvas width and height attributes and style props we can use `window.devicePixelRatio` to create a canvas that is responsive to pixel ratio.  

Make Canvas Responsive to Pixel Ratio

[redux-swarmlog](https://github.com/philholden/redux-swarmlog) is a helper library enabling Redux applications to sync peer to peer over WebRTC. It takes just five minutes to make the standard Redux TodoMVC network enabled. 

Topics

Instructors

Content Type

Phil Holden

Radium: Updating Button Styles via Props

Styling a React button component with Radium

React Playground Styled for Component Docs

Setup Nuclide to use Flow and Eslint (Mac)

Make Canvas Responsive to Pixel Ratio

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog