---
tags: brew-js-react
---

:::info
**We are moving to** https://misonou.github.io/
:::

## Using CRA

If you are creating the app using `create-react-app`, you can use `npm install` and import the core module and then selectively enable extensions by:

npm i brew-js-react      # or
yarn add brew-js-react

Create a new file for app initialization:

import brew from "brew-js-react"
import router from "brew-js/extension/router";

export const app = brew.with(router)(app => {
      /* ... */ 
});

And you are ready to use the features from Brew.js for React!

import { renderView, useAppReady } from "brew-js-react";
import { Home, Foo } from "./views";
import "./init";
import "./styles.css";

export default function App() {
    const ready = useAppReady();
    if (!ready) {
        return null;
    }
    return (
        <div id="app">
            {renderView(Home, Foo)}
        </div>
    );
}

### Compatibility with WebPack 5

When using newer version of WebPack, the following WebPack rule is required:

{
    module: {
        rules: [
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false
                }
            }
        ]
    }
}

Use [`react-app-rewired`](https://www.npmjs.com/package/react-app-rewired) to customize when using `create-react-app`.

### Notes for React 18

One of the dependency `zeta-dom-react` currently has limitations when strict mode is enabled in React 18. See [here](https://hackmd.io/@misonou/zeta-dom-react/%2F6DXEoT9vQ3KV0SRRY6IVjA) for more information.