Skip to main content

Posts

Showing posts with the label React Hooks

React Ecosystem: Static Generation with Next.js and React

In the previous post , We created a BlogPost application rendering content on server-side with Next.js . We will be changing the same application to use SSG (Static Generation) capability of Next.js. What will we create and which Next.js functions will we use? We will create an application which will have index page to list all the available blog links and statically generated blog posts. We will use getStaticProps and getStaticPaths functions from Next.js. getStaticProps function is called by Next.js at build time and pre-renders the page. getStaticPaths function is also called by Next.js at build time. If you are using getStaticProps and there are dynamic paths then you define those in getStaticPaths Update index.tsx import React from 'react'; import { GetStaticProps, GetStaticPropsContext } from 'next'; import BloggerService from '../service/BloggerService'; import styles from '../App.module.css' /* Line 1*/ interface IndexPageProps { bl

React Ecosystem: Server-side rendering with Next.js

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

React Ecosystem: State management with Redux

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

React Ecosystem: Building BlogPost application with React and React Hooks

Building a Blog Post application Let's create a blog post application. It will have below features: Option to search blog posts. Option to list blog posts. Option to show blog post. Create a new project with npx create-react-app react-blog-posts --template typescript . Create BlogPosts.tsx component under src/components folder and IBlogPost model under src/models . import React from 'react'; import IBlogPost from '../models/IBlogPost'; interface IBlogPostsProps { posts: Array<IBlogPost> } function BlogPosts(props: IBlogPostsProps) { return ( <div className="blog-container"> <ul className="blog-posts"> { props.posts.map(post => <li key={post.id}>{post.title}</li>) } </ul> </div> ); } export default BlogPosts; interface IBlogPost { id: number title: string content: string author: string postedOn: string tags: string[]