 Resources from Andrew Del Prete 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

React PowerPlug is a set of pluggable renderless components to help you prototype quickly. These components don't actually render DOM to the page but contain the state and logic for you to power your presentation components via render props. In this lesson we'll look at the `<State>` component and re-create the traditional counter example to see the potential of React PowerPlug.

Rapid Prototyping with React PowerPlug

In this lesson we'll look at React PowerPlug's Toggle component by refactoring a normal class component with state and handlers to a functional component powered by React PowerPlug.

Refactor a Stateful Toggle Component to a Functional Component with React PowerPlug

In this lesson we'll look at React PowerPlug's List component by refactoring a normal class component with state and handlers to a functional component powered by React PowerPlug.

Refactor a Stateful List Component to a Functional Component with React PowerPlug

In this lesson we look at two React components that render a Chuck Norris joke and share common functionality via a Higher-Order Component. We'll refactor this Higher-Order Component to be a Render Prop component to help make it easier to reason about.

Refactor a Higher-Order Component to a Render Prop Component

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

In this lesson I go over the basics of StimulusJS with a simple Counter example. I show how state in Stimulus actually lives in your HTML and how to bind functionality from your controller to your html with data attributes. I also demonstrate how to use actions to update the state and getters and setters to clean up the controller.

https://stimulusjs.org/handbook/origin

Update StimulusJS State with Actions, Getters, and Setters

In this lesson, I use Enzyme and Jest's Snapshot functionality to write an integration test for a component called CounterConsumer that consumes the Render Prop component Counter. This integration test is great because it doesn't necessarily care that CounterConsumer uses Counter behind the scenes, just that it works when integrated.

Other resources:
[Testing ⚛️ components using render props](https://blog.kentcdodds.com/testing-%EF%B8%8F-components-using-render-props-5623ab1814c)


Integration test a React component that consumes a Render Prop 

In this lesson, I use Enzyme and Jest to unit test a Counter Render Prop component. Writing integration tests are perfect for components that consume a Render Prop component. Likewise, unit tests are important to write for the Render Prop component itself, as you can test each individual unit that makes up the component.

Unit test a React Render Prop component

In this lesson I refactor a simple application built with Apollo, GraphQL, and React to utilize Apollo Boost. Apollo Boost combines many of the Apollo libraries we had to import and configure separately into one awesome API. 

Resources:

[What's in Apollo Boost](https://github.com/apollographql/apollo-client/tree/master/packages/apollo-boost#whats-in-apollo-boost)

[Zero config GraphQL State Management](https://dev-blog.apollodata.com/zero-config-graphql-state-management-27b1f1b3c2c3)


Zero-config Apollo + GraphQL with Apollo Boost

In this lesson I refactor a React component that utilizes the graphql higher-order component to the new Query render prop component baked into react-apollo.

Additional Resources:
[What's next for React Apollo](https://dev-blog.apollodata.com/whats-next-for-react-apollo-4d41ba12c2cb)


Fetch Data from GraphQL with React Apollo Query Component

In this lesson I refactor a React component that uses local state to use Unstated. Unstated provides a very nice and straight-forward API to help you manage global state painlessly. 

Additional Resources:
 - [State Management with Unstated](https://medium.com/react-native-training/unstated-the-setstate-of-react-state-management-8ce47b240e6d)
 - [Unstated github](https://github.com/jamiebuilds/unstated)

Use Unstated for State Management in React

In this lesson we look at how the Apollo @client directive can be used to fetch client-side state along with server data with one query. I also show how to update the client-side state using a mutation connected to a button.

Additional Resources [Apollo Client 2.0](https://dev-blog.apollodata.com/apollo-client-2-0-beyond-graphql-apis-888807b53afe)


Fetch Server Data and Client-side State in One Query using React Apollo + GraphQL

In this lesson, we look at where we came from with refs in React. Starting with the deprecated string ref pattern, callback refs, and then how to use the new `createRef()` method in React **16.3**.

Additional Resources: [refs and the dom](https://reactjs.org/docs/refs-and-the-dom.html
https://reactjs.org/blog/2018/03/29/react-v-16-3.html)

Reference a node using createRef() in React 16.3

In this lesson we'll use the new createRef() method to retrieve a node in a child component and pass it back to it's parent component. We'll also show how you can use a ref in a functional component with createRef().

Additional Resources:
https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components



Using createRef() to reference a node in a child component in React 16.3

In this lesson, we look at the new forwardRef() method in React 16.3, and how it helps us forward a ref through a Higher-order component to reference an inner DOM node.


Additional Resources:
https://reactjs.org/docs/forwarding-refs.html

Use forwardRef() in React 16.3

The componentWillReceiveProps() method is being deprecated in future version of React (17). Many of us use this method day-to-day to check for incoming prop changes, store state, and to invoke side effects like logging or fetching data from a server.

In this lesson, we'll look at how to refactor an existing component that uses componentWillReceiveProps() to instead use getDerivedStateFromProps() and componentDidUpdate().

Additional Resources:
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles



Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3

In this lesson I refactor a React component that utilizes a higher-order component for mutations to the new Mutation render prop component baked into react-apollo 2.1.

Additional Resources:
https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

Update Application State with React Apollo Mutation Component

In this lesson I refactor some code that utilizes the Mutation component to update client-side cache to use the new ApolloConsumer component baked into react-apollo 2.1.

Additional Resources: 
https://dev-blog.apollodata.com/introducing-react-apollo-2-1-c837cc23d926

Update Application State with React Apollo ApolloConsumer Component

In this lesson we look at how to use react-adopt to compose multiple Context Consumers into one reusable component to avoid render prop hell. 

Additional Resources:
https://github.com/pedronauck/react-adopt

Compose render prop components with React Adopt

In this lesson I refactor a React component that uses local state to use Unstated. I also show how you can utilize Unstated as a global store for two separate rendered components.

*Additional Resources:*
https://medium.com/react-native-training/unstated-the-setstate-of-react-state-management-8ce47b240e6d
https://github.com/jamiebuilds/unstated

Use Unstated to share state between two separate rendered components

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In this lesson I show how to use webpack to code split based on route in VueJS. Code splitting is a useful tool to help eliminate unused code and only load what's necessary.

*Additional Resources*
https://router.vuejs.org/en/advanced/lazy-loading.html


Code split by route in VueJS

In this lesson I show how to use webpack to code split a modal component in VueJS. Code splitting is a useful tool to help eliminate unused code and only load what's necessary.

**Additional Resources**
https://vuejs.org/v2/guide/components-dynamic-async.html
https://medium.com/js-dojo/3-code-splitting-patterns-for-vuejs-and-webpack-b8fff1ea0ba4

Topics

Instructors

Content Type

Andrew Del Prete