In the previous post , we created a BlogPost application with React and Redux and managed global state with Redux. We will extend the same application and will introduce Next.js for server-side rendering. The bigger benefit of using Next.js is pre-rendering of the page along with automatic code-splitting, static site export, CSS-in-JS. Next.js functions Next.js exposes three functions for data fetching and these are getStaticProps , getStaticPaths and getServerSideProps . First two functions are used for Static generation and the last function getServerSideProps is used for Server-side rendering. Static generation means the HTML is generated at the build(project build) time whereas in Server-side rendering HTML is generated at each request. Adding required libraries Run npm i --save next @types/next from root of the project to add the required libraries for this example. Update following commands under scripts in package.json. "dev": "next dev", "star

In the previous post , we created a blog post application with React and managed local state with useState hook. We will extend the same application and will introduce Redux and react-redux library for state management and @reduxjs/toolkit for opinionating setting up the redux store and creating selector function on state. Adding required libraries Run npm i --save @reduxjs/toolkit react-redux @types/react-redux from root of the project to add required set of libraries for this post. Which new functions we will be using in this example? configureStore from @reduxjs/toolkit createSlice from @reduxjs/toolkit useDispatch from react-redux useSelctor from react-redux useEffect from react @reduxjs/toolkit: configureStore This function provides a convenient abstraction over createStore function of redux library. It adds good defaults to the store for better experience(e.g. DevTools, Redux-Thunk for async actions). @reduxjs/toolkit: createSlice This f

Introduction React was first introducted to general public in May 2013; roughly three years after the first release of Angular JS (October 2010). Soon, it picked up the momentum and now is the highest stared(~150K) and forked(29.2K) repository on Github. The positive point of React with its contemporary libraries was the backward compatibility in all the released versions. It started as a class based library (extending React.Component ) to pure functional library with React Hooks ; still keeping backward compatibility. Now, new features include asyncronous rendering with Suspense . React's ecosystem is very vast with lots of frameworks available to choose from. We will start with building first simple a.ka. Welcome react application and then build full-stack application with React, Redux, reselect, Next.JS, express JS and Node.JS. So, stay tuned :) Building your first React application You can create React application with project like create-react-app or can create custom