Introduction

These days when you create a frontend project you will likely use one of the modern JavaScript frameworks, rather than regular HTML, CSS, or JavaScript.

In this lesson we’ll look at using regular CSS and Sass in a React app, currently the most widely used JavaScript framework.

The next three lessons will cover:

  • The React Bootstrap Library
  • CSS Modules
  • Styled Components

Cloning or downloading the example code

After cloning or downloading the example code from the repos, run the following commands in your command line or terminal:

npm install  
npm run start

The first command will install all packages listed in the packages.json file.
The second command will start the project on a local server, on port 3000 if nothing is already running on that port.

Introduction to React

Before we can look at the different ways of styling a React app, we need a quick overview of how React works.

In the following video we’ll look at how to create a new React app using npx, go over the structure of a React app and create a few basic components.

Video lesson

Lesson Task

Brief

In this task you will create and style your first React app.

Download the XD file from this repo.

Process

  • Use Create React App to make a React app for the design.
  • You can focus only on the mobile size.
  • Make sure the footer is sticky.
  • Use either Sass or regular CSS to style the project.

Example answer

You can find an example solution in the answer branch of the repo.

Resources

Tags: