DEV Community

Cover image for How to set up React and Sass using Prepros
nass84
nass84

Posted on

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
Enter fullscreen mode Exit fullscreen mode
cd my-app

Enter fullscreen mode Exit fullscreen mode
npm start
Enter fullscreen mode Exit fullscreen mode

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;




Enter fullscreen mode Exit fullscreen mode
  • 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;

Enter fullscreen mode Exit fullscreen mode
  • Import Navbar to App.js

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

Enter fullscreen mode Exit fullscreen mode
  • Add to App.js

<Navbar />

Enter fullscreen mode Exit fullscreen mode
  • Create another component in basic component folder

const Home = () => {

return (

<div className="home">

<h2>Homepage</h2>

</div>

);

}

export default Home;

Enter fullscreen mode Exit fullscreen mode

import it to App.Js, as above

Set Up Sass

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

Quick Start Guide

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'

Enter fullscreen mode Exit fullscreen mode
  • Add practice code to scss file

.title{

color:red;

}

Enter fullscreen mode Exit fullscreen mode

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';

Enter fullscreen mode Exit fullscreen mode
  • Create variable in variables folder

$hotPink: #e42491;

Enter fullscreen mode Exit fullscreen mode

use in styles.scss file to check it is working

h1 {
  color: $hotPink;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)