This readme was written primarily with Google Translate. I'll be happy if you make an exception for any grammatical errors!
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.
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
- SASS - JS implementation of the SASS preprocessor
- RFS - automatic resizing of font sizes and spacing with SASS
- styled-components - just the library itself
This repository uses the npm to manage third-party packages. Perform the Installation of Node.js which already has npm as default package manager.
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
npm install
A new tab localhost:5173 will open in your browser.
npm start
- 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 ofpublic/
to reference static files in index.html with Vite.
- Only use
- 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.
- In
src/styles/theme.js
, change your application's UI. - In
src/styles/mediaQueries.js
, change the breakpoints if you want.
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