React JS: Everything you need to know

Posted by admin on January 9, 2019

 

My last blog “Why go with React JS” was more inclined in terms of technology suggestion. How React Js is changing the dynamics as of today compared to other js i.e. Angular/vuejs. Being technology lover, I continued my journey by working on React JS and have practical experience.

So, before I share my practical experience/learning, let’s have a quick revamp of React js. As of now we all know Reactjs is a Component-based JavaScript library built by Facebook and it is open-sourced by Facebook in 2013. Developer’s community prefer React as it offers

  • Performance

  • Flexibility

  • Declarative, component-based approach to UI

Few weeks back, I had the opportunity to work on React JS website, requirement was to re-vamp existing Insurance based side using React JS. Just to provide brief overview, client website was already in React JS but he was not satisfied with current work, so he decided to re-vamp. So, as I said, website was Insurance based website which involved quite few forms and from user perspective I had to provide smooth interface and less tedious. Below are some of the main Libraries along with understanding /example used

  1. Redux: Redux is a predictable state container for JavaScript apps.

  • It helps you write applications that behave consistently.

  • Easy to test.

  • Provide a great developer experience.

To set up our file structure, which has a few more pieces than what we’re used to in a traditional React app. Everyone does this a little bit differently, but typically I like to make an actions folder, a reducers folder, a components folder, and a containers folder inside my application

You can think of it as an external state container which React components can directly interact with by means of a few special methods, regardless of their level of nesting in a project’s hierarchy. Need some state? Go to the container! Need to update the state? Dispatch an action to the container! Everything is connected

Used some useful features in application.

  • Redux-form- With redux-form comes a lot more: hooks for validation and formatting handlers, various properties and action creators.

  • Http-proxy-middleware- Express is a routing and middleware web framework that has minimal functionality of its own: An Express application is essentially a series of middleware function calls.

  • Sse- One Way Messaging: A server-sent event is when a web page automatically gets updates from a server.

  • Axios, babel etc...

Solutions for SEO of React-based SPA websites

There are 2 major ways to resolve the SEO issues being faced in the React-based SPA websites.

Isomorphic React:  ​How does Isomorphic React help in SEO? 

An Isomorphic Javascript technology based React website automatically detects if the JavaScript is disabled on the client side. In a scenario where JavaScript is disabled, Isomorphic JavaScript runs on  the  server-side and sends the final content to the client. In this manner, all the necessary attributes & content are available when the page loads. However, if JavaScript is enabled, it performs as a dynamic application with multiple components. This provides faster loading than traditional websites, a wider compatibility for older browsers and different crawlers, smoother user experience and the features of  Single Page Application as well.

Prerendering :Solving the problem using Prerendering

Although Isomorphic React is one of the ways for SEO of SPA websites, there are alternate approaches too. One of these approaches is to pre-render your website with a service like Prerender that uses Headless Chrome to render the page in the same way as a browser. Prerender will wait for the page to finish loading and then return the content in full HTML. Just like Isomorphic JavaScript, search engine crawlers can be targeted specifically to use Prerender while other browsers can still render the page by themselves.

This approach has the following advantages:

  • Allow the website to be correctly crawled by search engines.

  • Easier to set up because we won't need to make the codebase compatible with server-side rendering.

  • Unlike Isomorphic Javascript, Prerender has less pressure on the server as it's just a simple website rendering engine.

10 Best React Developer Tools

  1. React Sight: React Sight is a React visualization tool with a live state and prop tree viewer that complements React devtools.

  2. Reselect Devtools: Reselect devtools is a visualization tool for reselect which you can use to follow the caching layers.

  3. Redux DevTools Profiler Monitor: Redux DevTools Profiler Monitor a cool way to start and stop a Javascript profile session, based on Redux action.

  4. Periscope: Periscope is a timeline-based monitoring for Redux actions.

  5. Redux-promise-middleware-times: redux-promise-middleware-times is a tiny addon to redux-promise-middleware that records time it took for async actions to happen.

  6. Redux-duplicate-actions: redux-duplicate-actions detects duplicate actions (glitches in clicks, double action bugs, etc.) along the redux action stream.

  7. Should-component-update-dev: should-component-update-dev is another take on why-did-you-update where the integration point is swapping a component’s shouldComponentUpdate.

  8. React-wastage-monitor: react-wastage-monitor is yet another takes on why-did-you-update, where there’s support to detect whether DOM updated or not.

  9. React Monocle: react-monocle is a powerful React visualization that takes the source code components, runtime components and their state, and your redux state and fuses all together.

  10. React-component-benchmark: react-component-benchmark is a convenient and declarative component-based benchmarking tool that you can use to benchmark components and entire trees of components. Also check out fuego which seems to be the same thing with a different API.

Hope information shared are of your interest and I would be interested to hear back from you. Send your questions at [email protected].

Need experienced Indian professionals
whatsapp