React is a powerful but deceptively simple JavaScript framework. Below is a set of resources to help guide you through your journey with React. These resources are by no means exhaustive, but should set you in the right direction, and hopefully help ease you into development with React.
This topic was originally developed to accompany the
ReactJS Development: Getting Started Tech Talk at the LabKey User Conference.
LabKey/React Resources
- LabKey tutorialModules: reactExamples
- An example LabKey module with a bootstrapped React project. This module demonstrates how to render a React application/page within the LabKey framework including keeping the standard LabKey header and header menus.
- Includes a dev build with hot reload capabilities.
- Includes a detailed overview of the functionality provided.
- React Tutorial
- This tutorial is a great resource for getting started. If you have no prior experience with React it's a good idea to start with this tutorial.
- ES6+
- While you don't need to be intimately familiar with all of the new JavaScript (EcmaScript) features, it's a good idea to brush up on them as they can be particularly useful when writing React code.
- AirBnB JavaScript Style Guide
- While this document is a style guide, it also serves as a great introduction to all of the modern JavaScript features, while providing guidance on how best to use the features.
- Objects
- Arrays
- Destructuring
- Functions
- Arrow Functions
- Hoisting: Hoisting has always been a particularly confusing aspect of JavaScript, but unfortunately it gets a little bit more complex with let/const and blocks in ES6+
- Immutable JavaScript Using ES6 and Beyond
- This is a pretty good article that explains how to make immutable transformations with ES6+. A lot of this is already covered in the AirBnB Style Guide, but this article provides a bit more context around why.
- React Docs
- State and Lifecycle: State and lifcycle are two very important concepts to understand when it comes to React development. It's especially important to understand that state updates may be asynchronous.
- Lifting State Up: This is arguably one of the most important concepts to understand when writing React code.
- Thinking in React: This is a particularly great resource for those new to React.
- Higher Order Components: This is definitely an advanced concept, but it’s extremely useful, and very powerful. Higher Order Components make it extremely easy to separate complex business logic from rendering logic, as well as making it much easier to reuse functionality and/or share data across components.
- Optimizing Performance: There is a lot of content in this section of the docs. For the most part you can ignore content in the beginning that covers build-time optimizations. Start with reading the section about profiling components and read everything else below. Make sure you read about:
Additional Technologies and Resources
None of the stuff in this section is essential to learning React, but they may be pieces of technology you find useful when writing React code.
- TypeScript
- TypeScript is a newer language, it is a superset of JavaScript that adds a powerful type system on top of JS.
- TypeScript Deep Dive
- This is a wonderful free e-book that is very in depth, and covers a wide variety of topics.
- Immutable JS
- Immutable JS is a utility library that can make it a bit easier to write immutable code, which is particularly important when writing React code.
- Immutable.js: An Introduction with examples written for humans: The official documentation for Immutable is not great, I would recommend starting with this guide instead.
- Redux
- Redux is the most popular state management library for React, you probably won't need to use it unless you're making a Single Page Application (SPA).
- Just the Basics
- This is the bare minimum set of docs recommended by the Redux maintainers
- A Cartoon Intro to Redux
- This article talks a lot about flux, and compares Redux to it constantly, but don’t worry about knowing anything about flux. This article has a pretty great explanation of all the terminology used in Redux (reducers, dispatchers, etc.)
- You Might Not Need Redux
- An article by the creator of Redux that really focuses on the “when and why” parts of Redux.
- React Router
- React Router is the most popular routing library for React. You'll need to use this if you plan on writing a Single Page Application. React Router has changed a lot over time, when reading/googling for content make sure you're looking at resources for the most recent version.
Shared Package Dependencies
If you have several React modules and want to share node_modules/npm package dependencies, the following steps will help you:
- Include a package.json file in the parent directory of the React modules that includes the npm package dependencies.
- In this same parent directory, include a build.gradle file that applies the plugin, such as:
apply plugin: com.github.node-gradle.node
- In each module's own build.gradle file include this for each task with the dependency:
dependsOn project.parent.tasks.npmInstall
This will tell the build system that your React modules are dependent on the parent npm install, so that they will be built in the correct order.
NPM Versions Compatible with LabKey Versions
| | 24.7 (Jul 2024) | 24.11 (Nov 2024) | 25.3 (Mar 2025) | 25.7 (Jul 2025) | 25.11 (Nov 2025) | 26.3 (Mar 2026) | 26.7 (Jul 2026) |
|---|
| @labkey/components | 3.56.2 | 5.20.4 | 6.26.9 | 6.56.2 | 6.68.3 | 7.21.5 | 7.45.6 |
| @labkey/build | 7.3.0 | 8.2.0 | 8.4.0 | 8.6.0 | 8.6.0 | 8.9.0 | 9.1.5 |
| @labkey/api | 1.34.1 | 1.35.6 | 1.38.0 | 1.42.0 | 1.43.2 | 1.48.0 | 1.51.5 |
| @labkey/ehr | X | X | X | X | X | X | X |
Related Topics
