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.
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
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?
Prerendering :Solving the problem using Prerendering
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.
10 Best React Developer Tools
React Sight: React Sight is a React visualization tool with a live state and prop tree viewer that complements React devtools.
Reselect Devtools: Reselect devtools is a visualization tool for reselect which you can use to follow the caching layers.
Periscope: Periscope is a timeline-based monitoring for Redux actions.
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.
Redux-duplicate-actions: redux-duplicate-actions detects duplicate actions (glitches in clicks, double action bugs, etc.) along the redux action stream.
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.
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.
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.
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].