How to set up React and Sass using Prepros
Tags: css, react, programming, beginners
Published: 2021-08-06 18:08:34

To build my Mystery Club website, I used React and Sass. 

[Link to Code on Github](https://github.com/nass84/mystery-club)
  
## How to set up React and Sass

### Step 1


For detailed instructions you can use:
[Set up React App Documentation](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)


### Quick Start Guide

- In terminal run
```
npx create-react-app my-app
```

```
cd my-app

```
```
npm start
```
  

### Create File Structure

- Set up folder for components, CSS and Images with the following files in:

- components

	- pages

	- basic

- CSS

	- Sass

- images

  


### Create Components

  

*Remember - Components should start with a capital letter*

  
- Remove code from App.js and replace with your code, for example: 
 

```

import './CSS/App.css'

function App() {

const title = 'Mystery Club'

return (

<div className="App">

<div className="content">

<h1> {title} </h1>

</div>

</div>

);

}

 
export default App;

  
  

```

  

- Create new file navbar.js in basic Components folder


*Make sure you have extension - React Standard Style code snippets*

- Type sfc tab and a stateless functional component will appear

  
```

const Navbar = () => {

return (

<nav className="navbar">

<h1>Mystery Club</h1>

<div className="links">

<a href="/">Home</a>

<a href="/create">New Mystery</a>

</div>

</nav>

);

}

export default Navbar;

```

- Import Navbar to App.js

```

import Navbar from './components/basic/navbar';

```

- Add to App.js

  

```

<Navbar />

```

- Create another component in basic component folder

```

const Home = () => {

return (

<div className="home">

<h2>Homepage</h2>

</div>

);

}

export default Home;

```

import it to App.Js, as above

  

## Set Up Sass

For detailed instructions you can use:
[Set up React App Documentation](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app)
  
### Quick Start Guide

- Download Prepros https://prepros.io/downloads

  

### Set Up Project

  

- Create styles.scss in CSS Sass Folder

  

- Drag project folder to Prepros

  

- Click on styles.scss in prepros with process automatically ticked

  

- Click Process File

* Notification saying successful should pop up.
In VS code a new file should appear called styles.css

  

- Link this to app.js

```

import './CSS/styles.css'

```

- Add practice code to scss file

  

```

.title{

color:red;

}

```  

### CSS File Structure

#### @import

  

You can add Variables, Mixins and main styles into different files by importing them

  

- Create new files in the SASS folder

	- variables.scss

	- mixins.scss

- Bring up prepros and remove the auto compile tick box so a new css folder isnt created. Leave the tick in main scss file.

  

- Add mixins and variables into the new files.

 

- import files into styles.scss folder
  

```

@import 'variables';

@import 'mixins';

```

  

- Create variable in variables folder

  

```

$hotPink: #e42491;

```

  

use in styles.scss file to check it is working

```
h1 {
  color: $hotPink;
}
```

**You're done!**


If you need more help the documentation can be found here:
[React Website](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)


[Sass Documentation](https://sass-lang.com/guide)

For great tutorials, i would recommend using [Net Ninja](https://twitter.com/thenetninjauk?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor)


[Net Ninja Tutorial on React](https://www.youtube.com/watch?v=j942wKiXFu8&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d
)

[Net Ninja Tutorial on Sass](https://www.youtube.com/playlist?list=PL4cUxeGkcC9iEwigam3gTjU_7IA3W2WZA)