Most people use community packages to do something as trivial as setting up a Menu on a sidebar. In my opinion, it takes more time to understand the API of a package than it takes to build the Menu from scratch. In this tutorial, I will show how you can build your own Menu using React router and SASS.

Scaffold a React app

For scaffolding a React app, please feel to use create-react-app (CRA) or Parcel.…

Read More

Server side rendering (SSR) is a technique for rendering HTML with meta tags and data when the page first loads. For React apps, the HTML is usually an empty div tag. The browser downloads the JavaScript bundle and populates the div tag with HTML. Google, the most popular search engine, crawls the content after running JavaScript. So, we may think that this is not a problem.…

Read More

React Router has very useful feature to constrain the route. For example, consider a company website which has various department pages.

<Route
  path="/:department"
  component={Department}
/>

Within the Department component, we access the department (usually a slug) with this.props.match.params.department. If the department slug exists in our system, we show the department page. But, if the user types something like /xyz in the browser, we show a 404 Page Not Found Error.…

Read More

When we are dealing with form input, we need to cancel navigation to a different page to ensure that the form is saved. This is a bit tricky than it sounds. How should the app behave if the user

  1. Closes the browser.
  2. Moves to a different website.
  3. Moves to another page within the same website.

Navigating to a different site or closing the browser

There is not much that a React app can do to handle the cases 1.…

Read More