# If you use github cli <gh>
gh repo create <project-name> --public --template m3rashid/react-starter
# Else you can follow these steps
- Go to https://github.com/m3rashid/react-starter
- Click on the "use this template button" button then on the "Create a new repository" button
- Follow the regular github flow to clone the repo
# Go inside the directory
cd <project-name>
# Install dependencies
yarn install
# Start the development server
yarn startThis is a starter template for React projects. It includes the following:
| Package | Use Case |
|---|---|
| React | Frontend framework to build User Interfaces (This project uses the client part only) |
| React Dom | React DOM |
| React Router Dom | React Router |
| React Scripts | React Scripts |
| Recoil | Global State management Library: Has a useState like API |
| Ant Design | UI library: Has a ton of built in components to ease out the frontend development (UI/UX) work |
| Tailwind CSS | CSS library: No hassle of writing absurdly large css files |
| Ant Design Icons | Icon library consistent with Ant Design Specs |
| RJSF Core | JSON Schema Form library |
| RJSF Ant Design | Ant Design theme for RJSF |
| RJSF Validator | JSON Schema validator for RJSF |
| Axios | HTTP client: Makes sending HTTP requests easy |
| DayJs | Date and Time library |
| Lodash Debounce | Lodash Debounce library: Consistent Delay for your function |
Other Developer Tooling and Configuration:
| Package | Use Case |
|---|---|
| Husky | Git Hooks: Adding actions on various git commands (eg: commit, push etc.), very useful in maintaining consistent code formatting |
| EsLint | Linting: Maintain a consistent styling, code error guidelines etc. |
| Prettier | Code Formatting: Format code |
| Editor Config | Editor Configuration: Code formatter works consistent across all IDEs |
| Post CSS | CSS Processing |
| Auto Prefixer | parses your CSS and adds vendor prefixes |
| Typescript | Typescript: Sensible developer tooling (autocomplete and suggestions) to ease out development work |
Recommended VsCode Extensions:
| Extension | Use Case |
|---|---|
| Tailwindcss | Tailwind CSS IntelliSense: Gives auto-complete and suggestions on your Tailwindcss classes |
| Prettier | Code Formatter: Format on save actions and prettier integrations |
| EsLint | Linting: Lint/Format on save and integration |
| Import Cost | Display import size: Show size of your imported libraries |
| Error Lens | Display errors in line: No need to hover on error to find out what it is |
| Better Comments | Highlights important comments: Highlights comments with specific keywords like (Todo, error etc) |
| Git Graph | Git Graph: Show git network like graph of your git workflow |
| Git Lens | Git Lens |
| JS Debug | JavaScript Debug |
| Color Highlight | Color Highlight |
| Code Spell Checker | Checking spelling mistakes in code |
| JS Debug Companion | JavaScript Debug Companion |