React Multiple Items Carousel with Server Side Rendering Implementation Part two
With part two of this article I am going to show you how you can create your own Carousel component using React that supports multiple items and server-side rendering with the implementation in code.
If you didn’t read our part one, you can find it.
React Multiple Items Carousel with Server Side Rendering Implementation Part one
Introduction
For this tutorial, I have made two different versions of the Carousel, first version is the one that we are building in this post with basic functionality that’s easier to understand and beginner friendly.
For the second version, it is made as an npm package which is an improved version of the first version that is reusable and allows customization with more advanced functionality. You can find here and here.
Recap
At the part one of the article, we decided that we will be using “flex-basis” to render our components on the server-side, and replace the “flex-basis” with “width” once we entered the browser environment and our JavaScript has been downloaded.
Implementation
For the sake of simplicity, i will be building the component using Nextjs which is a React framework that server-side renders you application automatically. If you know React, you will be able to follow along as we will be using pure react almost 100%. (You can also use create-react-app)
As this article will be about building the Carousel so I will skip the boilerplate for now, you can find it at github.com/yizhuang for you to get started. Or you can just simply create a component called Carousel.js in your create-react-app.
In Carousel.js:
