/leo-react-app

Development environment in React for the web using Vite.

Primary LanguageSCSSMIT LicenseMIT

leo-react-app

Screenshot of the Leo React App homepage
React logo SASS logo SASS logo styled-components logo

en pt-br

⚠️ Warning

This readme was written primarily with Google Translate. I'll be happy if you make an exception for any grammatical errors!

🔎 Introduction

leo-react-app it is a template / development environment in React for the web using Vite.

I like to use the term boilerplate to refer to leo-react-app because it is intended to provide a minimal but rarely unnecessary or wasteful folder and command structure in a React-based front-end app.

💻 Resources

You can use two leo-react-app options. One is with SASS and the other with styled-components. Both have the following features:

With SASS:

  • SASS - JS implementation of the SASS preprocessor
  • RFS - automatic resizing of font sizes and spacing with SASS

With styled-components:

🚀 Get Started

This repository uses the npm to manage third-party packages. Perform the Installation of Node.js which already has npm as default package manager.

Cloning the repository

Use degit to clone leo-react-app. You can mention the name you want for your project's root folder by specifying only a space after the command or use the command inside your root folder.

If you opted for SASS:

npx degit leo-henrique/leo-react-app#sass

If you opted for styled-components (no additional HTML, just minimal structure):

npx degit leo-henrique/leo-react-app#styled-components

Install the dependencies

npm install

Start the development server

A new tab localhost:5173 will open in your browser.

npm start

⚙️ Configure the boilerplate for your application

With SASS:

  • In src/scss/utilities/_variables.scss, change the UI of your application.
    • $rfs-rem-value is based on the 10px value of font size root, as used in leo-css-reset.

With styled-components:

  • In src/styles/theme.js, change your application's UI.
  • In src/styles/mediaQueries.js, change the breakpoints if you want.

👨‍💻 Scripts

  • npm start - starts the development server and opens it in your browser.
  • npm run build - minifies the app for production.
  • npm run preview - locally view your production in your browser.
  • npm run deploy - deploy your application on GitHub according to the "dist" folder