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.