Responsive Master-Detail Layout in React

I am using React with React-Router to make a SPA(Single Page Application) recently. In my setting page, I adopted the typical Master-Detail layout.

It’s quite easy if you only need to make it work on desktop devices, but for small devices, you need to put extra effort into it.

This article describes how I implement the Master-Detail Layout which works well on both desktop and mobile. If you just want to see the end result, check out the demo project.

Continue reading →

How to avoid preflight OPTION request in CROS request

When sending CROS Ajax request, sometimes you may found that before every request you make, there will be a OPTION request sent.

It’s quite annoying and slows down your data request since the actually request has to wait the OPTION request to finish.

According to the CORS strategy (highly recommend you read about it) You can’t just force the browser to stop sending OPTION request if it is necessary.

There’s two way you can work around it

  1. Make sure your request is a “Simple Request”
  2. Set Access-Control-Max-Age for the OPTION request

Continue reading →

Implementing responsive design in React

Two kinds of responsive design

There’s two type of responsive design:

One is just adjusting an element’s appearance in response to different media types, like hiding or showing some elements, change size, color or layout.

Another way will be using the diffent design or totally different component for different media types. For example, a complex table view with lots of fields for each row, for a large screen, just show a regular table, but when the screen shrinks, the table view will be replaced with a card list, within each card, all the fields will be rendered vertically.

Continue reading →