My First React Frontend Project using Sass!
Tags: react, javascript, webdev, beginners
Published: 2022-01-01 14:55:35

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](https://www.codewell.cc/challenges/chirp-landing-page--60fc1e36a383e41090a3c71c). 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.

```css
@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.

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

Then you can define mixins using these breakpoints.

```scss
@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`.

```scss
@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.

```javascript
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
```javascript
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
```html
 <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](https://determined-snyder-32af76.netlify.app)
Source code: [Chirp Landing Page](https://github.com/hgupta12/Chirp-landing-page-codewell)


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!