How to set up React and Sass using Prepros

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

Link to Code on Github

How to set up React and Sass

Step 1

For detailed instructions you can use:
Set up React App Documentation

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

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

Sass Documentation

For great tutorials, i would recommend using Net Ninja

Net Ninja Tutorial on React

Net Ninja Tutorial on Sass