My First React Frontend Project using Sass!

A very Happy New Year everyone 🎉! I am Harshit 👋. This is my first article on the Dev Community and the first one ever. I had been meaning to start writing and when's better than first day of the year 💯! Today I am gonna share my first React Frontend Project and what did I learn while making it.

What?

I tried building the Chirp landing page challenge available on Codewell.cc. I used ReactJS as the frontend framework and used Sass for styling (Sass is a preprocessor for CSS which makes it easier to write CSS with features like nested styling, mixins, functions and lots more). It was a very simple landing page project - good for practicing concepts like flexbox and grid 🍱.

How?

• I started with created a project with create-react-app.

npx create-react-app chirp-landing-page

• I installed Sass. React-scripts supports .scss files and you can use them directly into your components without any need to convert them into .css file first. Just install sass and you are good to go.

cd chirp-landing-page
npm install sass

• This is my file structure for the src folder.

📦src
 ┣ 📂assets
 ┣ 📂components
 ┣ 📂partials
 ┣ 📜App.js
 ┣ 📜base.scss
 ┗ 📜index.js

The base.scss consisted resets, import for fonts and some basic styles common to a lot of folders. The partials folder consists of mixins, variables and breakpoints which can be used in any .scss file by using @use. The @use namespaces the variables, mixins and functions within the file and thus avoiding name collision. You can also give it an alias or use * to skip the namespace and use them directly.

@use '../partials/variables' as v;

.text{
   color: v.$red;
}

• Another great thing about Sass is that it makes media queries a lot easier to use! You can define a map with key value pairs for the sizes you want to add media queries to.

$breakpoints:('small':'768px','medium':'960px','large':'1200px');

Then you can define mixins using these breakpoints.

@mixin breakpoint-up($size){
    @media (min-width:map-get($breakpoints,$size)){
        @content;
    }
}
@mixin breakpoint-down($size){
    @media (max-width:map-get($breakpoints,$size)){
        @content;
    }
}

Now, where ever you need breakpoints, just bring in the _breakpoints.scss and use it within the tag you want to style using @include.

@use '../partials/breakpoints';

.grid{
    display: grid;
    grid-template-columns: 1fr;

    @include breakpoint-up(medium){
        grid-template-columns: repeat(2,1fr);
    }
}

Its so much easier and manageable than write media queries and the end of one big CSS file.

• You can use styles in your components in 2 ways:

1.You can import the styles directly and use them as normal css/scss classes.

import './Sample.scss';

const Sample = () => {
    return (
        <div className='container'>
            <h1 className='title'>Hi 👋 Dev Community!</h1>
        </div>
    )
}

export default Sample

2.Another way is by using the modules. For this you have to name your .scss files in a specific way- *.module.scss.(where * is the name of your file. Then import the file as

import classes from './Sample.module.scss';

The classes is an object returned by the file. Here, the keys are the name of your classes defined in the file. You can use them as

 <div className={classes.container}>
      <h1 className={classes.title}>Hi 👋 Dev Community!</h1>
 </div>

When the file get rendered, create-react-app will generate a unique class name for this class preventing name collisions and making your components more stand alone.

Finishing Up

I completed the project and created the build version using the npm run build command.
You can check out the project here
Source code: Chirp Landing Page

PS: This was my first article ever. If I made any mistakes (the code or the markdown) please let me know. I would love to hear from all the amazing developers on this platform and grow with them. Thankyou!