Build Game Website With ReactJs and Typescript - Styling Components | Tutorial | Part C

This is the third part of a series Building Game Website with React, Typescript and Styled Components.

First part: https://youtu.be/ZW1qb9kYjGo
Second part: https://youtu.be/-EsK-3YUNrc

In this video, we will be styling our React components with Styled Components, declare custom types in Typescript and config Webpack to load static assets such as svg files

API reference: https://www.freetogame.com/api-doc

Code: https://github.com/dmngu9/free-game

#javascript #reactjs #typescript #styledcomponents #react #webdevelopment #reacthooks #liftandshiftdev #reacthoc #css #es6 #ts #js #webpack #webpackdevserver #babel #eslint #prettier #svg #mediaquery

Support the channel: paypal.me/liftandshiftdev

0:00 - Introduction
1:50 - Define global styles and themes
5:15 - Create global styles component
9:50 - Style list view component
16:30 - Style card view component
26:50 - Adding icon svg
28:05 - Config Webpack to load svg files
31:30 - Declare custom types for svg files
33:10 - Render icons in card view component
39:00 - How styled-components load CSS
41:20 - Responsive design styling with media queries

Видео Build Game Website With ReactJs and Typescript - Styling Components | Tutorial | Part C канала Lift And Shift Dev