---
title: 'How to manage state in React apps with useReducer and useContext hooks'
date: '2020-11-06'
slug: 'manage-state-with-usecontext-usereducer-in-react-apps'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://amanhimself.dev/blog/manage-state-with-usecontext-usereducer-in-react-apps/'
---

![cover](https://i.imgur.com/Q0W4kzf.jpg)

Choosing a state management library to manage and handle a global state in a React app can be tricky and time-consuming. A lot depends on the scope of the React app and there are many options available.

With the adaption of React Hooks API, one such option is to use a combination of `useReducer` hook and the Context API. In this post, let's take a look at how to manage global state in a React app using both of them.

## Prerequisites

To take full advantage of this tutorial, or run along with the example, please make sure you following installed/access to in your local development environment.

- Node.js version >= `12.x.x `installed
- have access to one package manager such as `npm` or `yarn`
- `create-react-app` cli installed or use `npx`
- basics of React Hooks

If you are not familiar with React Hooks, I recommend you to go through the [in-depth post on React hooks here](https://amanhimself.dev/blog/react-app-with-localstorage-api-and-hooks).

## State management in React apps with useReducer

There are two types of states to deal with in React apps. The first type is the local state that is used only within a React component. The second type is the global state that can be shared among multiple components within a React application.

With the release of Context API as well as Hooks API, implementing a global state is possible without installing any additional state management library. The `useReducer` hook is a great way to manage complex state objects and state transitions. You may have seen or used `useState` to manage [simple or local state](https://amanhimself.dev/blog/react-app-with-localstorage-api-and-hooks) in React apps.

The `useReducer` hook is different from `useState`. The main advantage it has over `useState` is that covers the use case when there is a need of handling complex data structures or a state object that contains multiple values. It updates the state by accepting a reducer function and an initial state. Then, it returns the actual state and a dispatch function. This dispatch function is used to make changes to the state.

## Create a new React app & installing dependencies

To get started, create a new React project by executing the following command in a terminal window:

```shell
npx create-react-app react-expense-tracker

cd react-expense-tracker
```

To focus on the main topic of this tutorial as well as to give the demo app a nice look and feel, let's use pre-defined components from [Reactstrap](https://reactstrap.github.io/). It provides Bootstrap 4 components that are based on Flexbox and useful to handle the layout of a web app. To get started using Bootstrap in a React app, install the following dependencies:

```shell
yarn add bootstrap@4.5.0 reactstrap@8.5.1 uuid@8.2.0
```

After installing these dependencies, open the React project you created and open the file `index.js`. Add an import statement to include the Bootstrap CSS file.

```js
// after other imports
import 'bootstrap/dist/css/bootstrap.min.css';
```

That's it to set up Bootstrap in the current React app.

## Defining a global state

Start by creating a new file called `GlobalState.js` inside the `src/` directory.

Let's use React's context API to create a Context provider that can is going to share the state across multiple components. You can think of this example as mimicking Redux' philosophy. Import the required statements.

```js
import React, { useReducer, createContext } from 'react';
import { v4 as uuid } from 'uuid';
```

Next, create an empty context for Expense and define an initial state object. This initial state is going to have one expense item present. This also helps to define a schema or data model for all other expense items (_but do note that this for demonstration purpose in context to this post_).

```js
export const ExpenseContext = createContext();

const initialState = {
  expenses: [
    {
      id: uuid(),
      name: 'Buy Milk',
      amount: 10
    }
  ]
};
```

Then define a function called `reducer`. It is going to take two arguments, the current state and action. This reducer's job is to modify or update the state object whenever there is an action taken within the app by the user. One example of an action is a user adding an expense.

For the following example, this `reducer` function is going to have one action type, which is to add the expense. If there are no changes or modifications, this `reducer` function is going to return the current state (_which is the default case_).

```js
const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_EXPENSE':
      return {
        expenses: [...state.expenses, action.payload]
      };
    default:
      return {
        state
      };
  }
};
```

Next, define an `ExpenseContextProvider` that is going to behave like a store (_as a store in [Redux](https://amanhimself.dev/blog/redux-with-react-native-hooks)_).

```js
export const ExpenseContextProvider = props => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <ExpenseContext.Provider value={[state, dispatch]}>
      {props.children}
    </ExpenseContext.Provider>
  );
};
```

The `useReducer` hook allows us to create a reducer using the `reducer` function defined previously. The `initialState` is passed as the second argument.

## Wrap the App with the provider

When the `ExpenseContextProvider` is wrapped around any component in the React app, that component and its children will be able to access the current state as well as modify the state object.

In this section, that's what we are going to do. Open, `App.js` file, and modify it as below.

```js
import React from 'react';
import { Container } from 'reactstrap';

import { ExpenseContextProvider } from './GlobalState';

import Header from './components/Header';
import Form from './components/Form';
import List from './components/List';

export default function App() {
  return (
    <ExpenseContextProvider>
      <Container className="text-center">
        <Header />
        <Form />
        <List />
      </Container>
    </ExpenseContextProvider>
  );
}
```

In the next sections, let us create other components that are children to this `App` component. Create a `components/` directory and then create three new component files:

- `Header.js`
- `Form.js`
- `List.js`

## Add the header of the app

In this section, let us define a presentational component called `Header`. It's going to be a simple jumbotron component from Bootstrap displaying the title of the app and the logo.

Open `Header.js` and add the following snippet:

```js
import React from 'react';
import { Jumbotron } from 'reactstrap';
import Logo from '../logo.svg';

export default function Headers() {
  return (
    <Jumbotron fluid>
      <h3 className="display-6">
        Expense Tracker React App
        <img src={Logo} style={{ width: 50, height: 50 }} alt="react-logo" />
      </h3>
    </Jumbotron>
  );
}
```

## Add a form component

Open `Form.js` file and import the following statements.

```js
import React, { useState, useContext } from 'react';
import {
  Form as BTForm,
  FormGroup,
  Input,
  Label,
  Col,
  Button
} from 'reactstrap';
import { v4 as uuid } from 'uuid';

import { ExpenseContext } from '../GlobalState';
```

The `uuid` module is going to generate a unique id for each expense item in the global state.

Define a `Form` component that is going to access values from `ExpenseContext` using `useContext` hook.

```js
export default function Form() {
  const [state, dispatch] = useContext(ExpenseContext);

  //...
}
```

Using the `useState` reducer, define two state variables that are going to be local to this component. These state variables are going to help us define controlled input fields. A controlled input field accepts its current value as a prop as well as a callback to change that value.

Add the following initial state for `name` and `amount` using `useState`. Both of them are going to have an empty string as their initial value.

```js
const [name, setName] = useState('');
const [amount, setAmount] = useState('');
```

To update their values when a user starts typing, add the following handler methods. Both of these functions are going to retrieve the value from the corresponding field. The console statements are for testing purposes.

```js
const handleName = event => {
  console.log('Name ', event.target.value);
  setName(event.target.value);
};

const handleAmount = event => {
  console.log('Amount ', event.target.value);
  setAmount(event.target.value);
};
```

Lastly, to submit the form, there is going to be another handler method called `handleSubmitForm`. This method when triggered is going to dispatch the action to add the expense (`ADD_EXPENSE`). This is how the `reducer` function in the global state updates the state.

```js
const handleSubmitForm = event => {
  event.preventDefault();
  if (name !== '' && amount > 0) {
    dispatch({
      type: 'ADD_EXPENSE',
      payload: { id: uuid(), name, amount }
    });

    // clean input fields
    setName('');
    setAmount('');
  } else {
    console.log('Invalid expense name or the amount');
  }
};
```

Lastly, add the following JSX to display the component.

```js
return (
  <BTForm style={{ margin: 10 }} onSubmit={handleSubmitForm}>
    <FormGroup className="row">
      <Label for="exampleEmail" sm={2}>
        Name of Expense
      </Label>
      <Col sm={4}>
        <Input
          type="text"
          name="name"
          id="expenseName"
          placeholder="Name of expense?"
          value={name}
          onChange={handleName}
        />
      </Col>
    </FormGroup>
    <FormGroup className="row">
      <Label for="exampleEmail" sm={2}>
        Amount
      </Label>
      <Col sm={4}>
        <Input
          type="number"
          name="amount"
          id="expenseAmount"
          placeholder="$ 0"
          value={amount}
          onChange={handleAmount}
        />
      </Col>
    </FormGroup>
    <Button type="submit" color="primary">
      Add
    </Button>
  </BTForm>
);
```

## Display a list of items

In this section, let's add the `List.js` component to display a list of items from the current state object provided by the `ExpenseContext`. Open the file and add the following import statements:

```js
import React, { useContext } from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';

import { ExpenseContext } from '../GlobalState';
```

Next, map the `state` value to display the name of the expense and the amount of the expense as a list item.

```js
export default function List() {
  const [state] = useContext(ExpenseContext);
  return (
    <ListGroup>
      {state.expenses.map(item => {
        return (
          <ListGroupItem key={item.id}>
            {item.name} - $ {item.amount}
          </ListGroupItem>
        );
      })}
    </ListGroup>
  );
}
```

## Running the app

All the components of the simple Expense Tracker app are complete. Now, let's run the app and see it as an action. On the initial render, the Rect app is going to look like below.

![ss1](https://i.imgur.com/KrlTYS6.png)

It is going to display one expense item that is defined as the object in the initial state. Try adding a new item in the list and see if the list updates and form gets cleared or not.

![ss2](https://i.imgur.com/92qztPT.gif)

## Conclusion

Using `useReducer` in conjunction with React's Context API is a great way to quickly get started with managing your state. However, some caveats come with React's Context API. Re-rendering of multiple components unnecessarily can become a huge problem and its something you should take care.


How to manage state in React apps with useReducer and useContext hooks

---
title: 'How to use React Router and real time user monitoring in React apps'
date: '2020-08-14'
slug: 'react-router-real-time-user-monitoring-react-apps'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://amanhimself.dev/blog/blog/react-router-real-time-user-monitoring-react-apps/'
---

React is often used for building single-page applications (SPAs). SPAs tend to have multiple page views so when navigating from one-page view to another, reloading the entire page view is tedious and inefficient. To work as it should, a SPA must render different parts of a view when required instead of reloading the entire page.

Routing comes into the picture when navigating from one page to another in a SPA app. Routing can be categorized in two ways: static and dynamic. SPAs follow a dynamic approach. In this tutorial, we will discuss a popular routing library used with React applications known as [React Router](https://reacttraining.com/react-router/web/guides/quick-start). After setting up our routes, we are also going to discuss how to set up performance monitoring with [Sematext](https://sematext.com/) in React apps with React Router library.

## Prerequisites

Before you begin this tutorial, you’re going to need the following:

- [Node.js](https://nodejs.org/) version above 12.x.x installed on your local machine
- Access to a package manager such as npm or yarn or npx
- Basic JavaScript and ES6 knowledge
- Basic knowledge of Reactjs
- Access [Sematext](https://sematext.com/) account (_trial version also acceptable_)

## Getting started

Start by creating a new React project. Run the following command using [npx](https://www.npmjs.com/package/npx). Once the project is generated, navigate inside the newly created directory and install the `react-router-dom` library.

```shell
npx create-react-app react-router-demo

# navigate inside the directory
cd react-router-demo

# install react-router-dom
yarn add react-router-dom
```

React Router library (as per version 5) contains three different npm packages.

- react-router
- react-router-dom
- react-router-native

Each of the packages has a different use case. The first one, `react-router` is the core package and is used with the next two packages listed above. The `react-router-dom` is used when building a web application. This is what we are going to use in this tutorial. The last one `react-router-native` is used in apps using [React Native](https://amanhimself.dev/getting-started-with-react-native-in-2019-build-your-first-app/).

To see the React app generated, currently in action, make sure you are inside the root directory of the React project before you run the following command.

```shell
yarn run start
```

This is going to open the boilerplate React app screen at the URL `http://localhost:3000/` in a browser window.

![ss1](https://i.imgur.com/HtBY0g4.png)

### Create the first route with React Router

To create the first route in the React app, import the `Router` and `Route` from the `react-router-dom` library. Open `src/App.js` file and add the following import statement.

```js
import React from 'react';
import { Router, Route } from 'react-router-dom';
```

Let's also add a `history` object to use with navigation. Unlike `BrowserRouter`, the `Router` component is a low-level interface for all router components. This means that you have to manually pass the `history` object to make it work. Later, this `history` object is going to be used for the monitoring tool. Import `createBrowserHistory` as following:

```js
import { createBrowserHistory as createHistory } from 'history';

const history = createHistory();
```

A `Route` is required to create an actual route. It is where the logic of routing is placed. It renders the UI of a component. It has a prop called `path` that is always matched with the current location of the app. Based on this prop, the desired component gets rendered. When the component is not getting rendered, `Route` returns null. The `component` name is also passed as a prop. All `Routes` are wrapped inside the `Router` component.

```js
function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
    </Router>
  );
}
```

The path is currently pointing towards the Home component which has the following UI logic. Create a `Home` component inside `src/components/Home.js` file.

```js
import React from 'react';

export default function Home() {
  return (
    <div>
      <h1> Home Page</h1>
    </div>
  );
}
```

Now, import this component inside the `App.js` file.

```js
import Home from './components/Home';
```

Visit the web browser and see the Home component being rendered right now.

![ss2](https://i.imgur.com/Q2IwXJ7.png)

This is a bare minimum example. Now let us add another route with the same props as the Home. Call this route About with a similar rendering logic as Home.

## Adding the second route

Start by adding another component file inside `src/components` and name it `About.js`. Add the following code snippet to it.

```js
import React from 'react';

export default function About() {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
}
```

Now add this function component as the second route, below the `Home` route in `App.js` file. Make sure to import it.

```js
// After other import statements
import About from './components/About';

// Add another route
function App() {
  return (
    <Router history={history}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
}
```

Visit the URL `http://localhost:3000/about`. You will notice that both the components are being rendered right now on the path /about.

![ss3](https://i.imgur.com/krpy60b.png)

The reason for this is that the regular expression engine that React Router uses internally considers both the routes that are being started with a forward slash `/` equal. To solve this issue, we can use another essential prop on the Home route called `exact`.

```js
<Route path="/" exact component={Home} />
```

This `exact` prop is also known as a qualifier which states that the path must match exactly the `/` and nothing after it, such as `/about`. Now, if you visit the browser window at the URL `http://localhost:3000/about` you will notice that only the about component is getting rendered this time.

![ss4](https://i.imgur.com/rTVSwFM.png)

## Wrapping routes with Switch

The `Switch` component is a unique one since it renders the component at the `path` of the `Route` exclusively. It renders a default component once the app initially renders by matching the first child `Route`. It allows switching between different routes when a path is matched. It is helpful if you are using the `Redirect` component with the `Route` component. Even though in this current demo, we are not going to have any redirects, let's wrap all our routes inside a `Switch`. Modify the `App.js` file as follows:

```js
// import the Switch component
import { Router, Route, Switch } from 'react-router-dom';

// App component
function App() {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}
```

### Adding a navbar

To navigate between to web pages in HTML, there is an `<a href=""></a>` anchor tag available. However, using this traditional approach will lead to a browser refresh. To overcome this, React Router API offers a `NavLink` component that can be used to navigate to a particular URL or a component.

Let us try to create a navigation menu with this new knowledge. Import `NavLink` from `react-router-dom` in App.js file. Here is the modified snippet of App component.

```js
import { Router, Route, Switch, NavLink } from 'react-router-dom';

function App() {
  return (
    <Router history={history}>
      <nav style={{ margin: 10 }}>
        <NavLink exact to="/" style={{ padding: 10 }}>
          Home
        </NavLink>
        <NavLink to="/about" style={{ padding: 10 }}>
          About
        </NavLink>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}
```

In the above snippet, notice that all the links are being added before all the `Route` components. The styling attributes inside `style` are optional for now. Go to the browser window, you are going to notice a navigation menu pops up at the top. Try clicking links to navigate between different components.

![ss5](https://i.imgur.com/P0xZkiI.gif)

## Adding Parameters to the Routes

In this section, you will learn how to create and manage dynamic routes based on a query parameter such as `:id`. We start by creating a static array that will serve as the mock data.

The idea is to demonstrate a route as `/posts` which displays all the posts that are coming from the array. However, each post in the array will be having an `id` or a unique identifier. Using that unique identifier, you will be approaching the concept of dynamic content rendering by writing the logic for URLs such as `/posts/:id` where `:id` will be represented by the specific id of a post.

To start, let us add a bunch of mock posts in the state inside a new component file called `components/Posts.js`. Import the following statements.

```js
import React, { useState } from 'react';
import { Link, Route } from 'react-router-dom';
```

A `Link` component is similar to `NavLink` with the difference being that it can be used for other purposes rather than a navigation menu where an `anchor` tag is required.

Next, declare a static array of different posts.

```js
const POSTS = [
  {
    id: 1,
    title: 'Hello Blog World!'
  },
  {
    id: 2,
    title: 'My second post'
  },
  {
    id: 3,
    title: 'What is React Router?'
  }
];
```

Next, define a function component called `Child`. It reads anything coming from the URL parameters, such as, in this case, the `id` of each post. This component is going to accept one prop called `match` object. This object contains information about how a `<Route path>` matched the URL. It has four different props, but the prop you are going to use is an object called `params` to read the `id` of the post. A `params` object contains key/value pairs that are parsed from the URL corresponding to the dynamic segments of the `path`.

```js
function Child({ match }) {
  return (
    <div>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
}
```

Then, define the `Posts` function component. It is going to have a state variable called `posts` that are going to have a default value of the mock array `POSTS`. Using the JavaScript's `map` function is going to render the list of Posts and display them as a list whenever the current location in the web browser matches `/posts`. The `Child` component is going to be the value of displaying the content (`id` in this case) of each post.

```js
export default function Posts() {
  const [posts, setPosts] = useState(POSTS);

  return (
    <div className="posts">
      <h1>Posts List</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link to={`/posts/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
      <Route path="/posts/:id" component={Child} />
    </div>
  );
}
```

Now, import the newly created component inside `App.js` where other routes already exist.

```js
import Posts from './components/Posts';

function App() {
  return (
    <Router history={history}>
      <nav style={{ margin: 10 }}>
        <NavLink exact to="/" style={{ padding: 10 }}>
          Home
        </NavLink>
        <NavLink to="/about" style={{ padding: 10 }}>
          About
        </NavLink>
        <NavLink to="/posts" style={{ padding: 10 }}>
          Posts
        </NavLink>
      </nav>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/posts" component={Posts} />
      </Switch>
    </Router>
  );
}
```

Now, visit the URL `http://localhost:3000/posts` and you are going to see the list of posts.

![ss6](https://i.imgur.com/79STiT7.png)

Clicking one of the posts is going to show the contents of that post.

![ss7](https://i.imgur.com/LmscMwA.png)

![ss8](https://i.imgur.com/a6np7at.png)

## Real user monitoring tool with Sematext

Configuring a monitoring tool can be a good asset for your React application. It is helpful to determine a user's experience in terms of performance. If you're web app is not loading as expected, when in production, you can lose a lot of users and potential customers.

A monitoring tool like Sematext Real user monitoring tool provides a way to test out performance-related issues regarding the user experience in your web app. It allows you to track page loading time, HTTP requests, UI interactions, application crashes, and so on.

This tool can be a critical part of understanding how a user behaves when using your web app. The features provided by their tool are hard to implement otherwise.

This tool can be a critical part of understanding how a user behaves when using your web app. The features provided by their tool are hard to implement otherwise.

## Configure a Sematext monitoring app

To follow further, you do require a [Sematext account](https://sematext.com/experience/) and do note that they have a 30 day trial period that you can leverage. If you are planning to use this in production, you can also leverage their pricing plan that is defined per app.

![ss9](https://i.imgur.com/y8Nekfj.png)

Once you are logged in to your account, you are going to be welcomed by a dashboard screen that might look similar to below.

![ss10](https://i.imgur.com/tuLIO58.png)

To start configuring Sematext Experience in the current demo React app, click on the `New App` button in the top right corner and then select `Experience`.

![ss11](https://i.imgur.com/A40CG1G.png)

Then, enter the name of the app in the modal screen as well as make sure to check the `About Website` option since the current React app is trying to simulate a SPA behavior. Click the button `Continue`.

![ss12](https://i.imgur.com/sRIIczJ.png)

## Installing monitoring scripts in React app

In the Sematext dashboard, you will be redirected to a page where there are steps to install the Experience tool. It contains some installation scripts that are necessary to add. These scripts are the integration point between the monitoring tool and your React app.

Go back to the React app and open the `public/index.html` file. Paste the first installation script as similar to one below, inside the `head` tag of the HTML file. The installation script contains the unique token provided by SemaText.

```html
<script type="text/javascript">
  (function (e, r, n, t, s) {
    var a = [];
    e[s] = function () {
      a.push(arguments);
    };
    e[s].queue = a;
    var o = [];
    var i = [];
    var c = true;
    var p = void 0;
    if (
      window.PerformanceObserver &&
      window.PerformanceObserver.supportedEntryTypes &&
      (PerformanceObserver.supportedEntryTypes.indexOf('longtask') >= 0 ||
        PerformanceObserver.supportedEntryTypes.indexOf('element') >= 0)
    ) {
      p = new PerformanceObserver(function (e) {
        e.getEntries().forEach(function (e) {
          switch (e.entryType) {
            case 'element':
              i.push(e);
              break;
            case 'longtask':
              o.push(e);
              break;
            default:
              break;
          }
        });
      });
      p.observe({ entryTypes: ['longtask', 'element'] });
    }
    e[s + 'lt'] = {
      longTasks: o,
      timingElements: i,
      inPageLoad: c,
      observer: p
    };
    if (t) {
      var u = r.createElement(n);
      u.async = 1;
      u.src = t;
      var f = r.getElementsByTagName(n)[0];
      f.parentNode.insertBefore(u, f);
    }
  })(window, document, 'script', '//cdn.sematext.com/rum.js', 'strum');
</script>
<script type="text/javascript">
  strum('config', {
    token: 'e3451b53-a95f-45c6-ba8e-1368cb4f2407',
    receiverUrl: 'https://rum-receiver.sematext.com'
  });
</script>
```

Follow this by the second step where you have to add an event listener called `routeChange` at the top component in your React app or where the navigation configuration is written.

Open the file `src/App.js` and paste the following after you have defined the `history` object.

```js
history.listen((location, action) => {
  if (action !== 'REPLACE') {
    window.strum('routeChange', window.location.href);
  }
});
```

This event listener is responsible for tracking whenever a route changes. It is essential, as discussed previously, the nature of a Single Page Application is to change the routes dynamically.

That's it. These are the only two steps required to configure and add the Sematext Real-time User Monitoring tool in your React app.

### Testing out the Real-time User Monitoring tool

After integrating the installation scripts, the next step is to build the React app by running the command from a terminal window:

```shell
yarn run build
```

Once this command runs successfully, you can serve it by using the command below:

```shell
npx serve -s build
```

This command serves all the files in the `build` folder as a single page application to simulate the hosted version experience. It is going to give you an URL that you can paste in a browser window.

Once the React app is built and served, you can test it out by playing around with the different routes. It might take a moment, but the Sematext monitoring tool is fast at detecting the user interactions in the React app.

The overview of the dashboard screen as shown below tells as the initial page loading time is excellent.

![ss13](https://i.imgur.com/n7rIiE2.png)

It also goes in detail by determining the exact page load time.

![ss14](https://i.imgur.com/cugGBau.png)

To check out the number of resources that are downloading for a particular URL, navigate to the `Resources` tab from the sidebar.

![ss15](https://i.imgur.com/tnetw9K.png)

From the `Users` tab in the sidebar menu, you can monitor the user data such as the number of active users on the web app at a given time, the top browser being used, the maximum number of users located in which country and so on.

![ss16](https://i.imgur.com/BPimzAR.png)

## Conclusion

Monitoring user experience in Real-time brings an advantage to single-page applications. It not only allows you to figure out how the user experience is going on for the majority of customers but you can use this information to improve the areas of your web app to provide a much better experience. Using the [Sematext Real-time User Monitoring tool](https://sematext.com/) with a React app is helpful in the scenario.


How to use React Router and real time user monitoring in React apps

---
title: 'How to integrate Material UI library in React apps'
date: '2020-05-24'
slug: 'material-ui-integration-with-react'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://amanhimself.dev/blog/material-ui-integration-with-react/'
---

Material design was introduced by Google around 2014 as a design language and it still shares some popularity among web and mobile applications. One of the common ways to integrate and use this design system in React apps is through [MaterialUI](https://material-ui.com/getting-started/installation/) library.

![ss1](https://i.imgur.com/l4PZ8tB.png)

In this post, let us take a look at how to integrate a material library that is available as an npm module and consists of built React components that you can use to build apps. You are going to learn from scratch on how to install and configure this library as well as build a small demo app.

![ss8](https://i.imgur.com/QxtWlBz.png)

## Prerequisites

Before you begin this tutorial you are going to need the following:

- a Web browser such as Chrome, Firefox and so on
- Node.js version above `12.x.x` installed on your local machine
- JavaScript/ES6 basics
- React basics
- npm/yarn install
- either `create-react-app` globally installed or access via `npx`

## Create a new React app

To start, you are going to need to setup a React project. Let's use `npx` to do so. Execute the following command in a terminal window.

```shell
npx create-react-app reactmaterial
```

By using the `npx` command (a part of the Node Package Manager (npm)) you execute `create-react-app` without the need to download and install the package globally.

When the new project is done scaffolding with the default dependencies such as React library and React DOM library installed.

Change in the new directory and you are going to be welcomed by the following structure of files and folders.

![ss2](https://i.imgur.com/W9D0ToF.png)

To verify that the React app is working, (_you can totally skip the step at this time_), run `yarn start` from the terminal window and open the default React app running at `http://localhost:3000` in a browser window.

![ss3](https://i.imgur.com/OkkceuE.png)

## Install Material UI library

The next step is to install the Material-UI library and integrate it to work with the current React app. The first is to install the core dependency of this library.

```shell
yarn add @material-ui/core
```

Material-UI was designed with the Roboto font in mind. If you wish to use it, you can follow the instructions. Go back to the terminal window and install the typeface package of the font. Also note that, the following steps to install this font are optional.

```shell
yarn add typeface-roboto
```

Then go to the entry point of your React app (preferably, `./src/index.js` file) and import the font.

```js
// rest of the import statements
import 'typeface-roboto';
```

Alternatively, if you do not wish to install the above npm module for the font, you can also use the CDN version of the font and read about it [here](https://material-ui.com/components/typography/#roboto-font-cdn).

## Using AppBar to create a custom navigation bar

In this section let us build a navigation bar. Create a new file called `./src/components/Navbar.js` and start by importing the components `AppBar`, `ToolBar`, and `Typography` from the MaterialUI library.

The `AppBar` component is used to display branding, screen titles, and navigation of the web app. That is what you are going to use it for. The `ToolBar` component is wrapper where you can place your components horizontally. The `Typography` component applies the Material UI theme that is available by default.

```js
import React from 'react';
import { AppBar, Toolbar, Typography } from '@material-ui/core';
```

Next, export a function component called `Navbar` with the following JSX.

```js
export default function Navbar() {
  return (
    <AppBar>
      <Toolbar>
        <Typography variant="h6">React and Material-UI App</Typography>
      </Toolbar>
    </AppBar>
  );
}
```

In the code snippet above, notice the `variant` prop on the `Typography` component. It uses the variant mapping to properly associate a UI element with an HTML semantic element (_such as h6 in the code snippet_).

Now, to see it in action, import the `Navbar` component in the `App.js` file.

```js
import React from 'react';
import Navbar from './components/Navbar';

function App() {
  return (
    <div>
      <Navbar />
    </div>
  );
}

export default App;
```

You are going to get the following result after this step.

![ss4](https://i.imgur.com/HhDhiP3.png)

## Implementing a Paper component

Two components that are going to be used in this section in order to layout a view for the items of the list are called `Grid` and `Paper`.

Material Design’s responsive UI is based on a 12-column grid layout. The `Grid` component helps you implement this layout system and then provide the values or the number of grids you want to display. A basic grid might look like below:

![ss5](https://i.imgur.com/UqiYt1i.png)

Material UI uses CSS's Flexbox to manage layout alignments and sizing of the grid columns.

The other component `Paper` actually displays the physical properties of a paper on the screen. It resembles a flat, texture of a sheet of paper, and using a prop called `elevation` you can manipulate its default display behavior. Do note that, this component does need an initial width and height.

Create a new component file called `./src/components/List.js` which is going to be used as a reusable component later. This presentational component is going to display a `Paper` component inside `Grid` with custom styles.

```js
import React from 'react';
import { Grid, Paper, makeStyles } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  root: {
    marginTop: 100,
    flexGrow: 1
  },
  paper: {
    height: 220,
    width: 340,
    backgroundColor: '#ebebeb'
  },
  avatarImage: {
    width: 200,
    height: 200,
    borderRadius: 100
  }
}));

export default function List() {
  const classes = useStyles();

  return (
    <Grid container spacing={2}>
      <Grid item className={classes.root} xs={12}>
        <Grid container justify="center" spacing={2}>
          <Grid key={1} item>
            <Paper className={classes.paper} elevation={2} />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}
```

The `makeStyles` comes from the Material UI API. It links a style sheet with a function component and returns a hook that you use inside the component.

You can modify the `App.js` file to include the `List` component.

```js
// rest of the import statements
import List from './components/List';

function App() {
  return (
    <div>
      <Navbar />
      <List />
    </div>
  );
}
```

Here is the result you are going to get after this step.

![ss6](https://i.imgur.com/8PL5Xrs.png)

## Fetching random user data

To display data inside `List` component, let us use [https://randomuser.me/](https://randomuser.me/) API. In the `App` component the data is going to be fetched on the initial render using `useEffect` hook. The `useState` hook is used to store the fetched data by defining a state variable whose initial value is an empty array.

To start, first, import the hooks from the `react` library.

```js
import React, { useState, useEffect } from 'react';
```

After that create a state variable called `data` inside the `App` component. Along with the `data` variable, define two other state variables, `isLoading` to track the whether app is in loading mode (that is, the data is being fetched from the API) and `error` to track if there is an error while fetching the data. The loading state of the React app is going to be `true` by default.

```js
function App() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState('');

  //rest of the code
}
```

The `useEffect` hook is going to have a callback that is going to fetch the data using JavaScript's `fetch` API.

```js
useEffect(() => {
  fetch('https://randomuser.me/api/?results=5')
    .then(res => res.json())
    .then(
      result => {
        setIsLoading(false);
        setData(result.results);
      },
      error => {
        setIsLoading(false);
        setError(error);
      }
    );
}, []);
```

You can conditionally render the JSX based on the state variables.

```js
if (isLoading) {
  return <div>Loading ...</div>;
} else if (error) {
  return <div>There is an error fetching data.</div>;
} else {
  return (
    <div>
      <Navbar />
      <List />
    </div>
  );
}
```

Now, when you refresh the React app, you are going to see the JSX being rendered that is related to the loading state of the app, for split seconds.

![ss7](https://i.imgur.com/hBWfaYc.gif)

## Display a list of users

You can now pass the user information you want to display in the form of the prop at the `List` component. Use JavaScript's `map` function to traverse the array `data`.

```js
{
  data.map(item => (
    <List
      key={item.id.value}
      userAvatar={item.picture.large}
      firstName={item.name.first}
      lastName={item.name.last}
    />
  ));
}
```

These props are then passed as arguments to the `List` component.

```js
xport default function List({ userAvatar, firstName, lastName }) {
  const classes = useStyles();

  return (
    <Grid container spacing={2}>
      <Grid item className={classes.root} xs={12}>
        <Grid container justify="center" spacing={2}>
          <Grid key={1} item>
            <Paper className={classes.paper} elevation={2}>
              <Grid container justify="center">
                <Avatar
                  alt="User"
                  className={classes.avatarImage}
                  src={userAvatar}
                />
                <Typography variant="p">
                  Name: {firstName} {lastName}
                </Typography>
              </Grid>
            </Paper>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}
```

The above code snippet uses few more core components from Material UI (such as `Avatar`). You can find their reference in the official documentation of this library.

Here is the final result you are going to get when you back to the browser screen.

![ss8](https://i.imgur.com/QxtWlBz.png)

## Conclusion

I hope in this post, you get the idea of how you can leverage the core components of [Material UI library](https://material-ui.com/getting-started/installation/) in your React apps and save a ton of development time.

References:

- [Materia UI official docs](https://material-ui.com/getting-started/installation/)
- [AJAX calls in React](https://reactjs.org/docs/faq-ajax.html)
- [Random User API](https://randomuser.me/documentation#howto) to mock data in your React apps
- To learn more about React Hooks, check out my post on that [here](https://dev.to/amanhimself/build-a-expense-tracker-app-with-react-hooks-and-localstorage-api-4lfj)


How to integrate Material UI library in React apps

Build an Expense Tracker app with React Hooks and LocalStorage API

---
title: 'How to add Dark mode functionality with React Hooks'
date: '2020-01-09'
slug: 'dark-mode-with-react-hooks'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://blog.crowdbotics.com/how-to-add-dark-mode-functionality-with-react-hooks/'
---

![cover](https://i.imgur.com/WDIlL4i.png)

Developers seems to love dark mode. A lot of popular websites like Twitter, Reddit, and YouTube are now supporting this dark mode on their websites and applications as well. It is more than a trend. It's easy on user's eyes and decreasing the problem of eye fatigue.

In this post, I am going to show you how you can add this functionality in your React apps whether it is an admin dashboard that is consuming some third party API hosted elsewhere or a web blog using static site generators like [Gatsby](https://www.gatsbyjs.org/). The steps discussed below are going to be same whether you decide to use `create-react-app` utility to generate a React app or using any static site generator.

This tutorial is going to use React hooks. If you are not familiar with them at all, it is recommended that you get familiar with them from the [official React docs](https://reactjs.org/docs/hooks-reference.html). Otherwise, whenever hooks are used, a brief overview is provided.

## Table of Contents

- Requirements
- Setting up a base theme
- Add a toggle button to change the theme
- Adding theme persistence using local storage
- Connecting Crowdbotics support to Your Github Repo
- Conclusion

## Requirements

Note: These requirements are needed if you are looking to follow this post from a technical point of view, which means, if you are looking to try out Crowdbotics for the first using a custom template from the marketplace or are actually interested in building a custom dating app using Crowdbotics template, React Native, and Expo. If later is your scenario, this post can act as a guide and an entry point to the template.

- [Node.js](https://nodejs.org/en/) (>=`10.x.x`) with npm/yarn installed.
- [create-react-app](https://www.npmjs.com/package/create-react-app) to generate a new React app
- [Crowdbotics App builder platform](http://app.crowdbotics.com/) account (preferably log in with your valid Github ID)

## Setting up a base theme

In this section, let us start by adding a base React app that uses light mode by default. To start, using `create-react-app` create a new directory. After you have created a new directory, navigate inside the project directory. You can copy and paste the following steps in your terminal window.

```shell
create-react-app react-darkmode-app

cd react-darkmode-app
```

Once inside the project directory, open `App.css` file and the following styles for the base light theme.

```css
body {
  margin: 0;
  text-align: center;
}

.light-theme {
  background-color: #fff;
  color: #444444;
}

nav {
  display: flex;
  text-align: center;
  background-color: #503d81;
  width: 100%;
  padding: 20px;
  color: #f8f8f8;
}

.content {
  padding: 0.5em;
  margin: 0 auto;
  max-width: 600px;
  font-size: 1.2rem;
  line-height: 1.1;
  height: 90vh;
}
```

To apply these styles, open `App.js` component file and replace the default code with the below snippet.

```js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="light-theme">
      <nav>Toggle button will go here</nav>
      <div className="content">
        <h1>Light Mode</h1>
      </div>
    </div>
  );
}

export default App;
```

Now, try to run the app using the command `yarn start` from a terminal window. Visit the URL `http://localhost:3000` in a browser window and you will get the following result.

![ss1](https://crowdbotics.ghost.io/content/images/2019/08/ss1-1.png)

Head back to the `App.css` file and create base styles for the dark theme.

```css
.dark-theme {
  background-color: #1f1b24;
  color: #f8f8f8;
}

.dark-theme nav {
  background-color: #332940;
}

.dark-theme code {
  color: red;
}
```

Notice that using CSS selector property, you are changing the background color of the navbar and the rest of the styles remain the same as before. For example, the text `color` property is going to be the same as in light theme. To test out the dark theme, change the `className` of the first `div` element inside the `App.js` file to `dark-theme`.

```js
function App() {
  return (
    <div className="dark-theme">
      <nav>Toggle button will go here</nav>
      <div className="content">
        <h1>Dark Mode</h1>
        <p>
          Do take a note of the <code>color</code> property in the nav bar.
        </p>
      </div>
    </div>
  );
}
```

Looking back at the browser window, you get the following result.

![ss2](https://crowdbotics.ghost.io/content/images/2019/08/ss2-1.png)

At this point, you have a very simplified version of the app, but it doesn't fulfill the purpose. It has to keep track of which theme the user selects and show the styles accordingly.

## Add a toggle button to change the theme

To let the end-user decide which theme they want to the view, your React app would be done by adding a toggle button. To change the theme between the light or dark, there is a need for a variable to keep track of what theme the user has selected. For this purpose, let us add the new concepts of _React Hooks_ rather than converting the current `App` component into a class component.

To give a brief overview of React Hooks, one can say they are available to React since the version `16.8.x`. They are functions that allow you to initialize and use React state and a component's life-cycle methods in a functional component. Hooks do not work with classes. If you are familiar with React, you know that the functional component has been called as a functional stateless component. Not any more.

React provides a few built-in Hooks such as `useState` to initialize a default state of a component similarly as in a class component with the keyword `state`. Open `App.js` file and initialize the state as below.

```js
function App() {
  const [darkTheme, setDarkTheme] = React.useState(false);
  // rest remains same
}
```

In the above snippet, the default value of `darkTheme` variable is `false`. This means that it is not the default set of styles that the app will use. Using conditional operator, update the `return` function inside `App()`.

```js
return (
  43 -
  (
    <div className={darkTheme ? 'dark-theme' : 'light-theme'}>
      <nav>
        <div className="button-container">
          <button onClick={() => setDarkTheme(prevTheme => !prevTheme)}>
            Toggle Theme
          </button>
        </div>
      </nav>
      <div className="content">
        <h1>{darkTheme ? 'Dark Mode' : 'Light Mode'}</h1>
        <p>
          Do take a note of the <code>color</code> property in the nav bar.
        </p>
      </div>
    </div>
  )
);
```

Starting from the first `div` element, it uses the conditional operator to check whether the value of the state variable `darkTheme` is true or false. If it is true, the styles related to the dark theme are going to be applicable. Otherwise, the default light theme is activated. The same conditional operator goes on the `h1` element to display the text of which theme is being currently used.

The `button` uses an `onClick` event to toggle the behavior of light and a dark theme. The `prevTheme` is used to apply functional updates. It computes the value of the previous state and then returns an updated value. In the current case, the value here represented is the theme itself.

Here is the output in the browser window. Click the `Toggle Theme` button to change the theme and the heading in the content.

![ss3](https://crowdbotics.ghost.io/content/images/2019/08/ss3.gif)

Here are the corresponding styles for the `button-container`.

```css
.button-container {
  display: flex;
  margin: 0 auto;
}
```

## Adding theme persistence using local storage

Right now, the user can easily switch between the two themes your app is running on. However, whenever the web page reloads, the default theme shown is light even though the last theme you selected was dark. To provide the pragmatic solution, in this section, you are going to store the value of dark theme in the browser's local storage.

As compared to lifecycle methods in class components, in modern-day React functional components, you can easily add the same working functionality using `useEffect`. It accepts a function in the form of an argument. This function can be written with the keyword `function` or use an arrow function. Also, this function passed to `useEffect` as the argument will run after every render is completed.

To avoid this, you can conditionally render the `useEffect` method. This is done by passing an empty array as the second argument. The value this array will contain is going to be the value of the `darkTheme`. After you have defined the state in the `App` component, add this effect method.

```js
React.useEffect(() => {
  localStorage.setItem('dark', JSON.stringify(darkTheme));
}, [darkTheme]);
```

Using an arrow function as the first argument, it is setting the value of `darkTheme` in the browser's `localStorage`. To add a theme value to the local storage, there are two things required in combination. An identifier or a key has to be passed as the first argument to `setItem()` along with boolean value of `darkTheme` as the second argument.

Now, go back to the browser window and open dev tools. In the tab, `Application` look for the **Storage > Local Storage** as described in the image below. You will find a key `dark` that has the value of `false`.

![ss4](https://crowdbotics.ghost.io/content/images/2019/08/ss4.png)

On clicking the button `Toggle Theme` the value of the key `dark` in the local storage changes to `true`.

![ss5](https://crowdbotics.ghost.io/content/images/2019/08/ss5-1.png)

It works but on reloading the React app, switches back to the light theme. This is because the default value provided to the dark theme is always false. Let us change that.

Go back to the `App` component and create a new function, `getDefaultTheme`. It will keep track of getting the value of the `dark` from the local storage. Also, the default value of the `darkTheme` in the state is going to be read from this function (_in other words, from the local storage_) rather than a boolean `false`.

```js
const [darkTheme, setDarkTheme] = React.useState(getDefaultTheme());

React.useEffect(() => {
  localStorage.setItem('dark', JSON.stringify(darkTheme));
}, [darkTheme]);

function getDefaultTheme() {
  const selectedTheme = JSON.parse(localStorage.getItem('dark'));
  return selectedTheme || false;
}
```

Notice in below demo of how the value of the dark is saved in the local storage even when the React app reloads.

![ss6](https://crowdbotics.ghost.io/content/images/2019/08/ss6-1.gif)

## Connecting Crowdbotics support to your Github Repo

Once everything is working, now let us add git version to this React project and then, further add the support for Crowdbotics app building platform. Open a terminal window and execute:

```shell
git init

# add all files
git add .

# commit
git commit -m "update"
```

Once all the files are committed, add this repository to your Github account. Crowdbotics app building platform now gives you an option to connect a Github repository directly using GitHub OAuth integration ( which means you need to have a Crowdbotics account or login into one using your Github account).

![ss7](https://crowdbotics.ghost.io/content/images/2019/08/ss7.png)

More and in-detail information about this process could be found [here](https://medium.com/crowdbotics/connect-your-github-repo-to-crowdbotics-36008d35e681).

## Conclusion

_Congratulations!_ You have made to the end. I hope you learned something useful here. React Hooks is a powerful concept, and getting more commonly used as the time progress. Here are some resources related to this post:

- [Hooks official docs](https://reactjs.org/docs/hooks-intro.html)
- [Using Hooks in a React Native app](https://crowdbotics.ghost.io/react-hooks-basics-building-a-react-native-app-with-react-hooks/)

Originally published at [Crowdbotics.com](https://crowdbotics.ghost.io/how-to-add-dark-mode-functionality-with-react-hooks/)


How to add Dark mode functionality with React Hooks

---
title: 'Using React Router to Optimize Single Page Applications (SPAs)'
date: '2019-07-11'
slug: 'introduction-to-react-router-v4-with-reactjs'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://blog.crowdbotics.com/introduction-to-react-router-v4-with-reactjs/'
---

React is often used for building single page applications (SPAs). SPAs tend to have multiple page views. When navigating from one-page view to another, reloading the entire page view is a tedious and not so efficient task. In fact, it diminishes the benefits of a SPA. To work as it should, a SPA must render parts of views when required instead of reloading the entire page.

Routing comes into the picture when navigating from one page to another in a SPA app. Routing can be categorized in two ways. Static and dynamic. SPAs follow a dynamic approach. In this tutorial, we will discuss a popular routing library used with React applications known as [React Router](https://reacttraining.com/react-router/web/guides/quick-start).

**Table of Contents**

- Requirements
- Getting Started
- First Route with React Router
- What is BrowserRouter?
- The Link Component
- Active Links with NavLink
- Adding Parameters to the Routes
- Conclusion

**Requirements**

- NodeJS `v8.x.x` or higher installed along with npm/yarn
- `create-react-app` installed globally to on your local dev machine generates a new React project

_Bonus_: You can also, use `npx` to generate a new React project without installing `create-react-app`.

## Getting Started

To create a new React project run the following command at the desired location on your local machine.

```shell
create-react-app react-router-v4-demo
```

Once the project is generated, traverse inside the newly created directory. This strategy is the default way to generate a new React app.

[React Router](https://reacttraining.com/react-router/web/guides/quick-start) as a library contains three different npm packages.

- react-router
- react-router-dom
- react-router-native

Each of the packages has a different use case. The first one, `react-router` is the core package and is used with the next two packages listed above. The `react-router-dom` has to be used when building a web application. This is what we are going to use in this tutorial. The last one, `react-router-native` tends to be used in a [React Native](https://hackernoon.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2) application.

To add React Router in the React app, execute the following command from a terminal window.

```shell
yarn add react-router-dom
```

Please note that, for the rest of the tutorial, we will be using `yarn` as the JavaScript package manager to add or remove dependencies. If you wish to use `npm`, there is no one stopping you.

To run the React app, go to the terminal window and execute the command npm start. This will start the development server. You will be welcomed by the default boilerplate project screen in a web browser window on URL `http://localhost:3000/`.

![ss1](https://crowdbotics.ghost.io/content/images/2019/05/ss1-1.png)

## First Route with React Router

To create the first route in the React app, let us import `BrowserRouter` from `react-router-dom` library.

```js
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
```

To create a route, we use `<Route>` from the `react-router-dom`. This is where the logic of routing is placed. It renders the UI of a component. A `<Route>` has a prop called `path` which is always matched with the current location of the app. On the basis of this prop, the desired component gets rendered. When the component is not getting rendered, `Route` returns null. The component name is also passed as a prop `component`. Look at the below snippet.

```js
function App() {
  return (
    <Router>
      <Route path="/" component={Home} />
    </Router>
  );
}
```

There is the functional `App` component that returns a `BrowserRouter` which holds the very first `Route` component. The `path` is currently pointing towards the `Home` component which has the following UI logic.

```js
function Home() {
  return (
    <div>
      <h1>Home Component</h1>
    </div>
  );
}
```

Now, visit the URL on port `3000` and you will see the `Home` component being rendered right now.

![ss2](https://crowdbotics.ghost.io/content/images/2019/05/ss2.png)

This is a bare minimum example. Now let us add another route with the same props as the `Home`. Call this route `About` with a similar rendering logic as `Home`.

```js
function About() {
  return (
    <div>
      <h1>About Component</h1>
    </div>
  );
}
```

Now add this functional component as the second route, below the `Home` route. Also, add both routes inside a `div` element. A router component can hold a single child element and adding a `div` solves this problem and allows the router component to have as many children as we want.

```js
function App() {
  return (
    <Router>
      <div>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}
```

Try visiting the URL `http://localhost:3000/about`. You will notice that both the components are being rendered right now on the path `/about`.

![ss3](https://crowdbotics.ghost.io/content/images/2019/05/ss3-1.png)

The reason for this is that regular expression engine that React Router uses internally considers both the routes that are being started with a forward slash `/` equal. To solve this issue, we can use another essential prop on the Home route called `exact`.

```js
<Router>
  <div>
    <Route path="/" exact component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>
```

This exact is also known as a qualifier which states that the path must match the exactly the `/` and nothing after it, such as `/about`. Now, if you visit the browser window at the URL `http://localhost:3000/about` you will notice that only the about component is getting rendered this time.

![ss4](https://crowdbotics.ghost.io/content/images/2019/05/ss4.png)

## What is BrowserRouter?

Do you remember reading earlier about that `react-router-dom` is used only in case of web applications? Well, `react-router-dom` library holds two types of routers API for a React application to use. One is called `BrowserRouter` that you have seen in action in the previous section. The other one is called `HashRouter`.

A `BrowserRouter` will always listen to URLs like `http://localhost:3000/about` whereas a `HashRouter` will have `http://localhost:3000/#/about`, as the name suggests, uses a hash `#` in between. So why did we use the `BrowserRouter`?

`BrowserRouter` is a popular choice among modern day web applications. The main reason behind is that it uses HTML5 History API to keep track of the router history of your React app. The `HashRouter` has a use case for legacy browsers where `window.location.hash` is still being used to keep a track of routes in a SPA.

## DIY Exercise 👇

Here is a small task for you. Modify directory structure like below screenshot and separate the two functional components `Home` and `about` in their own component files such that, in future, if they grow with more JSX to render.

![ss5](https://crowdbotics.ghost.io/content/images/2019/05/ss5.png)

You can totally skip this if you want and move on to the next section. But performing this small task will benefit you to have an understanding of the above concepts.

## The Link Component

To navigate between to web pages in HTML, there is an `<a href=""></a>` anchor tag available. However, using this traditional approach will lead to a browser refresh. In order to overcome this, React Router API offers a `Link` component that can be used to navigate to a particular URL or a component.

Let us try to create a navigation menu with this new knowledge. Import Link from `react-router-dom` in `App.js` file. Here is the modified snippet of App component.

```js
// App.js

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <div>
        <nav style={{ margin: 10 }}>
          <Link to="/" style={{ padding: 10 }}>
            Home
          </Link>

          <Link to="/about" style={{ padding: 10 }}>
            About
          </Link>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;
```

In the above snippet, notice that all the Links are being added before all the Route components. The styling attributes inside `style` are optional for now. Start the development server and visit the browser window and you will notice a navigation menu pops up at the top. Try clicking links to navigate between different components.

![ss5](https://crowdbotics.ghost.io/content/images/2019/05/ss6-1.gif)

Wherever a `Link` is rendered in a React project, an anchor `<a>` will be rendered in the application’s HTML.

## Active Links with NavLink

In React Router API, `NavLink` is the extended version of the `Link` component. You can say that is a special type of the `Link` that can style itself as to represent the active state when matches the current route.

To demonstrate this, first, let us replace all the `Link` tags with `NavLink` in `App.js` file.

```js
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <Router>
      <div>
        <nav style={{ margin: 10 }}>
          <NavLink to="/" style={{ padding: 10 }}>
            Home
          </NavLink>

          <NavLink to="/about" style={{ padding: 10 }}>
            About
          </NavLink>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;
```

At this point, each `NavLink` link is going to behave like an ordinary `Link` component which means there is no change so far. To make a link active, add an `activeClassName` prop to that. Such as below.

```js
<NavLink to='/' style={{ padding: 10 }} activeClassName='active'>
```

To set up the corresponding CSS for this to work, open `App.css` file and add the below.

```css
a {
  padding: 10px;
}

a,
a:visited {
  color: blue;
}

a.active {
  color: red;
}
```

Do not forget to import this file inside `App.js`. Also, modify the `about` route to have an `activeClassName`.

```js
import "./App.css"

// ...

return (
  {/* */}
  <nav style={{ margin: 10 }}>
      <NavLink to='/' activeClassName='active'>
          Home
      </NavLink>

      <NavLink to='/about' activeClassName='active'>
          About
      </NavLink>
  </nav>

 {/* */}
)
```

Go back to the browser, open develop tools like below and you will notice, at first, the `Home` route has a class name `active`.

![ss7](https://crowdbotics.ghost.io/content/images/2019/05/ss7.png)

Try navigating to the `About` route and see what happens.

![ss8](https://crowdbotics.ghost.io/content/images/2019/05/ss8.gif)

On navigating to `About` route did you notice that the active class name is also added to the corresponding route? However, the `Home` route still has the active class even though the URL matches the `/about`. Why?

The way `NavLink` works is almost similar to Route component in React Router API. To make sure that only one route has the class active state, try modifying the home route in the navigation menu, as below.

```js
// App.js

<NavLink to="/" exact activeClassName="active">
  Home
</NavLink>
```

You will get the desired output this time.

![ss9](https://crowdbotics.ghost.io/content/images/2019/05/ss9.gif)

## Adding Parameters to the Routes

In this section, you will learn how to create and manage dynamic routes based on a query parameter such as `:id`. We start by creating a static array in the `App.js` file that will serve as the mock data.

The idea is to demonstrate a route as `/posts` which displays all the posts that are coming from the array. However, each post in the array will be having an id or a unique identifier. Using that unique identifier, you will be approaching the concept of dynamic content rendering by writing the logic for URLs such as `/posts/:id` where `:id` will be represented by the specific id of a post.

To start, let us add a bunch of mock posts in the state inside a new component file called `components/posts.js`.

```js
// Posts.js
import React from 'react';
import '../App.css';

class Posts extends React.Component {
  state = {
    posts: [
      { id: 1, title: 'Hello Blog World!' },
      { id: 2, title: 'My second post' },
      { id: 3, title: 'What is React Router?' }
    ]
  };

  render() {
    return (
      <div className="posts">
        <h1>Posts List</h1>
      </div>
    );
  }
}

export default Posts;
```

The corresponding styles to the above are added in `App.css` file for brevity.

```css
.posts ul {
  list-style: none;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
}

.posts ul li {
  padding: 10px;
}

.posts a {
  text-decoration: none;
}
```

Now, import the newly created component inside `App.js` where other routes already exist.

```js
//App.js
// ...
import Posts from './components/Posts';

function App() {
  return (
    <Router>
      <div>
        <nav style={{ margin: 10 }}>
          <NavLink to="/" exact activeClassName="active">
            Home
          </NavLink>
          <NavLink to="/about" activeClassName="active">
            About
          </NavLink>
          <NavLink to="/posts" activeClassName="active">
            Posts
          </NavLink>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/posts" component={Posts} />
      </div>
    </Router>
  );
}

export default App;
```

The existing navigation menu has a new route and its called Posts.

![ss10](https://crowdbotics.ghost.io/content/images/2019/05/ss10.png)

Open `Posts.js` to render the list of Posts and display them as a list whenever the current location in the web browser matches `/posts`.

```js
import React from 'react';
import { Link, Route } from 'react-router-dom';
import '../App.css';

function Child({ match }) {
  return (
    <div>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
}

class Posts extends React.Component {
  state = {
    posts: [
      {
        id: 1,
        title: 'Hello Blog World!'
      },
      {
        id: 2,
        title: 'My second post'
      },
      {
        id: 3,
        title: 'What is React Router?'
      }
    ]
  };

  render() {
    const { posts } = this.state;
    return (
      <div className="posts">
        <h1>Posts List</h1>
        <ul>
          {posts.map(post => (
            <li key={post.id}>
              <Link to={`/posts/${post.id}`}>{post.title}</Link>
            </li>
          ))}
        </ul>
        <Route path="/posts/:id" component={Child} />
      </div>
    );
  }
}

export default Posts;
```

Also, the `Child` component reads anything coming from the URL parameters, such as, in the above case, the `id` of each post. A `match` object contains information about how a `<Route path>` matched the URL, thus, in our case, the id of each post.

![ss11](https://crowdbotics.ghost.io/content/images/2019/05/ss11.png)

## Conclusion

Hopefully, by now, you are familiar with the basic concepts of how React Router library works. It is a powerful library that helps you build better React apps. If you want to learn more about React Router visit its official documentation [here](https://reacttraining.com/react-router/).

[Originally published at Crowdbotics](https://crowdbotics.ghost.io/introduction-to-react-router-v4-with-reactjs/)


Using React Router to Optimize Single Page Applications (SPAs)

---
title: 'How to Setup a React App with TypeScript, Storybook'
slug: 'setup-a-react-app-with-typescript-storybook'
date: '2019-06-14'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://blog.crowdbotics.com/setup-a-react-app-with-typescript-storybook-and-crowdbotics/'
---

If you are building web applications with ReactJS, you might have heard or used TypeScript. They say TypeScript is the missing part from JavaScript's ecosystem. I must say, I did not enjoy writing React apps in TypeScript at first. But over time, I have learned this valuable lesson that if you want to continue a project that has a focused development process, TypeScript should be the way to go. Including types and structures like interfaces as an extension of JavaScript help to make the development process more predictable and safer. TypeScript offers other benefits in the form of code suggestions in a workspace and highlights errors as early as possible too.

**In this tutorial, we are going to take a look at how to setup a React app that uses TypeScript along with Storybook.** It is targeted towards
developers who are want to learn these two important tools of ReactJS development. It can be a bit of a hassle to setup a TypeScript and Storybook together in one project but this tutorial will walk you through a smooth process and will showcase you that it is not a hassle at all.

**Tld;**

- Requirements
- Creating a new React app
- Adding Storybook
- Adding Storybook configuration
- First Storybook Component
- Connecting Crowdbotics support to Your Github Repo
- Conclusion

## Requirements

In order to follow this tutorial, you must have:

- NodeJS `v8.x.x` or higher installed along with npm/yarn
- `create-react-app` installed globally to on your local dev machine generate a new React project

Bonus: You can also, use `npx` to generate a new React project without installing `create-react-app`.

## Creating a new React app

To get started with a React project, generate one by running the below command in a terminal window

```shell
create-react-app hello-tsx-storybook
--scripts-version=react-scripts-ts
```

This command will take a few moments to execute completely. Once the React + TypeScript project is generated you will get the following file structure. Notice how there some of the files in the root directory are TypeScript's configuration files and in `src` directory, where the magic happens, has component files (such as `App.tsx`) with an extension of `tsx` at the end of file name rather a `.js`. This indicates that the component file now supports TypeScript.

![](https://crowdbotics.ghost.io/content/images/2019/05/ss1-3.png)

To run the app in the current state, open command line interface, traverse inside the project root and run `npm start`. Once the webpack dev server starts, you will be directed to the URL `http://localhost:3000/` in a default web browser window with the following screen like below.

![](https://crowdbotics.ghost.io/content/images/2019/05/ss2-2.png)

## Adding Storybook

**[Storybook](https://storybook.js.org/docs/basics/introduction/)** is a user interface development environment for UI components. If you are building a UI and you want to showcase all or some of the functionalities of the individual components but totally isolated from the current app's lifecycle and dependencies.

Storybook is available for many front-end frameworks and libraries such as [ReactJS](https://medium.com/crowdbotics/building-a-mern-stack-app-with-material-ui-33ff8ca4da01), [Angular](https://medium.com/crowdbotics/learn-to-build-a-simple-progressive-web-app-pwa-with-angular-and-lighthouse-hacker-news-clone-51aca763032f), and [React Native](https://medium.com/crowdbotics/how-to-build-a-real-time-logo-detection-app-with-react-native-google-vision-api-and-crowdbotics-9ed65fbcd15).

To install Storybook as dev dependency for React, run the following command.

```shell
yarn add --dev @storybook/react @types/storybook__react
```

Why install it as `devDependency`? We won't require storybook and its use in the production build, ever. So it is better to stick with it in the development environment only. One this dependency is installed, you have to install some of the peer dependencies that are required. Two of them are `react` and `react-dom` which we already have installed. The rest of them can be installed using the below command.

```shell
yarn add --dev babel-loader @babel/core
```

Lastly, there three more dependencies that are required just to compile TypeScript.

```shell
yarn add --dev awesome-typescript-loader react-docgen-typescript-loader react-docgen-typescript-webpack-plugin
```

## Adding Storybook configuration

Before we can make Storybook work, we need to add a few more things. Let us start by creating a new directory `.storybook` in the root directory.

```shell
mkdir .storybook
```

Inside this folder, there are several files that are required to be created.

```shell
cd .storybook

touch addons.js config.js tsconfig.json webpack.config.js
```

The output of the above command is going to be:

![](https://crowdbotics.ghost.io/content/images/2019/05/ss3-3.png)

For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories and include the path inside `.storybook/config.js`. In our current scenario, we are going to stories inside the `src/components` directory (_just a personal preference_).

```js
import { configure } from '@storybook/react';

const req = require.context('../src/components', true, /.stories.tsx$/);
function loadStories() {
  req.keys().forEach(req);
}

configure(loadStories, module);
```

Note, that, prior to this step, `components` directory inside `src` did not exist. You will have to create that manually. The above snippet of code is to create a pattern such that all the stories match a particular glob. code is Next file that needs to be configured is `tsconfig.json` inside the storybook directory. This file is going to be responsible to compile stories from TypeScript to JavaScript. Add the following to this file.

```json
{
  "compilerOptions": {
    "baseUrl": "./",
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "../",
    "outDir": "dist",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "**/*/*.test.ts",
    "examples"
  ]
}
```

Lastly, add the following code inside the file `.storybook/webpack.config.js`.

```js
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
          configFileName: './.storybook/tsconfig.json'
        }
      },
      {
        loader: require.resolve('react-docgen-typescript-loader')
      }
    ]
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};
```

To complete the setup, open `package.json` file and add the script to run the storybook interface.

```json
"storybook": "start-storybook -p 4000 -c .storybook"
```

## First Storybook Component

In order to proceed and test our current setup to work as expected, let us write a new component and its story. Create a new file called `Button.tsx` inside `components` directory with the following code for the component itself.

```tsx
import * as React from 'react';

export interface IButtonProps {
  children?: React.ReactNode;
  onClick?: (e: any) => void;
}

const styles = {
  border: '1px solid #eee',
  borderRadius: 3,
  backgroundColor: '#FFFFFF',
  cursor: 'pointer',
  fontSize: 15,
  padding: '3px 10px',
  margin: 10
};

const Button: React.SFC<IButtonProps> = props => (
  <button onClick={props.onClick} style={styles} type="button">
    {props.children}
  </button>
);

Button.defaultProps = {
  children: null,
  onClick: () => {}
};
export default Button;
```

The above component is a stateless component (_aka functional component_). Now, while being inside the same directory, create another file `button.stories.tsx` with the following snippet of code.

```tsx
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './Button';

storiesOf('Button', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);
```

Go to the terminal window and run the script `yarn run storybook`. This will open a new window in your default web browser at URL: `http://localhost:4000/?path=/story/button--with-text` with the following result.

![](https://crowdbotics.ghost.io/content/images/2019/05/ss4-2.png)

![](https://crowdbotics.ghost.io/content/images/2019/05/ss5-3.png)

## Conclusion

Kudos to you if have reached so far. You have configured Storybook work with TypeScript and wrote a story for a custom `Button` component using the TypeScript. This tutorial was just an introduction. To dive deep inside the world of storybooks, I would recommend you to go through their official docs [here](https://storybook.js.org/docs/guides/guide-react/).

[Originally published at Crowdbotics](https://crowdbotics.ghost.io/setup-a-react-app-with-typescript-storybook-and-crowdbotics/)


How to Setup a React App with TypeScript, Storybook

---
title: 'Integrating Firebase with React Native'
date: '2018-12-05'
slug: 'integrating-firebase-with-react-native'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://blog.jscrambler.com/integrating-firebase-with-react-native/'
---

**This post has been updated in 2021. Please visit [this URL](https://blog.jscrambler.com/integrating-firebase-with-react-native/) to view the new post.**

Firebase is a Backend as a Service (_BaaS_) that provides an advantage to mobile developers who use React Native for developing mobile applications. As a React Native developer, by using Firebase you can start building an MVP (minimum viable product), keeping the costs low and prototyping the application pretty fast. In this tutorial, we will be learning how to get started by integrating Firebase with a React Native application. We will also create a small application from scratch with the help of Firebase & React Native to see how they work together.

## Getting Started

[Firebase](https://console.firebase.google.com/?pli=1) is a platform that got acquired by Google and has a healthy and active community. Most users in this community are web and mobile developers as Firebase can help with mobile analytics, push notification, crash reporting and out of the box provides email as well as social authentication.

To get started, you will need a target mobile OS, whether you choose to go with iOS or Android or both. Please refer to [React Native official documentation](https://facebook.github.io/react-native/docs/getting-started) if you are setting up React Native development environment for the first time. You will need sdk tools and Android Studio especially to setup a developer environment for Android. For iOS, you only need Xcode installed on your macOS. You will also need to have installed:

- [Nodejs](http://nodejs.org) (`>= 8.x.x`) and npm/yarn installed
- [react-native-cli](https://www.npmjs.com/package/react-native-cli) (`>= 2.0.1`)

React Native is distributed as two npm packages, `react-native-cli`, and `react-native`. We are going to use the `react-native-cli` to generate an app. Begin by installing `react-native-cli`:

```shell
npm install -s react-native-cli
```

Now, let’s create a new React Native project called “rnFirebaseDemo”:

```shell
react-native init rnFirebaseDemo
```

When the above command is done running, traverse into the project directory using `cd rnFirebaseDemo`. Now, let’s check if everything is working correctly and our React Native application has been properly initialized by running one of the following commands:

```shell
# on macOS
react-native run-ios

# For Windows/Unix users
react-native run-android
```

This command will run the default screen as shown below in an iOS simulator or Android emulator but it will take a few moments since we are running it for the first time.

![ss1](https://i.imgur.com/mBobZpT.png)

## Adding Firebase

To add Firebase to our existing React Native application, we need to install the dependency.

```shell
yarn add firebase
```

When we open the project in a code editor, its structure looks like this:

![ss2](https://i.imgur.com/TdKzipp.png)

We need to make some modifications before we can really start building our app. Create an `src` directory inside the root folder. This is where our app components and screens will live. Further, within the `src` directory, we will create two folders: `screens` and `components`.

![ss3](https://i.imgur.com/N9m3Y83.png)

The `screen` directory will contain all the UI related components that we need to display to the end user, whereas the `components` folder will contain any other component that will be used or re-used to display the user interface.

Let us create our first screen, Home screen, inside `screens/` with a new file `Home.js`.

```js
import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class Home extends Component {
  render() {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
```

Our next screen is going to be `Add Item`. Create a new file called `AddItem.js`.

```js
import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class AddItem extends Component {
  render() {
    return (
      <View>
        <Text>Add Item</Text>
      </View>
    );
  }
}
```

Our last screen is going to be a List of items that we need to display. In the same directory, create a new file called `List.js`.

```js
import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class List extends Component {
  render() {
    return (
      <View>
        <Text>List</Text>
      </View>
    );
  }
}
```

## Adding react-navigation

To navigate between different screens, we need to add the `react-navigation` library. We are going to use the latest version that is `3.0.0`.

```shell
yarn add react-navigation
```

Next, we will install `react-native-gesture-handler`. If you’re using Expo, you don’t need to do anything here.

```shell
yarn add react-native-gesture-handler
```

The next step is clearly to run the command below and link the libraries we just installed:

```shell
react-native link
```

After adding this package, let us run the build process again:

```shell
# on macOS
react-native run-ios

# For Windows/Unix users
react-native run-android
```

Now, to see it in action, let us add the Home component as our first screen. Add the following code in `App.js`.

```js
import React, { Component } from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Home from './src/screens/Home';

// we will use these two screens later in our AppNavigator
import AddItem from './src/screens/AddItem';
import List from './src/screens/List';

const AppNavigator = createStackNavigator({
  Home: {
    screen: Home
  }
});

const AppContainer = createAppContainer(AppNavigator);

export default class App extends Component {
  render() {
    return <AppContainer />;
  }
}
```

At this stage, if we go to the simulator, we will see the following result:

![ss4](https://i.imgur.com/IMXVJ9n.png)

The Home Screen is showing up. We will add two other screens as routes to `AppNavigator` in order to navigate to them through the Home Screen.

```js
const AppNavigator = createStackNavigator(
  {
    Home,
    AddItem,
    List
  },
  {
    initialRouteName: 'Home'
  }
);
```

Now, our stack has three routes: a Home route, an AddItem route, and a ListItem route. The Home route corresponds to the `Home` screen component, the AddItem corresponds to the `AddItem` screen and the ListItem route corresponds to the `ListItem` component. The initial route for the stack is the `Home` route, this is defined if we have multiple screens and need to describe a starting point.

## Navigating between the screens

Previously, we defined a stack navigator with three routes but we didn't hook them up in order to navigate between them. Well, this is an easy task too. The `react-navigation` library provides us with a way to manage navigation from one screen to another and back. To make this work, we will modify the `Home.js`.

```js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';

export default class Home extends Component {
  render() {
    return (
      <View>
        <Text>Home Screen</Text>
        <Button
          title="Add an Item"
          onPress={() => this.props.navigation.navigate('AddItem')}
        />
        <Button
          title="List of Items"
          color="green"
          onPress={() => this.props.navigation.navigate('List')}
        />
      </View>
    );
  }
}
```

In the code above, we are adding a `Button` component from the `react-native` API. `react-navigation` passes a navigation prop in the form of `this.props.navigation` to every screen in the stack navigator. We have to use the same screen name on the `onPress` function to navigate as we defined in `App.js` under `AppNavigator`.

You can also customize the back button manually with your own styling on both screens `AddItem` and `List` but, for our demonstration, we are going to use the default.

![ss5](https://i.imgur.com/oB1OSRS.gif)

## Creating a Database with Firebase

Go to the [Firebase](https://firebase.google.com/) Console, log in from your Google Account and a create a new project.

![ss6](https://i.imgur.com/kB6UcyI.png)

We will then add the database configuration in a new file inside `src/config.js`.

```js
import Firebase from 'firebase';
let config = {
  apiKey: 'AIzaXXXXXXXXXXXXXXXXXXXXXXX',
  authDomain: 'rnfirebXXX-XXXX.firebaseapp.com',
  databaseURL: 'rnfirebXXX-XXXX.firebaseapp.com',
  projectId: 'rnfirebase-XXXX',
  storageBucket: 'rnfirebase-XXXX.appspot.com',
  messagingSenderId: 'XXXXXXX'
};
let app = Firebase.initializeApp(config);
export const db = app.database();
```

The config object is where you fill in the details you get after creating a new project in Firebase and going to the section **Add Firebase to your web app**. Also in the Firebase console, from left sidebar, click on **Database** and then choose the first option: ((Realtime Database)). Then, go to “rules” and paste the following:

```json
{ "rules": { ".read": true, ".write": true } }
```

![ss7](https://i.imgur.com/JyNyFqS.png)

## Adding Data from the App to Firebase

In this section, we will edit `AddItem.js` which represents an input field and a button. The user can add a item to the list and it will get saved to Firebase data.

```js
import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableHighlight,
  StyleSheet,
  TextInput,
  AlertIOS
} from 'react-native';

import { db } from '../config';

let addItem = item => {
  db.ref('/items').push({
    name: item
  });
};

export default class AddItem extends Component {
  state = {
    name: ''
  };

  handleChange = e => {
    this.setState({
      name: e.nativeEvent.text
    });
  };
  handleSubmit = () => {
    addItem(this.state.name);
    AlertIOS.alert('Item saved successfully');
  };

  render() {
    return (
      <View style={styles.main}>
        <Text style={styles.title}>Add Item</Text>
        <TextInput style={styles.itemInput} onChange={this.handleChange} />
        <TouchableHighlight
          style={styles.button}
          underlayColor="white"
          onPress={this.handleSubmit}
        >
          <Text style={styles.buttonText}>Add</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
    padding: 30,
    flexDirection: 'column',
    justifyContent: 'center',
    backgroundColor: '#6565fc'
  },
  title: {
    marginBottom: 20,
    fontSize: 25,
    textAlign: 'center'
  },
  itemInput: {
    height: 50,
    padding: 4,
    marginRight: 5,
    fontSize: 23,
    borderWidth: 1,
    borderColor: 'white',
    borderRadius: 8,
    color: 'white'
  },
  buttonText: {
    fontSize: 18,
    color: '#111',
    alignSelf: 'center'
  },
  button: {
    height: 45,
    flexDirection: 'row',
    backgroundColor: 'white',
    borderColor: 'white',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    marginTop: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
});
```

In the code above, we are adding a Firebase database instance from `config.js` and `db` and then pushing any item that the user adds through `addItem` and `handleSubmit()`. You will get an alert message when you press the button **Add** to add the item from the input value as shown below.

![ss8](https://imgur.com/qi5UQec.gif)

To verify that the data is there in the database, go to your Firebase console.

[ss9](https://i.imgur.com/KZDYCIo.png)

## Fetching Items from the Database

To fetch data from the Firebase database, we are going to use the same reference to `db` in `List.js`.

```js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import ItemComponent from '../components/ItemComponent';

import { db } from '../config';

let itemsRef = db.ref('/items');

export default class List extends Component {
  state = {
    items: []
  };

  componentDidMount() {
    itemsRef.on('value', snapshot => {
      let data = snapshot.val();
      let items = Object.values(data);
      this.setState({ items });
    });
  }

  render() {
    return (
      <View style={styles.container}>
        {this.state.items.length > 0 ? (
          <ItemComponent items={this.state.items} />
        ) : (
          <Text>No items</Text>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ebebeb'
  }
});
```

For the `ItemComponent`, we create a new file inside `components/ItemComponent.js`. This is a non-screen component. Only the `List` will use it to `map` and display each item.

```js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

export default class ItemComponent extends Component {
  static propTypes = {
    items: PropTypes.array.isRequired
  };

  render() {
    return (
      <View style={styles.itemsList}>
        {this.props.items.map((item, index) => {
          return (
            <View key={index}>
              <Text style={styles.itemtext}>{item.name}</Text>
            </View>
          );
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  itemsList: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-around'
  },
  itemtext: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center'
  }
});
```

This step concludes the integration of a Firebase database with our React Native app. You can now add the new data items and fetch them from the database as shown below.

![ss9](https://i.imgur.com/0Nr4d4J.gif)

## Conclusion

In this tutorial, we’ve shown you how to integrate Firebase with a React Native application. You don’t a complete server that creates an API and further uses a database to prototype or build an MVP of your application.

You can find the complete code inside [this Github repo](https://github.com/amandeepmittal/rnFirebaseDemo).

[Originally published at Jscrambler](https://blog.jscrambler.com/integrating-firebase-with-react-native/)


Integrating Firebase with React Native

---
title: 'Build a Progressive Web App using React'
slug: 'build-a-progressive-web-app-using-react'
date: '2018-02-01'
thumbnail: '/thumbnails/react.png'
tag: 'reactjs'
canonicalUrl: 'https://www.zeolearn.com/magazine/an-introduction-to-progressive-web-apps-pwa'
---

> [Originally this article was published on Zeolearn.com](https://www.zeolearn.com/magazine/an-introduction-to-progressive-web-apps-pwa)

![cover_image](https://i.imgur.com/qQAmt3M.jpg)

**Progressive Web App with React!** When I read this I thought, why not build one ourselves. If you are familiar with React and a bit about its ecosystem such as Create-React-App utility, this guide is for you.

If you spend at least third quarter of your day on internet then you have seen or read about progressive web apps here and there. _No?_ PWA are performance focused web applications that are especially streamlined for a mobile device. They can be saved over a device’s home screen and tend to consist a native app feel and look. The first PWA app I used on my mobile device is the Lite Twitter one which got released a few months back. Here is the link if you want to try: [https://lite.twitter.com/](https://lite.twitter.com/). They even support push notifications and offline support these days.

### Getting Started

Let us create a basic React app using _Create-React-App_ generator, the official scaffolding tool to generate _Reactjs_ _App_ released and maintained by _Facebook_. To install it, we will use our command line tool:

```shell
npm install --global create-react-app
```

Once the installation process is complete, go to your desired directory and create an empty project. Run this from your command-line interface:

```shell
create-react-app react-pwa-example

# and cd in that directory
cd react-pwa-example
```

Go ahead and take a look at the directory structure and **package.json** file. See what dependencies come with this scaffolding tool.

CRA or Create React App is one of the best with minimum hassle tool that I am currently using to build apps and prototypes with React. It is running all that Babel, Webpack stuff behind the scenes. If you want more information or want to customize the process, read [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject).

I hope, regardless of the timeline, your package.json file looks like this:

```json
{
  "name": "react-pwa-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

We need to one more dependency and that is React-Router: Go Back to your terminal:

```shell
npm install --save react-router-dom@4.2.2
```

You can now try running the application from terminal and see if everything is working:

```shell
npm run start
```

The boilerplate code will and look like this:

![](https://i.imgur.com/3vGXI94.png)

### Building the PWA App

Since the sole purpose of this guide is to make you familiar with the build process, I am not going to work out a complex application. For sake of simplicity and your precious time, we will build a simple app. Go to `src/App.js` file and make amendments exactly like below:

```js
import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Home from './components/Home';
import About from './components/About';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>React App</h2>
        </div>
        <BrowserRouter>
          <div>
            <Route path="/" exact component={Home} />
            <Route path="/about" exact component={About} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}
export default App;
```

In above we are including two pages using `react-router-dom.`Further we define **Home** and **About** Components in `src/components/` directory. It is always a best practice to use this approach and make sure that react components are short and readable.

For `Home.js`:

```js
import React from 'react';
import { Link } from 'react-router-dom';

const home = () => {
  return (
    <div title="Home">
      <h1>Home Page</h1>
      <p>
        <Link to="/about">About</Link>
      </p>
    </div>
  );
};

export default home;
```

And for `About.js`:

```js
import React from 'react';
import { Link } from 'react-router-dom';

const about = () => {
  return (
    <div title="About">
      <h1>About Page</h1>
      <p>
        <Link to="/">Home</Link>
      </p>
    </div>
  );
};

export default about;
```

Now to see if everything working, run `npm start` from your terminal window, and you will get a similar result:

![](https://i.imgur.com/qdqY2YP.png)

If you click on the **About** button/hyperlink, the `react-router-dom` will render the **about** page without changing the common Header part that is defined in `App.js`. This is a bare minimum single page application.

Our main job is still yet to be done. Let’s convert this bare minimum React application to a PWA.

### Installing Lighthouse

Lighthouse is a free tool from Google that evaluates your app based on their PWA checklist. Add it to your Chrome browser from [here](https://developers.google.com/web/tools/lighthouse/). Once installed as an extension we can start the auditiing process by clicking on the Lighthouse at top right corner where other extension might exist in your browser. Click on the icon and then make sure you are on right tab by checking the URL shown in the lighthouse popup. Also, make sure that development server of Create-react-app from terminal is running. Otherwise Lighthouse won’t be able to generate report. The report that is generated by the Lighthouse is based on a checklist that available to view [here](https://developers.google.com/web/progressive-web-apps/checklist).

![](https://i.imgur.com/c3oDUYx.png)

Click on the Generate Report button. After the process is completed, a new window will open where Lighthouse has generated a report. By the looks of it, it does not look pleasing to the Lighthouse and as a Progressive Web App.

![](https://i.imgur.com/khE0Q5o.png)
![](https://i.imgur.com/8OjdMK4.png)

We will be solving these issues one by one.

### Setting up a Service Worker

Let’s setup a service worker first. That is the first thing Lighthouse audited. What is a service worker, you ask? Well, it is a proxy server that sit between web applications, browsers and the network. We can use it to make React Apps work offline (remember the earlier point we discussed. Progressive Web Apps are focused on performance). You can definitey read details about it on [Google’s Web Fundamental Docs](https://developers.google.com/web/fundamentals/primers/service-workers/?hl=en).

It is a two step process. First we will create a`service-worker.js` file (service worker, after all is JavaScript code) and then register that worker in our `index.html`.

In the `public` directory of our app strucutre, create a file `service-worker.js`. I am going to use Addy Osmani's service worker configuraiton and I will recommend you to do so, at least for this one. You can find the complete thing in much much detail [here](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience-c84db889162c). To continue, make sure you add the following code in `service-worker.js` file:

```js
var doCache = false;

var CACHE_NAME = 'my-pwa-cache-v1';

self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(keyList =>
      Promise.all(
        keyList.map(key => {
          if (!cacheWhitelist.includes(key)) {
            console.log('Deleting cache: ' + key);
            return caches.delete(key);
          }
        })
      )
    )
  );
});

self.addEventListener('install', function (event) {
  if (doCache) {
    event.waitUntil(
      caches.open(CACHE_NAME).then(function (cache) {
        fetch('manifest.json')
          .then(response => {
            response.json();
          })
          .then(assets => {
            const urlsToCache = ['/', assets['main.js']];
            cache.addAll(urlsToCache);
            console.log('cached');
          });
      })
    );
  }
});

self.addEventListener('fetch', function (event) {
  if (doCache) {
    event.respondWith(
      caches.match(event.request).then(function (response) {
        return response || fetch(event.request);
      })
    );
  }
});
```

Our next step is to register the our service worker by loading the one we just wrote in `service-worker.js`. Add this before the closing `</body>` tag in `index.html`.

```html
<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker
        .register('service-worker.js')
        .then(
          function (registration) {
            console.log(
              'ServiceWorker registration successful with scope: ',
              registration.scope
            );
          },
          function (err) {
            console.log('ServiceWorker registration failed: ', err);
          }
        )
        .catch(function (err) {
          console.log(err);
        });
    });
  } else {
    console.log('service worker is not supported');
  }
</script>
```

Make sure you restart the dev server by running `npm run start` from the terminal. You must see this line if you open Chrome's DevTools > Console:

![](https://i.imgur.com/HRVYgGB.png)

If we run the Lighthouse audit process again, I hope we will get a better result.

![](https://i.imgur.com/xaTMUez.png)

Yes, you can clearly compare the above with our previous audit. It has imporved, and our previous first issue is now coming under Passed Audits. Now let’s move and add some enhancement.

### Adding Progressive Enhancement

Progressive Enhancement is way to improve the app/site since it will work without any JavaScript loading. Now, we want to display a loading message and some CSS or none (your choice) before the React app initializes the DOM. Let’s add a the required CSS and a loading message to our `index.html`. To increase performance, I am also adding all our CSS (that is CSS contained inside `App.css` and `index.css`) in our `index.html` file.

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <title>React App</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    .App {
      text-align: center;
    }
    .App-logo {
      height: 80px;
    }
    .App-header {
      background-color: #222;
      height: 150px;
      padding: 20px;
      color: white;
    }
    .App-title {
      font-size: 1.5em;
    }
    .App-intro {
      font-size: large;
    }
    @keyframes App-logo-spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="App">
      <p>
        Loading...
      </p>
    </div>

    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('service-worker.js').then(function (registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
          }, function (err) {
            console.log('ServiceWorker registration failed: ', err);
          }).catch(function (err) {
            console.log(err)
          });
        });
      } else {
        console.log('service worker is not supported');
      }
    </script>

</body>

</html>
```

We can now delete `App.css` and `index.css` file from out project directory and also remove their import references from `App.js` and `index.js`.

The above process improves the performance of our app by 10 points. The overall PWA score is same though:

![](https://i.imgur.com/lHn2hZG.png)

### Adding it to Device’s Home Screen

The creators of create-react-app is so good to us that they have already included a `manifest.json` file in `public` directory with some basic configuration. This feature that we are currently adding allows a user to save our PWA site page on their device's home screen. In future, if the user wish to open the app, they can do that just by using PWA as a normal application and it will open in their phone's default browser.

For this purpose, we are going to edit `public/manifest.json`:

```json
{
  "short_name": "PWA React App",
  "name": "Progressive React App Example",
  "icons": [
    {
      "src": "logo.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "logo-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000",
  "background_color": "#000"
}
```

Let’s talk about this file a bit. The `short_name` is the name of app that will appear on Home Screen of device. `name` will appear on the splash screen. `icons` is important and is the main icon of our app and will appear along the `short_name` on home screen, just like a native mobile application. The size of the icon must be `192x192`. I haven't played around with other image formats but you can. [Here](https://i.imgur.com/RaN7Qey.png) is the link to a dummy logo for this walkthrough we are working on. Add it to the `public` directory. The 512 setting is for splash screen and is a requirement in auditing process. So here is the [link](https://i.imgur.com/TmblrhM.png) to download that.

Next is `start_url` that notifies that the app was started frome Home Screen. Below it there are three more properties. `display` is for the appearance of the app, and I am making `theme_color` and `background_color` to be same since I want the application to match header background.

We will now solve one of our issue in the previous audit. We are left with only some of them to resolve.

![](https://i.imgur.com/zyot782.png)

### Deployment

First, let us turn the caching on. In `service-worker.js` edit the first line and change the existing boolean value to `true`.

```js
var doCache = true;
```

I will be using [Firebase](https://firebase.google.com/) here for deployment since it is easy to connect it with a web/mobile application for prototyping IMO. First, in Firebase console, create a new project `pwa-example-1`. Now, install the firebase-tool we need to deploy our PWA app. We will be installing this dependency as a global module.

Now the CLI tool will prompt for some questions. I am adding a series of images for clarity, make sure you choose the same answers when prompted.

```shell
npm install -g firebase-tools

# then run the following commands
firebase login
firebase init
```

![](https://i.imgur.com/0cg1Dtt.png)
![](https://i.imgur.com/7pg1Di0.png)
![](https://i.imgur.com/7pg1Di0.png)

Press the Enter key for final time and you will get a success message and two firebase config files generated in your project directory: `.firebaserec` and `firebase.json`.

Now, it is time to deploy our app. From terminal run:

```shell
npm run build && firebase deploy
```

The above command tells create-react-app to build our project into the build/ folder, which Firebase CLI tool then deploys. Firebase CLI tool will give you back a URL, save it and open it in Chrome, and then run our Lighthouse audit for the last time. The hosting url will be similar to below:

```shell
Hosting URL: https://pwa-example-1.firebaseapp.com
```

This solves our main issue from starting regarding using HTTTPS over HTTP. With that, all of our issues our solved and our PWA app gets 100/100 score.

![](https://i.imgur.com/VSEWUqI.png)
![](https://i.imgur.com/2GJL7m5.png)

The score looks good to me for our first application. The performance bar above of our application can be improved and there are few ways to that. I will not get into that since the scope of this application is for learning purpose.

You can find the complete code at [this Github repository](https://github.com/amandeepmittal/react-pwa-app). Go ahead to clone the repo, don’t forget to `npm install` once inside the project directory and then head start by trying out aforementioned PWA tips and techniques.


🔥 9 Posts filtered by tag "reactjs"