matt-raible

Matt Raible is a well-known figure in the Java community and has been building web applications for most of his adult life. For over 20 years, he has helped developers learn and adopt open source frameworks and use them effectively. He's a web developer, Java Champion, and Developer Advocate at Okta. Matt is a frequent contributor to open source and a big fan of Java, IntelliJ, TypeScript, Angular, and Spring Boot. 

Developer Advocate

Matt Raible

This tutorial shows you how to create a slick-looking, full-stack, secure application using React, Spring Boot, and JHipster.

Full Stack Java with React, Spring Boot, and JHipster

kapehe-jorgenson

Kapehe is an R&D Content Engineer for Auth0 with a passion for learning and teaching. With her primary focus on ReactJS and JavaScript, she is impressed with what code can create for the web. Technology and web development are constantly evolving and naturally bring that need for continual learning. She enjoys writing tutorials, hosting local meetups, and learning with others to expand coding knowledge.

R&D Content Engineer

Kapehe Jorgenson



**TL;DR:** - In this article, we are going to go over the new updates and features added in the major release of the `create-react-app` tool. We will go over the changes that ReactJS announced and what we can find in this great update. We will also go over the addition of TypeScript support and how that can benefit your project.

## Create React App 2.0 - The Big Reveal

On October 1, 2018, [ReactJS tweeted](https://twitter.com/reactjs/status/1046933146736963587) their release announcement of [Create React App 2.0](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html). 

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We’ve just released Create React App 2.0, including a year’s worth of improvements. <a href="https://t.co/O2AjlHOUjp">https://t.co/O2AjlHOUjp</a> <a href="https://t.co/sV8YbY7IED">pic.twitter.com/sV8YbY7IED</a></p>&mdash; React (@reactjs) <a href="https://twitter.com/reactjs/status/1046933146736963587?ref_src=twsrc%5Etfw">October 2, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## The Useful Create React App

Once released, developers were excited, to say the least. If you have used ReactJS, chances are you have used the bash command:

```bash
create-react-app name-of-app
```

Once that command starts running, you get to sit back and relax. You will see that ReactJS is taking care of all the setup and configuration. Once it’s finished, the `package.json` is compiled, starting dependencies are installed, and it gives you the initial project structure. What’s in this new and flashy Create React App 2.0? Let’s check it out!

<include src="TweetQuote" quoteText="On October 1, 2018, ReactJS tweeted their release announcement of Create React App 2.0. Once released, developers were excited, to say the least."/>

## Sass and CSS Modules

Have you ever had to install Sass loaders yourself? Have you had to configure [Sass](https://sass-lang.com/) throughout your project yourself? Well now, in Create React App 2.0, you can get Sass running in your project with a simple bash command and some file name changes. Run:

```bash
npm install node-sass
```

Change your `src/App.css` to `src/App.scss` and make sure to update that file name in the top part of `src/App.js` and you are ready to use and reuse your stylesheets. It’s great!

## Babel 7

[Babel](https://babeljs.io/) released their Babel 7 version this year as well and it did not take long for React to switch over. You can learn all about the new [Babel 7 features here](https://babeljs.io/blog/2018/08/27/7.0.0). Babel is important because it converts ES6 into code that browsers can read.  Babel 7 is faster, can now parse TypeScript syntax, and even gives support for the React fragment syntax.

Want to learn more about React fragments? Dive into the [React docs on Fragments](https://reactjs.org/docs/fragments.html#short-syntax).

## Webpack 4

React, having always used [Webpack](https://webpack.js.org/), has now updated to Webpack 4. Webpack 4 is much faster, decreases your build time, and allows you to set up a particular environment whether it's development or production.

![Webpack 4 logo - JavaScript module bundler](https://images.ctfassets.net/23aumh6u8s0i/72d1mUghQG0alzmyZsIM9r/87b1d6cf5fad0164df47e1e6f79c1079/webpack-4-logo)

In short, it is a module bundler for JavaScript applications and version 4 splits the bundles into a more intelligent and better performant way. There is so much that goes with Webpack 4, if you want to learn more about it, you can [visit the Webpack website here](https://webpack.js.org/).

<include src="TweetQuote" quoteText="React has now updated to Webpack 4, a module bundler for JavaScript applications."/>

## Jest 23

When Create React App 2.0 came out, they launched it with that latest version of [Jest](https://jestjs.io/). Jest 23 is more stable and much quicker, which will help you when running tests. You’ll feel more confident with more immediate feedback and reliable results.

![Jest logo - An open-source testing framework](https://images.ctfassets.net/23aumh6u8s0i/3lWxbu0X1JZtfNmfOZM2hg/d5d74ad73a0040712d26427e94de0eae/jest-logo)

Jest is an open-source testing framework that has just been updated to version 23. It has some great new features. One of those updates is the new watch menu option called Interactive Snapshot Mode. You are able to look through each snapshot and review your failed ones. While reviewing you can choose to update or skip each one. Jest has a great list of some of the updates that you can find [here on Jest’s blog](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode).

## PostCSS

PostCSS, a great tool with over 200 custom plugins has been added to Create React App 2.0. By using JavaScript, you are able to easily transform your CSS. Create React App did not have this neat feature, but the team at React thought that adding this in would be a great for developers. I would have to agree!

If you were to head over to [PostCSS.org](https://postcss.org/) you would see a list of features that come with PostCSS.

* Increased code readability
* Converts modern CSS into a more readable version for browsers
* Uses [CSS Modules](https://github.com/css-modules/css-modules) which keeps all class and animation names local
* Utilizes [stylelint](https://stylelint.io/), a modern CSS linter
* Offers a powerful grid system

## Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms

Imagine being able to use a third-party platform like [Apollo](https://www.apollographql.com/), [MDX](https://mdxjs.com/), or [Relay Modern](https://facebook.github.io/relay/) without extra configuration or setup. There is no longer the issue of being able to use Babel Macros without ejecting first, Create React App 2.0 is taking care of that setup for us.

Check out this tutorial on [how to create a React app with MDX](https://auth0.com/blog/how-to-build-an-app-with-react-and-mdx/?utm_source=linkedin&utm_medium=sc&utm_campaign=mdx_react).

## SVG

We have all seen an SVG tag:

```html
<svg width="100" height="100">
   <circle cx=“50” cy=“50” r=“40” stroke=“blue” stroke-width=“5” fill="black" />
</svg> 
```

This one is a simple circle but some SVG tags can get pretty long and confusing. SVG’s are great because they allow for cleaner looking lines, richer color, and change your images into code.

What if I told you that now you can import an SVG as a React component?

Simply import the component at the top:

`import SVGIcon from "./svgicon";`

And use it down within the file:

`<SVGIcon name="image" width={50} fill={red} />`
or
`<SVGIcon />`

This can give a lot of flexibility in where you use your SVG’s and allows for better readability.


## Yarn Plug’n’Play

Hmmm, getting rid of the `node_modules` seems far-fetched but this experimental [Yarn](https://yarnpkg.com/en/) Plug’n’Play allows for just that. If you look at the bullet points in [this GitHub PR conversation](https://github.com/yarnpkg/rfcs/pull/101), you’ll see that there are some awesome aspects to it:

* Installs ran using Plug'n'Play are up to 70% faster than regular ones.
* Starting from this PR, Yarn will now be on the path to make yarn install a no-op on CI (Continuous Integration).
* Yarn will now be able to tell you precisely when you forgot to list packages in your dependencies.
* Your applications will boot faster through a hybrid approach of static resolutions.

This is something that if you want to try out in your React project, go ahead. This feature is just a fun new add-on that is completely optional.

Here you'll see [Dan Abramov](https://twitter.com/dan_abramov) trying out Yarn Plug-n-Play:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I’m trying out Yarn Plug’n’Play and it’s pretty incredible. This GIF is *not* speeded up. I literally created a project in five seconds (on a warm cache). No node_modules. It works. <a href="https://t.co/AjJP5vXxEi">pic.twitter.com/AjJP5vXxEi</a></p>&mdash; Dan Abramov (@dan_abramov) <a href="https://twitter.com/dan_abramov/status/1047583342072406022?ref_src=twsrc%5Etfw">October 3, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Proxy Implementation

Want to configure your own proxy? Create React App 2.0 let’s you do that now!

All you need to do is install the dependency:

```bash
npm install http-proxy-middleware
```

And then create a file called `src/setupProxy.js`. Once you import that dependency, you are ready to go! It’s that easy to get it started!

## Use packages written for latest Node versions

Use any Node version package and with the help of Babel 7 and Webpack 4, it won’t break the build. You will not need to do any addition configuration and will feel confident that it’s being bundled correctly.

## A Smaller CSS Bundle

Chances are you are going to be pointing your project towards modern browsers. If you decide to only target those, maybe a smaller CSS bundle would be beneficial for your project and you could experience faster load times by making fewer requests.

Avoid targeting the following:

`-webkit`
`-ms`

in your CSS and that will help in keeping those bundled. Instead point the browsers to the `package.json`.

## Service Workers

Service workers are now opt-in and are built using [Google’s Workbox](https://developers.google.com/web/tools/workbox/). Workbox is a JavaScript library that gives offline support to your project. It can help with your project’s performance and resilience by caching assets such as: 

* Fonts
* Images
* JavaScript
* CSS
* Other files

## The Addition of TypeScript

[TypeScript](http://www.typescriptlang.org/), an Object-oriented programming language, can be beneficial to use versus JavaScript. Some strong benefits of using TypeScript are:

* It can help find errors more efficiently.
* Checks for "types" being correct.
* Same syntax as JavaScript, so easy to start with.

When starting your React project with `create-react-app`, simply add to the bash command:

```bash
--typescript
```

to add TypeScript to your project.

### Add TypeScript To Create React App Project

There are two ways to get TypeScript active in your project.

Add it into an already existing project:

```bash
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
```

or add it in at the beginning of a new project:

```bash
npx create-react-app name-of-app --typescript
```

Files that end in `.js` change to `.tsx` and you are good to go.

`src/index.js` --> `src/index.tsx`

If you add TypeScript to an already existing project, be sure to restart your development server to get the new changes going. You can find the documentation on this new [TypeScript addition here](https://facebook.github.io/create-react-app/docs/adding-typescript).

## Moving Forward with Create React App 2.0

With React’s new Create React App 2.0 being released, the next thought is, “Should I update all my past projects to 2.0?”. Unless it’s broken, just leave it as is. But in the future, when using the command `create-react-app` to start your project, you’ll know you have so many new features to help you build an amazing project.

To find out which version of Create React App you are using in a particular project, head on over to your `package.json` and find this line telling you which version you are currently utilizing:

```json
"react-scripts": "2.0.3"
```

This is also the place where you would update to 2.0 if desired.

Happy coding!

<include src="asides/AboutAuth0" />


Create React App 2.0: What's New?

akash-joshi

I'm a Software Engineer by profession and also an author at Flexiple (www.flexiple.com) and Remote.tools (https://remote.tools). I love exploring the React ecosystem in my apps and articles.

Guest Author

Akash Joshi

Learn how to build a Wikipedia App with React Hooks and secure it with Auth0

Building a Wikipedia App Using React Hooks and Auth0

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Learn about the new features in React 16.3. New Lifecycles, Context, Strict Mode, createRef, and forwardRef




[ReactJS 16 shipped with a lot of new features](https://auth0.com/blog/whats-new-in-react16). Since then, even more features have been introduced to the library.

_React 16.3_ ships with a few major changes that I'll like to highlight in this article. Let's dive in!


## StrictMode Component

JavaScript developers are very familiar with the `strict` keyword. This keyword keeps you in check while developing your apps and raises an alarm during development to let you know about potential problems in your codebase.

_React 16.3_ ships with a `StrictMode` component that highlights potential problems in your ReactJS codebase.

This component runs a check in development mode to determine if there are issues with the descendant components such as using an unsafe lifecycle method, legacy ref API, etc.

```js
import React from 'react';

function WokeAlarm() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <SetAlarm />
          <RingAlarm />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}
```

## New Lifecycle Methods

_React 16.3_ ships with new lifecycle methods such as `getDerivedStateFromProps`, and `getSnapshotBeforeUpdate`.

The current lifecycle methods `componentWillMount`, `componentWillReceiveProps`, and `componentWillUpdate` will be deprecated in a future ReactJS 16.x release because they have been known to be problematic and behave in unintended ways. These methods will continue to be available for use in the next major release, _React 17_.

* **getDerivedStateFromProps** can be used instead of `componentWillReceiveProps`.
* **componentDidMount** can be used instead of **componentWillMount**.
* **componentDidUpdate** can be used instead of **componentWillUpdate**.

The new `getDerivedStateFromProps` method is static and will be called on the initial mounting of the component and also when the component is re-rendered.

<include src="TweetQuote" quoteText="The new getDerivedStateFromProps method is static and will be called on the initial mounting of the component."/>

```js
class Speaker extends Component {
  static getDerivedStateFromProps() {
    if (nextProps.value !== prevState.value) {
      return ({ value: nextProps.value });
    }
  }
}
```

The new `getSnapshotBeforeUpdate` method is called before any DOM mutations happen. It's great to perform any sort of calculations needed for your component here and then pass it to `componentDidUpdate` as the third argument like so:

<include src="TweetQuote" quoteText="The new getSnapshotBeforeUpdate method is called before any DOM mutations happen."/>

```js
...
getSnapShotBeforeUpdate(prevProps, prevState) {
  return prevProps.list.length < this.props.list.length ? this.listRef.scrollHeight : null;
}

componentDidUpdate(prevProps, prevState, snapshot) {
  if (snapshot !== null) {
    const listRef = this.listRef;
    listRef.scrollTop += listRef.scrollHeight - snapshot;
  }
}
...
```

## forwardRef

**Refs** provide a way to access ReactJS elements or DOM nodes created in the render method. They are great for getting values from input elements, working with third-party DOM libraries, et al. However, there were some challenges with **refs** regarding component encapsulation.

`forwardRef` automatically passes a `ref` received by a parent component to its children. It's great for reusable components in component libraries. As the name implies, the component is forwarding the `ref` to its child.

Check out the example below:

```js
import React, { Component } from 'react';

const LoginButton = React.forwardRef((props, ref) => (
  <button ref={ref} class="Login"> {props.children} </button>
));


class Display extends Component {
  myRef = React.createRef();

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return (
      <div className="container">
        <LoginButton ref={this.myRef}> Get In! </LoginButton>
      </div>
    )
  }
}
```

The use of `forwardRef` is more valuable in Higher Order Components. The [ReactJS blog](https://reactjs.org/docs/forwarding-refs.html) has the perfect example of this scenario.

## createRef

Previously, ReactJS developers had two ways of using refs: You either made use of the callback API or the legacy string ref API.

With _React 16.3_, you can make use of the `createRef` API for managing refs without any negative implications. It's simpler and developer friendly too. Check out the example below:

_without createRef API_

```js
class SpeakerComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <input type="text" ref={(input) => {
      this.inputRef = input;
    }} />;
  }
}
```

_with createRef API_

```js
class SpeakerComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}
```

## Context API

The `Context` API has been available for a while but in experimental mode. _React 16.3_ ships with an ergonomic Context API that supports static type checking and deep updates. This API solves the challenge most developers experience which is the complexity of passing data from child to parent and back and make them quickly reach out for [Redux](https://redux.js.org).

Check out this example below:

```js
import React, { Component } from 'react';

const Dog = (props) => (
  <div>
    <Animal name={props.name} />
  </div>
);

}
class Animal extends Component {
  render() {
    return (
      <div>
        <p> Hey, I'm a {this.props.name} </p>
      </div>
    )
  }
}


class App extends Component {
  state = {
    name: 'Casanova',
    food: 'bone',
  }

  render() {
    return (
      <div>
        <Dog name={this.state.name} />
      </div>
    )
  }
}

export default App;
```

This is a simple example, but the way we pass data from component to component with the use of props is not developer friendly and could get out of hand very quickly! At this point, most developers quickly reach out for a data store or state management library to manage this process efficiently. However, the new Context API in _React 16.3_ can be used to eliminate this challenge.

With this new API, we'll need a **Provider** and a **Consumer**. The data will live in the **Provider** while the **Consumer** represents where the data needs to be accessed.

```js
import React, { Component } from 'react';

// create a new context
const MyContext = React.createContext();

// create a provider component
class MyProvider extents Component {
  state = {
    name: 'Casanova',
    food: 'bone'
  }

  render() {
    return (
      
      <MyContext.Provider value={{ state: this.state }}>
        { this.props.children }
      </MyContext.Provider>
      
    )
  }
}

const Dog = (props) => (
  <div>
    <Animal />
  </div>
);

class Animal extends Component {
  render() {
    return (
      <div>
        <MyContext.Consumer>
          {(context) => (
            <React.Fragment>
              <h3> Food: { context.state.food } </h3>
              <h3> Name: { context.state.name } </h3>
            </React.Fragment>
          )}
        </MyContext.Consumer>
      </div>
    )
  }
}

class App extends Component {
  render() {
    return (
      <MyProvider>
        <div>
          <Dog />
        </div>
      </MyProvider>
    )
  }
}

export default App;
```

In the code above, there is a provider, `<MyProvider />`, that houses the state and renders a Context provider.

The Context provider provides the ability to render children components as evident in the `<App />` component. We simply called the consumer, `<MyContext.Consumer />`, in the Animal component to render the data we needed. This is more organized, and avoids the case of _props drilling hell_!

<include src="asides/React" />

## Conclusion

_React 16_ has been on a roller-coaster. And it's amazing how ReactJS is becoming more of a way of life than a library, in my opinion.

Have you upgraded to _React 16.3_ yet? What are your thoughts? Let me know in the comments section! 😊


React 16.3: What’s New?

Learn what's coming to ReactJS. Get a sneak peek of the powerful features that will grace ReactJS soon.



---

**TL;DR:** [ReactJS](https://reactjs.org) is a UI library that's a very powerful tool amongst frontend developers in building JavaScript applications. In this article, I'll introduce you to a few features coming to ReactJS.

---

ReactJS is a JavaScript library, built and maintained by Facebook. As of today, it powers so many popular web and mobile platforms such as Twitter, Airbnb, Lyft, Dropbox, Pinterest, Whatsapp and Instagram. The latest release of ReactJS which is _React 16_ ships with a lot of features such as `Error Boundaries`, `Custom DOM Attributes definition`, `Fragments as return types`, `Portals` and many others.

However, the ReactJS team is not slacking. They are hard at work looking for new ways to make React a highly performant library in UI component development. A sneak peek into new features coming to React was demoed by the _creator of Redux_ and _React core team member_, [Dan Abramov](https://twitter.com/dan_abramov) at **JSConf Iceland, 2018.** If you haven't watched Dan's talk, here is the [demo](https://www.facebook.com/react/videos/1552821821462886/).

## What's coming to ReactJS?

Making it easier for developers to build great user experiences using ReactJS has always been the goal of the ReactJS team. Building for great user experiences involves splitting the attention of developers into two distinct categories:

* **Computing Power**
* **Network Speed**

With these categories spelt out, you start asking the following questions:

- Are the users on a slow network? If so, how's the user experience? Can we (developers) control the loading states?
- Are the users on a low-end device (devices with low CPU power)? If so, is using the app still a memorable experience effectively?
- Are the users on a fast network? If so, is the experience seamless? No janky UI.
- Are the users on a high-end device (devices with high CPU power)? If so, is the rendering flawless?

These are valid questions that need answers. Let's explore how **Time Slicing** and **Suspense** in ReactJS can help deliver the best user experience for everyone.

## Time Slicing

In Dan's talk, he said: _"We’ve built a generic way to ensure that high-priority updates like user input don’t get blocked by rendering low-priority updates"_. What does this mean? The ReactJS team named this concept **Time Slicing**. Let me explain in simpler terms.

<include src="TweetQuote" quoteText="Dan Abramov: We’ve built a generic way to ensure that high-priority updates like user input don’t get blocked by rendering low-priority updates."/>

ReactJS is concerned about a device's CPU power. While rendering, ReactJS ensures that it doesn't block the thread thus causing the app to freeze.

**Time-slicing** allows ReactJS, which now runs on _React Fiber_, to split computations of updates on children components into chunks during idle callbacks and rendering work is spread out over multiple frames. Now, during the process of asynchronous rendering, it ensures that if a user's device is very fast, updates within the app feel synchronous and if a user's device is slow, the app feels responsive. No freezing, No janky UI experience!

## Suspense

In Dan's talk, he said: "We have built a generic way for components to suspend rendering while they load asynchronous data".

The simple definition of the **suspense** feature is that ReactJS can pause any state update until the data been fetched is ready to be rendered. In essence, ReactJS suspends the component tree while waiting for the data to be fetched completely. During the suspension, it goes ahead to handle other high-priority updates.

<include src="TweetQuote" quoteText="Dan Abramov: We have built a generic way for components to suspend rendering while they load asynchronous data."/>

[Andrew Clark](https://twitter.com/acdlite), (author of the suspense feature), gave a practical breakdown of how the suspense feature works in the tweets below:

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Here&#39;s how suspending works:<br><br>- in the render method, read a value from the cache.<br>- if the value is already cached, the render continues like normal<br>- if the value is not already cached, the cache *throws a promise*<br>- when the promise resolves, React retries where it left off</p>&mdash; Andrew Clark (@acdlite) <a href="https://twitter.com/acdlite/status/969171217356746752?ref_src=twsrc%5Etfw">March 1, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Dan used an API from `Future React` called `createFetcher` (_this name is likely to change_) in his demo to demonstrate how the **suspense** feature works. The `createFetcher` function is a basic cache system that allows React to suspend the data fetching request from within the render method. According to Andrew Clark, it's called the [simple-cache-provider](https://github.com/facebook/react/tree/master/packages/simple-cache-provider).

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">createFetcher from <a href="https://twitter.com/dan_abramov?ref_src=twsrc%5Etfw">@dan_abramov</a>&#39;s talk is this thing:<br><br>We&#39;re calling it simple-cache-provider (for now). It&#39;s a basic cache that works for 80% of use cases, and (when it&#39;s done) will serve as a reference implementation for Apollo, Relay, etc.<a href="https://t.co/elI6YFco0A">https://t.co/elI6YFco0A</a></p>&mdash; Andrew Clark (@acdlite) <a href="https://twitter.com/acdlite/status/969168681644179456?ref_src=twsrc%5Etfw">March 1, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

I'll borrow a practical example from the [React Apollo's team initial implementation](https://dev-blog.apollodata.com/a-first-look-at-async-react-apollo-10a82907b48e) to show you how suspense works. The React Apollo team imitated the **suspense** feature by suspending the result of a GraphQL query.

``` jsx  

const MOVIE_QUERY = gql`
  query GetMovie($id: Int!) {
    movie(id: $id) {
      id
      title
      overview
      poster_path
    }
  }
`;
function MovieInfo({ movie, clearActiveResult }) {
  return (
    <Query asyncMode query={MOVIE_QUERY} variables={{ id: movie.id }}>
      {({ data: { movie } }) => (
        <Fragment>
          <FullPoster movie={movie} />
          <h2>{movie.title}</h2>
          <div>{movie.overview}</div>
        </Fragment>
      )}
    </Query>
  );
}

```
_GraphQL query_

In the example above, there is an `asyncMode` prop attached to the `Query component` that allows for async rendering. The sample code below shows the render method in the `Query` component.

``` jsx  
....
if (loading) {
    if(this.props.asyncMode) {
        throw this.state.queryObservable!.result();
    }
}
Object.assign(data.data, this.previousData, currentResult.data);
```
_Query component render method_


If the `async` mode is turned on, rendering is suspended till data is fetched. In the example above, it throws a promise in async mode. During the suspension, a developer can now effectively control the loading states via using a component with a prop that has a time limit attached to it as shown below or through the `loading` API method from the `createFetcher`.

``` jsx  
<Placeholder
    delayMs={1000}
    fallback={<Loadingsize="medium" color="blue" />}
```

**Note:** Dan Abramov mentioned that there is the concept of a loading API from the `simple-cache-provider`. It might land as a `Loading` component or the name might change in upcoming ReactJS releases.

> In React, if a component suspends, we keep rendering the siblings as deeply as we can. Suspend means "don't commit," not "don't reconcile." - **Andrew Clark**

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Did You Know™<br><br>React Suspense doesn&#39;t necessarily rely on async rendering. It works in sync mode, too. But the downside is that those &lt;Placeholder /&gt; components are immediately triggered, without any delay.<br><br>Those `delayMs` props illustrate why async rendering is so good for UX.</p>&mdash; Andrew Clark (@acdlite) <a href="https://twitter.com/acdlite/status/969318507966906368?ref_src=twsrc%5Etfw">March 1, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Did You Know™<br><br>You can suspend from inside of getDerivedStateFromProps. It “just works” because it’s part of React’s render phase.<br><br>You can also suspend inside a setState reducer (first argument).</p>&mdash; Andrew Clark (@acdlite) <a href="https://twitter.com/acdlite/status/969428655238557697?ref_src=twsrc%5Etfw">March 2, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



Another use case is `Code splitting`. Code splitting is a concept used in improving performance by loading only the code a particular page needs in an application. `Code splitting` works well with the `suspense` feature.

``` js  
import { createFetcher } from 'React';

// dynamic imports
const moviePageFetcher = createFetcher(
    () => import('./MoviePage')
);

// get the MoviePage component
const moviePage = moviePageFetcher.read().default;

...
```

The code above loads the MoviePage component only when it is needed while taking advantage of the **suspense** feature via the `createFetcher` method.

<include src="asides/React" />

## Conclusion

I'm overwhelmed by the engagement of React core team members with members of the JavaScript community in landing new features in React. Worthy of note is that the APIs mentioned in this article are experimental. This is an introduction to the features that are expected to land in React soon. I'm anxious. I can't wait for these APIs to be stable.

I'll be sure to cover these features in detail and any improvements made to them when they finally land in ReactJS.

What are your thoughts on these features? Let me know in the comments section! 😊


Beyond React 16: Time Slicing and Suspense API

ReactJS 16 brings major changes to the popular JavaScript library for building user interfaces. Learn what's new in ReactJS!



---

**TL;DR:** ReactJS is a UI library that has gained massive adoption by developers and organizations around the world because of its efficient and reactive model. In this article, we'll highlight notable additions to ReactJS 16 and dabble into the architecture it runs on.

---

ReactJS is a JavaScript library, built and maintained by Facebook. At the time of writing, ReactJS has over 78,000 stars on [GitHub](https://github.com/facebook/react). And many web platforms such as _Twitter_, _Airbnb_, _Lyft_, _Dropbox_, _Pinterest_, _Whatsapp_ and _Instagram_ use ReactJS to build their user interfaces. The ReactJS developer community is very robust. In fact, the community is so robust that when Facebook decided to implement the [BSD+ Patents license](https://code.facebook.com/posts/112130496157735/explaining-react-s-license/), there was a public outcry from the community. The complaints from developers were on every other blog and forum as well as at meetups and conferences. Developers and software shops around the world are pretty excited and relieved that ReactJS has been re-licensed under the **MIT** license.

ReactJS 16 was announced to the world on September 26, 2017. Facebook has been working on releasing this new version for a while now. It's great that there is a new release, but ReactJS 16 is a very special release. What's exciting about this new ReactJS release is the fact that it was entirely rewritten from scratch while ensuring that the public API remains unchanged. This major release brings a lot of new features, deprecations, and changes.

## ReactJS API-Compatible Rewrite - Why?

Questions have been flying around as to why Facebook decided to rewrite the internals of ReactJS while keeping the public API essentially unchanged. Facebook has been working on **React Fiber**, which is a reimplementation of ReactJS's core algorithm for about two years now. The goal of _React Fiber_ is to enable **incremental rendering**—the ability to split rendering work into chunks and spread it out over multiple frames. In addition, the ability to pause, abort, or reuse work as new updates come in and the ability to assign priority to different types of updates. There are many reasons as to why it was rewritten but I'll highlight a few reasons.

<include src="TweetQuote" quoteText="The goal of React Fiber is to enable incremental rendering."/>

1. ReactJS needed a way to support asynchronous rendering. The current architecture couldn't have handled this addition so it needed to be re-designed from the ground up.

2. Support for graceful and efficient error handling using error boundaries in ReactJS. It was difficult to add this frequently-demanded feature to the previously existing ReactJS architecture, so it needed to be re-designed from the ground up.

3. The need for a new foundation that is immensely extensible and powerful enough to accommodate new idea implementation going forward. Furthermore, the support for longstanding features such as having fragments, returning text from _render_, unification of the scheduling of different subtrees and simple, non-complex ways to write custom renderers for ReactJS.

## React Fiber

Let's talk a bit about **React Fiber**. As I mentioned earlier, React Fiber has been in development for a while. And there was a website made specially just to track the progress of React Fiber; [isfiberreadyyet.com](http://isfiberreadyyet.com).

_React Fiber_ is a complete, backward compatible rewrite of the ReactJS core which enables sophisticated scheduling of rendering work. It is a reimplementation of ReactJS's core algorithm. The goal of React Fiber is to increase its suitability for app development in sections like gestures, animation, and layouts. One key feature is the support for **incremental rendering**. _Incremental rendering_ is the ability to split the rendering process into chunks and spread it out over multiple frames.

_React Fiber_ is a reimplementation of a stack frame specialized for ReactJS components. Each fiber can be thought of as a virtual stack frame where information from the frame is preserved in memory on the heap, and because the info is saved on the heap, you can control and play with the data structures and process the relevant information as needed.

_React Fiber_ allows smooth rendering of the UI by pausing once in a while and checking for more important updates rather than waiting for all the changes to be propagated throughout the entirety of the component tree before updating the UI. The task scheduling ability of _React Fiber_ makes this possible.

In ReactJS, we have two important players: the **Reconciler** and the **Renderer**. The **Renderer** is a pluggable section of ReactJS that allows rendering of the UI to happen across and outside the DOM. It was originally created for the DOM but was later adapted to support native platforms. ReactJS has the _[ReactJS DOM Renderer](https://github.com/facebook/react/tree/master/packages/react-dom) - renders ReactJS components to the DOM_, _[ReactJS Native Renderer](https://github.com/facebook/react/tree/master/packages/react-native-renderer) - renders ReactJS components to native views_, and the _[ReactJS Test Renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer) - renders ReactJS components to JSON trees_.

The **Reconciler** is used by the renderer to perform updates to the DOM. Whenever a component updates, be it _mounting_, _unmounting_ or any form of update, the reconciler (_known as the stack reconciler_) processes the component tree from top to bottom synchronously in a single pass, checks for changes in the tree, then passes on these changes to the renderer. In previous versions of ReactJS, the reconciler did not have the ability to pause work, thus making performance suboptimal when deep updates occur and the CPU time is limited.

<include src="TweetQuote" quoteText=" In ReactJS, we have two important players: the Reconciler and the Renderer."/>

With React Fiber, the new reconciler has the ability to do the following:

* Split interruptible work into chunks.
* Pause work and come back to it later.
* Reuse previously completed work.
* And abort work.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">The Fiber Triangle demo now lets you toggle time-slicing on and off. Makes it much easier to see the effect. Thanks <a href="https://twitter.com/giamir?ref_src=twsrc%5Etfw">@giamir</a> for the PR! 🎉 <a href="https://t.co/qhsWUIyXPf">pic.twitter.com/qhsWUIyXPf</a></p>&mdash; Andrew Clark (@acdlite) <a href="https://twitter.com/acdlite/status/846456239693344769?ref_src=twsrc%5Etfw">March 27, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

> **Note:** Work is the result of an update. Updates are computations performed during the traversal of the component trees.

Check out more information on [Reconciliation](https://reactjs.org/docs/reconciliation.html) and the [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture).

## ReactJS 16 Features

Apart from the fact that ReactJS 16 runs on the new engine, _React Fiber_, ReactJS 16 ships with some new features.

* **Error handling using Error boundaries**: In ReactJS 16, the error handling has been greatly improved. Before now, ReactJS applications broke whenever a runtime error occurred and required a page refresh to recover from the broken state. The component is unmounted each time any error throw in the constructor, render method and lifecycle methods. In ReactJS 16, error boundaries have been introduced to capture errors and display a fallback UI instead of unmounting the component every time. **Error boundaries** are simply ReactJS components that catch JavaScript errors anywhere in a component and child trees, log those errors and display a fallback UI. It is important to know that error boundaries catch errors thrown in the constructor, render and lifecycle methods. The new lifecycle hook method that makes a class component an error boundary is `componentDidCatch(error, info)`. This method works like a try/catch block for components. Create an error boundary component once and call it everywhere it's needed in your application.

    ```js
    class ErrorBoundary extends React.Component {
      constructor(props) {
        super(props);
        this.state = { hasError: false };
      }

      componentDidCatch(error, info) {
        // Display fallback UI
        this.setState({ hasError: true });
        // You can also log the error to an error reporting service
        logErrorToMyService(error, info);
      }

      render() {
        if (this.state.hasError) {
          // You can render any custom fallback UI
          return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
      }
    }
    ```

* **Support for Defining Custom DOM Attributes**: Before now, if you used a custom DOM attribute, ReactJS would skip it. In ReactJS 16, unknown attributes will be passed onto the DOM. A typical example is shown below:

    ```
    <div alien="skullIsland" />

    // will be displayed in ReactJS 15 as:
    <div />
    ```

    ```js
    <div alien="skullIsland" />

    // will be displayed in ReactJS 16 as:
    <div alien="skullIsland" />
    ```

**Note:** Using the canonical ReactJS naming for known attributes still remain the same.

* **Fragments and Strings as new render return types**: In ReactJS 16, you can now return an array of multiple elements from a component's render method.

    ```js
    render() {
      // No need to wrap items in an extra element!
      return [
        // Don't forget the keys :)
        <p key="first">ReactJS</li>,
        <span key="second">PreactJS</li>,
        <span> key="third">VueJS</li>
      ];
    }
    ```
    _Returning arrays_

    ```js
    render() {
      return 'Boss, I just returned a string. Can you believe it? ReactJS 16  is dope!';
    }
    ```
    _Returning a string_

* **Portals**: This is a concept allows you to render children into a DOM node that exists outside of the hierarchy of the parent component. In layman terms, it simply means a child can be inserted into a different location in the DOM via Portals. For example, your app has a section component with a paragraph element as its child. Portals can be used to make the paragraph child element break out of its container.

    ```js
      ReactDOM.createPortal(child, container);
    ```
    _Render the child into the container DOM node_

    ```js
    render() {
      return ReactDOM.createPortal(
        this.props.children,
        domNode,
      );
    }
    ```
    _A typical example_

* **Improved server-side rendering**: The server renderer was completely rewritten in ReactJS 16 to be very fast. In addition, server-side rendering in ReactJS 16 is about three times faster than ReactJS 15 because the server renderer supports _streaming_. This makes sending of data from the server to the client faster than usual. In ReactJS 16, there are two different methods for rendering on the client side, `render()` and `hydrate()`. `render()` as we already know for rendering content solely on the client side, `hydrate()` for rendering on top of server-side rendered markup. Furthermore, ReactJS 16 is better at hydrating server-rendered HTML once it reaches the client. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible.

<include src="TweetQuote" quoteText="In ReactJS 16, there are two different methods for rendering on the client side, render() and hydrate()."/>

    ```js
      import { hydrate } from "react-dom"
      import Profile from "./Profile"
      hydrate(<Profile />, document.getElementById("profile-container"));
    ```

> **Note:** `render()` can still be used to render on top of server-side rendered markup, but it's recommended to use `hydrate()` now for that type of rendering in ReactJS 16.


![ReactJS 16 vs ReactJS 15 server-side rendering](https://images.ctfassets.net/23aumh6u8s0i/7AbShTl9bxeoh6Kt57t6B1/31269d1949279d631e7a136f2583d656/1_E5Pmh6HSeybcF7C686B9pA)
_Source: hackernoon.com_

ReactJS 16 does not support error boundaries and portals in server-side rendering.

For more information, check out this [excellent article on server-side rendering in ReactJS 16.](https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67)

## ReactJS 16 Deprecations and Breaking Changes

There a few deprecations and a number of breaking changes in ReactJS 16.

* Discontinued support for React Add-ons.
* Calling `setState` with null no longer triggers an update.
* Calling `setState` directly inside the `render()` method always causes an update.
* `setState` callbacks now fire immediately after `componentDidMount` or `componentDidUpdate`.
* The `componentDidUpdate` lifecycle no longer accepts the `prevContext` parameter.
* `ReactDOM.render()` and `ReactDOM.unstable_renderIntoContainer()` now return `null` if called from inside a lifecycle method.
* Previously, changing the ref to a component would always detach the ref before that component's render was called. Now, we change the ref later, when applying the changes to the DOM.
* As I mentioned earlier, hydrating a server-rendered container now has an explicit API. Use `ReactDOM.hydrate` instead of `ReactDOM.render` if you're reviving server rendered HTML. Keep using `ReactDOM.render` if you're just doing the client-side rendering.

For more information, check out the full list of [deprecations and breaking changes on GitHub](https://github.com/facebook/react/releases/tag/v16.0.0).

There has been a lot of performance observation and testing done by apps that have made the upgrade to ReactJS 16. And so far, there have been a lot of cheer and positive feedback for ReactJS 16. In fact, Twitter Lite already uses ReactJS 16.

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Twitter Lite is now on React v16. We&#39;ve seen from 5 to 32% increase in performance on React components. 🎉👏</p>&mdash; Paul Armstrong (@paularmstrong) <a href="https://twitter.com/paularmstrong/status/920700461388361728?ref_src=twsrc%5Etfw">October 18, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

The Twitter Lite engineering team discovered that the app's bundle size reduced a little and there were very clear improvements on large trees.

<include src="asides/React" />

## Conclusion

ReactJS is an awesome front-end library to employ in building your user interfaces. It is faster now because it runs on _React Fiber_ and allows you to build more performant, smoothe UIs for your web and native applications.

**ReactJS 16** came loaded with lots of new features and significant improvements. Kudos to the ReactJS team and the JavaScript open source community for all their efforts in making ReactJS a better tool.

Have you switched to ReactJS 16 yet? What are your thoughts? Let me know in the comments section! 😊


React 16 Release: What’s New?

yomi-eluwande

Yomi Eluwande

Learn how to integrate React, Pusher, and Auth0 to create realtime applications.

Build a Chat App with React, Auth0 and Pusher

df6c864847fba9687d962cb80b482764?size=200 avatar

df6c864847fba9687d962cb80b482764?size=200

Martin Gontovnikas, a.k.a Gonto, is a software engineer at heart who moved to the ‘dark side’ and became VP of Marketing at Auth0. He considers himself lucky to have found a way to combine his two passions and apply his engineering thinking model to marketing.<br/><br/> Gonto’s analytical thinking is a huge driver of his data-driven approach to marketing strategy and experimental design. He is based in the Bay area, and in his spare time, can be found eating gourmet food at the best new restaurants, visiting every local brewery he can find, or traveling the globe in search of new experiences.

Former SVP of Marketing and Growth at Auth0

Martin Gontovnikas

ReactJS authentication gets easy if you understand just a few basic concepts. Because, let’s face it. React is the new cool kid on the block.

---

**TL;DR**: You can check out a React Flux app with authentication implemented in [this Github repository](https://github.com/auth0/react-flux-jwt-authentication-sample)

---

Let’s face it. [React](https://facebook.github.io/react/) is the new cool kid on the block. Everybody is working on creating React components because it entails understanding just 2 basic concepts:

* A component is just a function
* Single-direction data flow

However, once you start creating a bigger app, you realize that just using React isn’t enough. So you start looking at [Flux](https://facebook.github.io/flux/), which is the architecture Facebook uses to create React apps.

As we learned in a previous blog post, learning how to conduct authentication in a Single Page App can get super complex. We had to learn about tokens, [JWTs](http://jwt.io/) and how to integrate them with SPAs. Learning how to do it with Flux is even harder! That’s why in this blogpost we’ll learn how to add authentication to a React Flux app.

<include src="TweetQuote" quoteText="Learning how to conduct authentication in a Single Page App can get super complex"/>


![ReactJS Authentication](https://images.ctfassets.net/23aumh6u8s0i/2wZ0usYMDTF9nwlvuclsEW/d94606742748ea6a79fd4a5edaafd3d9/pub_w_959_h_638)



## Before we start

We’ll be coding our React app using ES6 thanks to [Browserify](http://browserify.org/) and [Babelify](https://github.com/babel/babelify), and we’ll be using npm for build tools and installing dependencies. If you want to start a project with the same architecture, just clone [this seed project](https://github.com/auth0/react-browserify-spa-seed).

## Coding ReactJS Authentication!

### Login page
#### The Login component
![Login Component](https://images.ctfassets.net/23aumh6u8s0i/4xDmop13K9QA8T1pPmvsTa/01ef0dbe2f7d9f1d29fe6b0e8aee2ae2/pub_w_959_h_638)

First, let’s create our `Login` component. Its main function is rendering an input for the username and password and calling the `AuthService` when the user clicks on the login button.

```jsx
// ... imports
export default class Login extends React.Component {

  constructor() {
    this.state = {
      user: ‘’,
      password: ‘’
    };
  }

  // This will be called when the user clicks on the login button
  login(e) {
    e.preventDefault();
    // Here, we call an external AuthService. We’ll create it in the next step
    Auth.login(this.state.user, this.state.password)
      .catch(function(err) {
        console.log(“Error logging in”, err);
      });
  }

  render() {
    return (
        <form role=“form”>
        <div className=“form-group”>
          <input type=“text” valueLink={this.linkState(‘user’)}placeholder=“Username” />
          <input type=“password” valueLink={this.linkState(‘password’)} placeholder=“Password” />
        </div>
        <button type=“submit” onClick={this.login.bind(this)}>Submit</button>
      </form>
    </div>
    );
  }
}

// We’re using the mixin `LinkStateMixin` to have two-way databinding between our component and the HTML.
reactMixin(Login.prototype, React.addons.LinkedStateMixin);
```

#### The AuthService & the LoginAction
![AuthService role in ReactJS Authentication](https://images.ctfassets.net/23aumh6u8s0i/6EBkPQa2IwjXwFTF5R23mh/b9662da8029b599927e50e5ab24d2c35/pub_w_959_h_638)

Our AuthService is in charge of calling our [login API](https://github.com/auth0/nodejs-jwt-authentication-sample/blob/master/user-routes.js#L37-L54). The server will validate the username and password and return a token [(JWT)](http://jwt.io/) back to our app. Once we get it, we’ll create a [LoginAction](https://facebook.github.io/flux/docs/todo-list.html#creating-semantic-actions) and send it to all the [Stores](https://facebook.github.io/flux/docs/todo-list.html#creating-stores) using the [Dispatcher](https://facebook.github.io/flux/docs/todo-list.html#creating-a-dispatcher) from Flux.

```jsx
// AuthService.js
// ... imports
class AuthService {

  login(username, password) {
    // We call the server to log the user in.
    return when(request({
      url: ‘http://localhost:3001/sessions/create',
      method: ‘POST’,
      crossOrigin: true,
      type: ‘json’,
      data: {
        username, password
      }
    }))
    .then(function(response) {
        // We get a JWT back.
        let jwt = response.id_token;
        // We trigger the LoginAction with that JWT.
        LoginActions.loginUser(jwt);
        return true;
    });
  }
}

export default new AuthService()
```

```js
// LoginAction.js
// ... imports
export default {
  loginUser: (jwt) => {
    // Go to the Home page once the user is logged in
    RouterContainer.get().transitionTo(‘/‘);
    // We save the JWT in localStorage to keep the user authenticated. We’ll learn more about this later.
    localStorage.setItem(‘jwt’, jwt);
    // Send the action to all stores through the Dispatcher
    AppDispatcher.dispatch({
      actionType: LOGIN_USER,
      jwt: jwt
    });
  }
}
```

You can take a look at the router configuration [on Github](https://github.com/auth0/react-flux-jwt-authentication-sample/blob/gh-pages/src/app.jsx#L11-L29), but it’s important to note that once the `LoginAction` is triggered, the user is successfully authenticated. Therefore, we need to redirect him or her from the Login page to the Home. That’s why we’re adding the URL transition in here.

#### The LoginStore
![Dispatcher and LoginStore](https://images.ctfassets.net/23aumh6u8s0i/4M3F4udz68HaJ3KayBDnrm/29757c3eaeacfeabff12f9dcbc7b63fb/pub_w_959_h_638)

The LoginStore, like any other store, has 2 functions:

* It holds the data it gets from the actions. In our case, that data will be used by all components that need to display the user information.
* It inherits from `EventEmmiter`. It’ll emit a change event every time its data changes so that Components can be rendered again.

```jsx
// ... imports
class LoginStore extends BaseStore {

  constructor() {
    // First we register to the Dispatcher to listen for actions.
    this.dispatchToken = AppDispatcher.register(this._registerToActions.bind(this));
    this._user = null;
    this._jwt = null;
  }

  _registerToActions(action) {
    switch(action.actionType) {
      case USER_LOGGED_IN:
        // We get the JWT from the action and save it locally.
        this._jwt = action.jwt;
        // Then we decode it to get the user information.
        this._user = jwt_decode(this._jwt);
        // And we emit a change to all components that are listening.
        // This method is implemented in the `BaseStore`.
        this.emitChange();
        break;
      default:
        break;
    };
  }

  // Just getters for the properties it got from the action.
  get user() {
    return this._user;
  }

  get jwt() {
    return this._jwt;
  }

  isLoggedIn() {
    return !!this._user;
  }
}
export default new LoginStore();
```

> You can take a look at the `BaseStore` [in Github](https://github.com/auth0/react-flux-jwt-authentication-sample/blob/gh-pages/src/stores/BaseStore.js). It includes some utility methods that all stores will have.

### Displaying the user information
#### Creating an Authenticated component
![AuthenticatedComponent](https://images.ctfassets.net/23aumh6u8s0i/5PC7e8aeAH1I1HC3cl4aL0/745651ca250dec79c659d410f5034b47/pub_w_959_h_638)

Now, we can start creating components that require authentication. For that, we’ll create a wrapper (or decorator) component called `AuthenticatedComponent`. It’ll make sure the user is authenticated before displaying its content. If the user isn’t authenticated, it’ll redirect him or her to the Login page. Otherwise, it’ll send the user information to the component it’s wrapping:

```jsx
// ... imports
export default (ComposedComponent) => {
  return class AuthenticatedComponent extends React.Component {

    static willTransitionTo(transition) {
      // This method is called before transitioning to this component. If the user is not logged in, we’ll send him or her to the Login page.
      if (!LoginStore.isLoggedIn()) {
        transition.redirect(‘/login’);
      }
    }

    constructor() {
      this.state = this._getLoginState();
    }

    _getLoginState() {
      return {
        userLoggedIn: LoginStore.isLoggedIn(),
        user: LoginStore.user,
        jwt: LoginStore.jwt
      };
    }

    // Here, we’re subscribing to changes in the LoginStore we created before. Remember that the LoginStore is an EventEmmiter.
    componentDidMount() {
      LoginStore.addChangeListener(this._onChange.bind(this));
    }

    // After any change, we update the component’s state so that it’s rendered again.
    _onChange() {
      this.setState(this._getLoginState());
    }

    componentWillUnmount() {
        LoginStore.removeChangeListener(this._onChange.bind(this));
    }

    render() {
      return (
      <ComposedComponent
        {...this.props}
        user={this.state.user}
        jwt={this.state.jwt}
        userLoggedIn={this.state.userLoggedIn} />
      );
    }
  }
};
```

An interesting pattern is used here.
First, take a look at what we’re exporting. We’re exporting a function that receives a Component as a parameter and then returns a new Component that wraps the one that was sent as an argument.
Next, take a look at the `render` method. There, we’re rendering the Component we received as a parameter. Besides the `props` it should receive, we’re also sending it all the user information so it can use those properties.
Now, let’s create the Home component which will be wrapped by the `AuthenticatedComponent` we’ve just created.

#### Home Page
![Home](https://images.ctfassets.net/23aumh6u8s0i/7nmYef6fXqFBR6O7rMiurQ/78375a59c3a62eec7f8b175c541de511/pub_w_959_h_638)

The `Home` will display user information. As it’s wrapped by the `AuthenticatedComponent`, we can be sure of 2 things:

* Once the `render` method is called on the `Home` component, we know the user is authenticated. Otherwise, the app would have redirected him to the `Login` page.
* We know we’ll have the user information under `props` because we’ve received them from the `AuthenticatedComponent`

```jsx
// ... imports
// We’re wrapping the home with the AuthenticatedComponent
export default AuthenticatedComponent(class Home extends React.Component {
  render() {
     // Here, we display the user information
    return (<h1>Hello {this.props.user.username}</h1>);
  }
});
```

### Let’s call an API!

Now, you should be able to call an API. In order to call an API that requires authentication, you must send the JWT we received on Login in the `Authorization` header. Any `AuthenticatedComponent` has access to this JWT so you can do something as follows:

```jsx
// Home.jsx
// It must be on an AuthenticatedComponent
callApi() {
  fetch(‘http://example.com/my-cool-url', {
    method: ‘GET’,
    headers: {
      Authorization: ‘Bearer ‘ + this.props.jwt
    }
  }
```

### Keeping the user authenticated
Now that the user is authenticated, we want to keep him or her authenticated instead of showing the login page every time he refreshes the website.
Due to the fact we’re saving the JWT on `localStorage` after a successful authentication, we can manually trigger the `LoginAction` and everything will work. That’s the beauty of using Flux.

```js
// app.jsx ==> Bootstrap file
let jwt = localStorage.getItem(‘jwt’);
if (jwt) {
  LoginActions.loginUser(jwt);
}
```

<include src="asides/React" />

## Closing remarks

We’ve finished implementing the Login for a React Flux app. If you want to know how to implement a signup or if you want to see the full example at work, you can [grab the code from Github](https://github.com/auth0/react-flux-jwt-authentication-sample).

Happy Hacking! :).

"reactjs"