How To Build a React Directory Structure Generator CLI Tool With Bash

I had quite a journey learning bash scripting and sharing what I’ve learned with you in the process, from basic commands to bash files and conditionals (I’ll share the list of these tutorial at the end of this thread below).

There are a lot still that we can learn but I’ll dedicate an intermediate series for this separate from the first one. Currently, It’s time to create a project .. a real world project that can be used in actual situations. That’s why I’ve learned bash in the first place, simply to automate tasks and be more productive.

The project that I’ll be building is a React directory structure generator following the atomic pattern. Each part of the project will build a functional tool and then we will pile up feature and make some refactoring each time.

After this video, you will be able to run the following commands:

• structg.sh generate atomic generates the new folder structure
• structg.sh generate <page|atom|molecule|organism> generates new component & style file in its respective folder and adds boilerplate code in the component file.

Check out previous bash tutorials:

• Bash commands for beginners
• Bash commands chaining, redirecting and nesting
• Bash shell file walk-through
• Bash scripting: passing arguments & user input
• Bash scripting: variables & string manipulation
• Bash scripting: If conditions