This topic accompanies the ReactJS Development: Getting Started Tech Talk at the LabKey User Conference 2019.


React JS: Getting Started

Intro

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.

Resources

  • LabKey tutorialModules repo
    • An example LabKey module with a bootstrapped React project.
    • Includes a dev build with hot reload capabilities.
  • 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 avoiding reconciliation, as well as how shouldComponentUpdate works.

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 overtime, when reading/googling for content make sure you're looking at resources for the most recent version.

Slide Deck

Discussion

Was this content helpful?

Log in or register an account to provide feedback


previousnext
 
expand all collapse all