React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

To build single-page apps, we have to have some way to map URLs to the React component to display.

In this article, we’ll look at the basic usage of React Router.

Installation

To use React Router, we have to install it. We can do that by running:

npm i react-router-dom

Basic Usage

React Router has a few basic components.

BrowserRouter

First, there’s the BrowserRouter to do the routing with the HTML5 history API.

It takes a few props:

• basename — a string prop for the base URL for all locations.
• getUserConfirmation — a function prop we use to confirm navigation. Defaults to using window.confirm .
• forceRefresh — a boolean prop that’s true if we want a full refresh on page navigation. It’s useful for imitating traditional server-render apps.
• keyLength — a number prop that sets the length of location.key . Defaults to 6.
• children — a React component to render. Before React 16, we can only use a single child element. If we want to render more than one element, we can wrap it in a div.

Switch

Next, there’s the Switch component. It renders the first child Route or Redirect that matches the location.

Switch renders a route exclusively. Route that matches the location renders inclusively.

Switch will only pick one Route to render.

Route

The Route component is the most important component in React Router.

It’s used to map URLs to components and takes the following props:

• component — we pass in the component to map the URL to by passing in a component to it.
• render — this prop takes a function that returns something that we want to render.
• children — a function prop that lets us render something when the path matches Route ‘s path and render something else otherwise.
• path — a string or array of strings that are paths to match.
• exact — a boolean prop to that’s true if we want to render only if a path matches exactly.
• strict — boolean prop that’s true is we only want to match a path with a trailing slash only when the URL entered has a trailing slash. It has no effect when there’re additional URL segments in location.pathname
• location — an object prop that tries to match its path in the current history location.
• sensitive — a boolean prop that true if the path is case-sensitive.

Link

The Link component provides accessible navigation around our app.

It takes the following props:

• to — a string prop with the path that we want to go to. It’s created by concatenating location’s pathname, search and hash properties.
• to can also be an object that has the pathname, search, state and hash properties. The pathname is a string that has the path to link to. search is a string of the query parameters, hash is a hash top put in the URL, state is the state to persist to the location.
• to can also be a function which takes the currentlocation as the argument and returns the location representation as a string as an object.
• replace — a boolean prop that replaces the current entry in the history stack instead of adding one if true
• innerRef — a function or ref object that we shouldn’t need if we’re using React Router 5.1 or later with React 16. It lets us access the ref of the component.
• We can any other attribute to the a tag like title , id , className , etc.

Example

We can use the components above together as follows:

import React from "react";  
import ReactDOM from "react-dom";  
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";  
function Home() {  
  return <h2>Home</h2>;  
}

function Foo() {  
  return <h2>Foo</h2>;  
}

function Bar() {  
  return <h2>Bar</h2>;  
}

function App() {  
  return (  
    <Router>  
      <div>  
        <ul>  
          <li>  
            <Link to="/">Home</Link>  
          </li>  
          <li>  
            <Link to="/foo">Foo</Link>  
          </li>  
          <li>  
            <Link to="/bar">Bar</Link>  
          </li>  
        </ul>  
        <Switch>  
          <Route exact path="/">  
            <Home />  
          </Route>  
          <Route path="/foo">  
            <Foo />  
          </Route>  
          <Route path="/bar">  
            <Bar />  
          </Route>  
        </Switch>  
      </div>  
    </Router>  
  );  
}

const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);

In the code above, we have the Home , Foo , and Bar components which display some text.

Then we add Router in App and put all our Route s inside so when we click on the Link s, they’ll display the component we specified.

We have:

<Switch>  
    <Route exact path="/">  
        <Home />  
    </Route>  
    <Route path="/foo">  
        <Foo />  
    </Route>  
    <Route path="/bar">  
        <Bar />  
    </Route>  
</Switch>

In the Switch , we have exact in the first Route to only show Home when we go to / .

Then we define 2 more Route s to show Foo when we go to /foo and Bar when we go to /bar .

Conclusion

We can use React Router to map URLs to components. This lets us create a single-page app since we render components according to URLs on the client-side.

Therefore, we’ll have a self-contained app that works on its own without the server rendering things when we type in URLs.

We have the Link to render links, Route to map URLs to components. Router wraps around anything that needs routing.

Switch renders the first child Route or Redirect that matches the location.

React is a library for creating front end views. It has a big ecosystem of libraries that work with it. Also, we can use it to enhance existing apps.

To store data in a central place for easy accessibility by components, we have to use some state management solutions. React-Redux is a popular choice.

In this article, we’ll look at how to add it to our React app and simple use cases.

Installation

To install the react-redux package, we have install react-redux and its dependency redux .

We can install both by running:

npm install react-redux redux

with NPM or if we use Yarn:

