An automated, interactive script for setting up a customized React application with your preferred frameworks, libraries, and tools—all tailored to your experience level. Boost your productivity and jumpstart your React projects with ease!
- Interactive CLI: Guides you through setting up a React project with options suitable for both beginners and advanced users.
- Customizable Configuration: Choose from popular frameworks like Next.js, Remix, Gatsby, Vite, or Create React App.
- TypeScript Support: Optionally include TypeScript for enhanced code quality and error checking.
- UI Libraries: Integrate UI frameworks like Tailwind CSS, Chakra UI, Material-UI, Ant Design, or styled-components.
- State Management: Select from Redux Toolkit, Zustand, Jotai, Recoil, MobX, XState, or none.
- Database/ORM Integration: Set up Prisma, Firebase, Mongoose, or SQLite as per your project needs.
- GraphQL and Authentication: Optionally configure GraphQL clients (Apollo, Relay, urql) and authentication providers (Auth0, Firebase Auth, NextAuth.js).
- Testing Frameworks: Include Jest, Vitest, or Cypress for robust testing.
- Additional Tools: Automatically installs helpful packages like Axios, React Hook Form, Zod, React Query, Date-fns, React Icons, and Lodash.
- Development Enhancements: Sets up ESLint, Prettier, Husky, and lint-staged for code quality and consistency.
- Optional Add-ons: Supports Storybook, internationalization (i18n) with react-i18next, PWA capabilities, and CI/CD with GitHub Actions.
- 🚀 Rapid Setup: Automate the tedious setup process and get straight to coding.
- 👩💻 Beginner-Friendly: Provides detailed explanations and guides for newcomers.
- 🎛️ Highly Customizable: Tailor your React project to your specific needs and preferences.
- 🔧 Best Practices: Ensures best practices are followed with proper tooling and configurations.
- 💡 Stay Updated: Always uses the latest versions of packages with
@latest.
# Clone the repository
git clone https://github.com/hxhippy/hxreact.git
# Navigate into the directory
cd hxreact-setup
# Make the script executable
chmod +x hxreact.sh# Run the script
./hxreact.shFollow the interactive prompts to set up your React application.
- Features
- Why Choose HxReact?
- Installation
- Usage
- Options and Customizations
- Generated Project Structure
- Contributing
- License
- Connect with Us
- Support Us
- Acknowledgements
HxReact offers a plethora of options to customize your React setup:
- Frameworks: Next.js, Remix, Gatsby, Vite + React, Create React App.
- TypeScript: Option to include TypeScript support.
- UI Libraries: Tailwind CSS, Chakra UI, Material-UI, Ant Design, styled-components.
- State Management: Redux Toolkit, Zustand, Jotai, Recoil, MobX, XState.
- Database/ORM: Prisma, Firebase, Mongoose, SQLite.
- GraphQL Clients: Apollo Client, Relay, urql.
- Authentication Providers: Auth0, Firebase Authentication, NextAuth.js.
- Testing Frameworks: Jest + React Testing Library, Vitest, Cypress.
- Additional Tools: Axios, React Hook Form, Zod, React Query, Date-fns, React Icons, Lodash.
- Development Tools: ESLint, Prettier, Husky, lint-staged.
- Optional Add-ons: Storybook, react-i18next (i18n), PWA capabilities, GitHub Actions for CI/CD.
Your project will have a clean and organized structure:
your-project-name/
├── .github/workflows/
│ └── ci.yml # CI/CD configuration
├── node_modules/
├── public/
│ └── locales/ # i18n translations
├── src/
│ ├── components/
│ ├── styles/
│ │ └── globals.css
│ ├── App.js / App.tsx
│ ├── index.js / index.tsx
│ └── ...
├── .env
├── .gitignore
├── LICENSE
├── NOTICE
├── README.md
├── package.json
└── ...
We welcome contributions from the community! Please read our Contributing Guidelines before submitting a pull request.
This project is licensed under the Apache License 2.0. See the LICENSE file for details.
Attribution Notice: Users of this software must preserve the NOTICE file, which includes attribution to the original author and associated entities.
- Creator: @HxHippy on X (Twitter)
- Website: hxhippy.com
- Company: Kief Studio
- Affiliation: Advisor of TRaViS - Threat Reconnaissance and Vulnerability Intelligence System
If you find this project helpful, please consider supporting us:
- Buy Me a Coffee: https://www.buymeacoffee.com/hxhippy
- Star this Repository: ⭐️ at the top right corner of this page.
- Share with Others: Spread the word on social media and among your developer friends.
Ever heard of TRaViS? It's the Threat Reconnaissance and Vulnerability Intelligence System—a next-gen External Attack Surface Management (EASM) tool.
Imagine having a personal security assistant watching over your projects, helping you find vulnerabilities before the bad guys do. Sounds cool, right?
- Check it out here: https://travisasm.com?ref=hxreact
- Join the Affiliate Program: Earn by sharing TRaViS with others! https://travisasm.com/affiliate-marketing-program
- HxHippy: For creating this comprehensive setup script.
- Kief Studio: Supporting company behind the development.
- TRaViS: For their cutting-edge security solutions.
- Open-Source Community: For the amazing tools and libraries utilized in this project.
If you like HxReact, please consider sharing it with others who might find it useful.
- Tweet About It: Click here to share on X
- Share on LinkedIn: Share on LinkedIn
Boost your React development workflow today with HxReact!
Feel free to open an issue or submit a pull request if you have any questions or suggestions.
- FAQ: Frequently Asked Questions are answered in the FAQ section.
For any inquiries or feedback, you can reach out to:
- Email: [email protected]
- X: @HxHippy
HxReact is designed to simplify and accelerate your React development process. Whether you're a beginner taking your first steps into the world of React or an experienced developer looking to streamline your workflow, HxReact has got you covered.
Thank you for using HxReact! Happy Coding! 🎉
This README was generated with ❤️ by HxHippy.