React Js Atomic-design helper Script.
Hi, my name is Ronnie and I’m a software developer with a background in Front-end React Js/native libraries and QA automation Python-selenium framework.
I’m very passionate about the reusability/scalability that offers you the atomic design pattern in Front-end development. I built a bash script tool to help you with the components creation tasks, you can think of it as an “automating the boring stuff” purpose.
The script was developed for Linux-based operating systems, and please feel free to use it and also make modifications at your convenience.
How does it work?
Step1: create a new react project.
Step2: Place a copy of the “atomic” script file in the project root directory.
Step3: Grant execution permissions to the file, so you can run it from the command line.
Step4: Create a new file called “atomic-list” without extensions in the project root directory, this filename is the one the script will read when executing it. (it can be renamed inside the script file if you want, Line#16).
Step5: before adding some content to the atomic-list file, let’s consider the following syntax convention:
Step6: write the components you want to create, according to the syntax convention, it’s not mandatory to have an order, but I’ll recommend having one, check this image with 3 different examples of how to write inside the atomic-list file, also this atomic-list file can be helpful and you can think of it as a “documentation” or fast “control/referencing” file for all your created components.
IMPORTANT NOTE: please let a new line at the end of your last component.
Step7: Let’s generate the components running the following script syntax in the command line and pressing enter:
The script will create a “components” folder inside your “src” directory, this is a structure convention that I normally use, but feel free to adjust it in the script at convenience:
# src
# |___components
# |## |__pages
# |##### |__ (…) all the created pages
# |
# |___ui
#### |____atoms
#### | ### |__ (…) all the created atoms
#### |____molecules
#### | ### |__ (…) all the created molecules
#### |____organisms
#### | ### |__ (…) all the created organisms
Every: Page, ui/atoms, ui/molecules, ui/organisms folder will have an index.js modules collector file, so when you need to import them then will facilitate a short syntax:
import { QuotationNew, QuotationSummary } from ‘./components/pages’;
…code…
…
render(
<> // fragment
...<QuotationNew />
…<QuotationNew />
</>
)
Every created component is generated with a default template, so you can test immediately with React if it’s rendering properly.
Step8. Import them in your App.js file just to test they’re already working as expected, then run your app from the command line:
Now you’ll be able to see them in the UI with their default names:
Once you confirm they were created properly, you can start with editing all the created components.
Step8: If need to create more components, just add them to the “atomic-list” file and run the script in the command line as many times as you require, the script won’t override the already created ones, just will create the new ones and will update the index.js modules collector file of this directories:
Page, ui/atoms, ui/molecules, ui/organisms
you can check this with the output message in the terminal:
Final notes about the script
- It can be found on my Github repository: https://github.com/ronniebm/script_configurators/blob/master/atomic
2. It has a very friendly structure so you can go ahead and modify all according to your needs, I really hope it helps you:
Thanks for reading me, and thanks to all React Js community.
