This is part 1 of a two-part series on implementing a Star Rating widget in React.js
Part 2 can be found here: https://youtu.be/bzp-mO_U0m4
Playlist: https://www.youtube.com/playlist?list=PLdo7hJB0agEm2sP1h9Ch_rrjr3XlGRJU3
Source code: https://in-tech-gration.github.io/WDX-180/curriculum/modules/javascript/frameworks/react/implementing-a-star-rating-widet/assets/star_rating_code.zip
============
DESCRIPTION
============
This video contains just the high level overview and the preparation steps which include
creating a basic Blog listing page from scratch, setting up a backend server for serving
the Blog post data in JSON format and connecting it with our React app.
========
CONTENTS
========
00:00:24 Introduction & what we are going to build
00:02:38 High level overview
00:08:45 Setting up a React project using Vite
00:12:45 Install & configure Tailwind CSS
00:17:20 Convert HTML Tailwind template to React
00:22:50 Create BlogCard Component
00:34:00 Set up Backend JSON server
00:38:15 Fetching JSON data and render them on the Frontend
======================
References and Resources
======================
- Instal Node.js: https://nodejs.org/en
- Configure TailwindCSS using Vite: https://tailwindcss.com/docs/installation/using-vite
- Vite guide: https://vite.dev/guide/
- json-server: https://github.com/typicode/json-server
- VSCode Extension HTML-to-JSX: https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx
- Lucide React: https://lucide.dev
- Tailwind Blog Template: https://www.creative-tim.com/twcomponents/component/grid-blog-page