React Chess - Part 1 / 4

Getting the board layout and pieces right

This tutorial has been split into 4 parts. This is part 1 of the series. In this part, we will create a chess board with pieces in React.

Learning Objectives - get you familiar with the following

  • Nano React App and Parcel
  • Styled Components
  • Color Palette using coolors.co site
  • React Functional Components
  • Writing Styles
  • Writing Classes in React
  • Using a class to render UI
  • useState react hooks
  • Using lists and keys in React
  • Dynamic Rendering of Styled Components using Props
  • Custom icons using Font Awesome
  • Conditional Rendering in React
  • DRY as a software engineering principle
  • Conditional Rendering in React