yarn add react-redux redux

Set Up a Redux Store

After installing both packages, we have to set up our Redux store to hold our data.

To do this we write:

import { createStore } from "redux";

function counterReducer(state = 0, action) {  
  switch (action.type) {  
    case "INCREMENT":  
      return state + 1;  
    default:  
      return state;  
  }  
}

const store = createStore(counterReducer);

The code above creates a Redux store by creating the counterReducer reducer function.

The reducer specifies how the app’s state changes in response to actions sent to the store.

Our counterReducer only accepts one action, which is 'INCREMENT' . We respond to the action by returning the state and adding 1 to it.

There’s also a default case to just return the state value as is.

Then we create a store by calling Redux’s createStore function and passing in our reducer.

It returns the store , which we can pass into our React app.

Connecting the Store to our React App

This is where we need the functions of React-Redux.

We can connect the store to our app so we can store our app’s state in the store by using React-Redux’s connect function.

connect takes 2 functions, which are mapStateToProps and mapDispatchToProps . They’re the first and second argument respectively.

First, we can put the whole app together by connecting our store with the React app as follows:

import React from "react";  
import { Provider, connect } from "react-redux";  
import { createStore } from "redux";  
import ReactDOM from "react-dom";

function counterReducer(state = 0, action) {  
  switch (action.type) {  
    case "INCREMENT":  
      return state + 1;  
    default:  
      return state;  
  }  
}

const store = createStore(counterReducer);

class App extends React.Component {  
  onClick() {  
    this.props.increment();  
  }  
  render() {  
    const { count } = this.props;  
    return (  
      <>  
        <button onClick={this.onClick.bind(this)}>Increment</button>  
        <p>{count}</p>  
      </>  
    );  
  }  
}

const mapDispatchToProps = dispatch => {  
  return {  
    increment: () => dispatch({ type: "INCREMENT" })  
  };  
};  
const mapStateToProps = state => ({  
  count: state  
});App = connect(  
  mapStateToProps,  
  mapDispatchToProps  
)(App);  
const rootElement = document.getElementById("root");  
ReactDOM.render(  
  <Provider store={store}>  
    <App />  
  </Provider>,  
  rootElement  
);

In the code, we have an app that shows a number going up as we click the Increment button.

The first step to connect the store to our React app is to wrap the Provider component around our whole app.

To do this we, wrote the following:

<Provider store={store}>  
  <App />  
</Provider>

Then we define the mapStateToProps and mapDispatchToProps functions as follows:

const mapDispatchToProps = dispatch => {  
  return {  
    increment: () => dispatch({ type: "INCREMENT" })  
  };  
};  
const mapStateToProps = state => ({  
  count: state  
});

In mapStateToProps we return a object to map the state object to a React component prop name as indicated in the property name. The state is the state stored in the Redux store.

So we mapped state to the prop count .

In mapDispatchToProps , we get the dispatch parameter, which is a function used to dispatch our action to the store, and return an object with the name for the function we can access from the props to call and dispatch the action.

So in mapDispatchToProps , increment is our function name. We can call it by running this.props.increment in our App component.

increment is a function that runs dispatch({ type: “INCREMENT” }) .

Then in our App component, we define the onClick method to call this.props.increment to dispatch the ‘INCREMENT’ action to our counterReducer via our Redux store and increase the state by 1.

Then since we have mapStateToProps , the latest value is being observed by App and the latest value is available via this.state.count as indicated in mapStateToProps .

Then when we click the Increment button, we’ll get the number going up by 1.

This will happen with every click.

Conclusion

We can use Redux in our React app by creating a store.

Next, we use the React-Redux Provider component and wrap it around our App entry-point component. We pass our Redux store to the store prop so that we can map the state and dispatch actions to props.

Then connecting it to our store via React Redux’s connect function. We pass in the mapStateToProps and mapDispatchToProps to map the store’s state to our component’s props and map our dispatch function call to our props respectively.

We can use MobX with MobX-React to manage the state by watching MobX observables and changing the observable data.

In this article, we’ll look at how to create an Observable and use it in React components directly.

Creating Observables and Using Them in React Components

We have to install the mobx and mobx-react packages to create Observables and use them within React components.

To do this, we can write the following:

npm i mobx mobx-react

Then we can create our Observable object and a React component that uses it as follows:

import React from "react";  
import ReactDOM from "react-dom";  
import { observer } from "mobx-react";  
import { observable } from "mobx";

const countData = observable({  
  count: 0  
});

const App = observer(({ countData }) => (  
  <>  
    <button onClick={() => countData.count++}>Increment</button>  
    <p>{countData.count}</p>  
  </>  
));  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App countData={countData} />, rootElement);

In the code above, we created the countData Observable object by writing:

const countData = observable({  
  count: 0  
});

We’ll be able to get the latest state within our React component and then pass it in as a prop for our React component.

To make our React component watch for the latest value from our Observable object and let us change its value from within the component, we write:

const App = observer(({ countData }) => (  
  <>  
    <button onClick={() => countData.count++}>Increment</button>  
    <p>{countData.count}</p>  
  </>  
));  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App countData={countData} />, rootElement);

The code above gets the countData prop from the countData Observable. Then in the onClick handler, we just pass in the function to change its value.

Then when we reference the App component in the last line, we just pass in the countData Observable object as the value of the countData prop.

countData.count++ will change the state of the Observable, which then the latest value will be obtained from the prop.

We can use the countData Observable object with class components as follows:

import React from "react";  
import ReactDOM from "react-dom";  
import { observer } from "mobx-react";  
import { observable } from "mobx";const countData = observable({  
  count: 0  
});

@observer  
class App extends React.Component {  
  render() {  
    return (  
      <>  
        <button onClick={() => countData.count++}>Increment</button>  
        <p>{countData.count}</p>  
      </>  
    );  
  }  
}

const rootElement = document.getElementById("root");  
ReactDOM.render(<App countData={countData} />, rootElement);

The only difference is that it’s a class component with a render method and that we use the observer decorator instead of the observer function.

Using Context to Pass Observables Around

We can use the React Context API to pass the values of an Observable to another component.

For instance, we can write the following code:

import React, { useContext } from "react";  
import ReactDOM from "react-dom";  
import { observer } from "mobx-react";  
import { observable } from "mobx";

const countData = observable({  
  count: 0  
});

const CountContext = React.createContext();

const Counter = observer(() => {  
  const countData = useContext(CountContext);  
  return (  
    <>  
      <button onClick={() => countData.count++}>Increment</button>  
      <p>{countData.count}</p>  
    </>  
  );  
});

const App = ({ countData }) => (  
  <CountContext.Provider value={countData}>  
    <Counter />  
  </CountContext.Provider>  
);

const rootElement = document.getElementById("root");  
ReactDOM.render(<App countData={countData} />, rootElement);

In the code above, we have the CountContext . We create it by writing:

const CountContext = React.createContext();

Then in App , we included the CountContext component, so that we can get the countData Observable value by passing in the countData prop with the value set to the countData Observable.

In the Counter component, we call the observer function with a function component inside.

Inside the component, we use the useContext hook to get the value from CountContext .

Then in the handler function, we passed into the onClick prop of the button, we changed the count ‘s value, which will automatically change the value in the countData Observable object and set as the value of countData.count .

Therefore, when we click the Increment button, the number below it will go up.

Storing Observables in Local Component State

We can also use Observables as a local state in a React component.

To do this, we can use the useState hook by passing in a function that returns an Observable object as follows:

import React, { useState } from "react";  
import ReactDOM from "react-dom";  
import { observer } from "mobx-react";  
import { observable } from "mobx";const App = observer(() => {  
  const \[countData\] = useState(() =>  
    observable({  
      count: 0  
    })  
  ); return (  
    <>  
      <button onClick={() => countData.count++}>Increment</button>  
      <p>{countData.count}</p>  
    </>  
  );  
});  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);

In the code above, we used the useState hook by passing in a function that returns an Observable object with the count property. We then assigned that to the countData variable.

Once we did that, countData.count will be updated by the onClick handler and when we click the Increment button, we’ll see the countData.count value update automatically.

If we click the Increment button, then the value will go up.

We don’t really need to use MobX Observable objects to store local state unless complex computations are involved, since MobX will optimize for those.

Likewise, we can use MobX to store local state with class components as follows:

import React, { useState } from "react";  
import ReactDOM from "react-dom";  
import { observer } from "mobx-react";  
import { observable } from "mobx";@observer  
class App extends React.Component {  
  @observable count = 0; render() {  
    return (  
      <>  
        <button onClick={() => this.count++}>Increment</button>  
        <p>{this.count}</p>  
      </>  
    );  
  }  
}  
const rootElement = document.getElementById("root");  
ReactDOM.render(<App />, rootElement);

In the code above, we have this.count , which is an Observable field. In the onClick listener, we just modify this.count directly, and then it’ll be reflected in the this.count in between the p tag.

@observer implements memo orshouldComponentUpdate automatically so that there won’t be any unnecessary re-renders.

Conclusion

We can use MobX Observable to store a React app’s state or a React component’s state.

To use it for storing React app’s state, we can either pass an Observable to a component as a prop or we can use the Context API to send the data to different components.

We can also use it to store local state by either using the useState hook in function components and using the observable decorator within a class component.