leo-henrique / leo-react-app

Development environment in React for the web using Vite.

leo-react-app

⚠️ 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:

• React
• Vite - frontend development environment
  • @vitejs/plugin-react - official Vite plugin for React (includes features like react-refresh and JSX runtime, for example)
  • vite-plugin-svgr - loader to turn SVGs into React components (based on SVGR)
• leo-reset.css - redefines most styles and sets CSS standards

With SASS:

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

With styled-components:

• styled-components - just the library itself

🚀 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

• In public, include your application's favicons. I like to use Real Favicon Generator to generate my favicons.
• In index.html, change the metadata according to your application. I assume you will also use some minimal metadata from the Open Graph protocol.
  • Only use / instead of public/ to reference static files in index.html with Vite.

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