About

Write your React App easily with Let Me React! This modern boilerplate comes with Vite for lightning-fast development, along with useful packages like react-router-dom, Axios, SweetAlert2, and more pre-configured so that you can dive into writing your code without having to worry about setting up the project.

What's New in v2.0.0

• 🚀 Vite Integration: Lightning-fast development with Vite instead of Create React App
• 📝 TypeScript Support: Choose between JavaScript or TypeScript for your project
• 📦 Package Manager Choice: Support for both npm and yarn
• 🎨 Enhanced UI: Beautiful animated CLI experience
• ⚡ Faster Build Times: Leveraging Vite's superior performance

Prerequisites

This project requires NodeJS (version 20.19 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
10.2.4
v20.19.0

Installation

BEFORE YOU INSTALL: please read the prerequisites

npm install -g let-me-react

After installation, you can use the following command to initialize your project:

let-me-react myproject

Alternatively, you can use npx to directly use let-me-react without installing globally:

npx let-me-react myproject

Command Syntax

let-me-react <project-name> [language] [options]

Arguments:

• <project-name> (required): Name of the React project to create
• [language] (optional): Programming language - javascript or typescript (defaults to javascript)

Options:

• --yarn: Use yarn as package manager
• --npm: Use npm as package manager (default)

Examples

Create a JavaScript project with npm:

let-me-react my-app javascript --npm

Create a TypeScript project with yarn:

let-me-react my-app typescript --yarn

Simple JavaScript project (using defaults):

let-me-react my-app

Alternatively, you can use npx to directly use let-me-react without installing globally:

npx let-me-react myproject

Usage

After initializing your project, you can use the following scripts.

Serving the app

npm run dev

Runs the app in development mode with Vite. Open http://localhost:5173 to view it in the browser. The page will hot reload as you make edits with lightning-fast HMR (Hot Module Replacement).

Running the tests

npm test

Launches the test runner. See the Vite testing documentation for more information.

Building a distribution version

npm run build

Builds the app for production using Vite's optimized build process. Files are saved to the dist folder. The build is minified and optimized for the best performance.

Preview the production build

npm run preview

Serves the production build locally for testing before deployment.

Pre-Configured Plugins & Libraries

• 🎨 Bulma CSS: A modern CSS framework based on Flexbox with beautiful components
• 🍭 SweetAlert2: Beautiful, responsive, customizable popup boxes
• 🌐 Axios: Promise-based HTTP client for making API requests
• 📢 Notistack: Highly customizable notification snackbars
• 🧭 React Router: Declarative routing for React applications
• 🎭 FontAwesome: Vector icons and social logos (all icon sets included)
• 🎬 Animate.css: Cross-browser CSS animations
• 📜 AOS (Animate On Scroll): Smooth scroll animations

Project Structure

Your generated project will have the following structure:

my-app/
├── public/
├── src/
│   ├── components/
│   │   └── NavBar/
│   │       ├── index.jsx (or .tsx)
│   │       └── style.css
│   ├── screens/
│   │   ├── HomePage/
│   │   ├── AboutPage/
│   │   └── LoginPage/
│   ├── App.jsx (or .tsx)
│   ├── main.jsx (or .tsx)
│   └── index.css
├── package.json
└── vite.config.js

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Donations

License

Apache License 2.0 © Suvin Kodituwakku

Contact

Suvin Nimnaka - @tikirimaarie - [email protected] Project Link: https://github.com/Suvink/let-me-react