The latest articles on DEV Community by Bereket G (@beki78). https://dev.to/beki78 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2675705%2F78a3de85-542a-40fb-a3f2-68f6f70d210e.png https://dev.to/beki78 en Bereket G Wed, 08 Jan 2025 13:47:49 +0000 https://dev.to/beki78/reactnext-folder-generator-with-jsts-simplify-your-project-setup-with-react-cli-builder-4436 https://dev.to/beki78/reactnext-folder-generator-with-jsts-simplify-your-project-setup-with-react-cli-builder-4436 <p>Are you tired of manually creating folder structures for your React or Next.js projects? Do you find yourself repeating the same setup steps every time? Say hello to react-cli-builder, a CLI tool that will save you time and effort by automating folder generation for your projects.<br> 🚀 Overview</p> <p>react-cli-builder is a developer-friendly CLI tool designed to generate boilerplate folders for React and Next.js projects. It supports both JavaScript and TypeScript, offering complete flexibility for developers. Whether you're working on a simple app or a large-scale project, this tool ensures you have a clean and customizable folder structure to start with.<br> 🔧 Features</p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>1. **Framework Support**: Works seamlessly with React.js and Next.js. Language Support: Supports both TypeScript and JavaScript. 2. **Directory Generation**: Automatically creates essential directories like: </code></pre> </div> <ul> <li>api -auth -components -context -hooks -libs -pages -redux -redux-saga -store -utils</li> <li> <strong>State Management</strong>: Generates folders for Context API, Zustand, Redux, and Redux-Saga.</li> </ul> <p>📦 Installation</p> <p>To get started, install the package using npm:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> npm install react-cli-builder </code></pre> </div> <p>Once installed, use the CLI commands to generate folders:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npx create-[options] </code></pre> </div> <h2> Why Use react-cli-builder? </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code><strong>Saves Time</strong>: Automates repetitive tasks and speeds up project setup.<br> <strong>Customizable</strong>: Generates boilerplate files that you can modify as needed.<br> <strong>Consistency</strong>: Ensures a uniform folder structure across all your projects.<br> <strong>Flexibility</strong>: Supports both React and Next.js, in JavaScript or TypeScript.<br> </code></pre> </div> <h2> <br> <br> <br> 🌟 Conclusion<br> </h2> <p>Whether you're a beginner or an experienced developer, react-cli-builder can streamline your workflow by automating the creation of essential folder structures for your React and Next.js projects. It’s a must-have tool for anyone looking to boost productivity and maintain a clean, scalable project setup.</p> <p>Try it out today, and let us know how it works for you! 🚀<br> 🔗 Useful Links:</p> <p>npm Package: react-cli-builder on npm <a href="https://www.npmjs.com/package/react-cli-builder" rel="noopener noreferrer"></a></p> <p>What are you waiting for? Simplify your project setup with react-cli-builder!</p>