How to plan a React project? For beginners
Tags: react, beginners, webdev, productivity
Published: 2021-11-14 20:35:25

**STEP 1: CONCEPT**
**STEP 2: APPROACH**
**STEP 3: ORGANIZE**
**STEP 4: BUILD**
**STEP 5: INSPECT**
**STEP 6: REFLECT**

...

**WHY DO YOU NEED A PLAN?**

First and foremost, you need a strategy to begin with a project to ***set the direction*** and ***establish the priorities*** for the project.
It will ***help*** you (and others if you work on a group project) to make it ***clear what to work on*** and ***easy to communicate*** with clients (and colleagues/boss).

Planning will give you ***control***, a ***timeline***, ***reassurance***, ***efficiency***, ***productivity***, ***progress***, ***flexibility*** and of course the ***desired results***.

The fact remains that a lot of things are beyond human control, but for those things that ***are controllable***, planning ***ensures you more control*** over the project, which leads to a better result !

**Don't underestimate planning!**


**so START PLANNING !**

**STEP 1: CONCEPT** (*You can skip this part if you already got a concept*)
So before you actually start building, you should to think about what exactly should be built. 
Start brainstorming about some ideas 

**STEP 2: APPROACH**
***Write down how you will be working*** and if you will ***use certain tools to help*** with that. 
Like Todoist for example. See image.
**TODOIST** https://todoist.com/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3lyqixsz7004nyeh9iv.jpg)
In the Todoist you can for example start with the following structure.
**Backlog, in progress, weekly planning and documents**.

**Backlog & in progress**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umy7vcj1jqegjmgux1xe.JPG)

**Weekly planning**
Add the documents as a comment to keep track.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36siowwwldb80na2n01k.JPG)

**Documents**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivlrvclfibn57yo3qwvb.JPG)

Once you've done that, you can continue with the components.
The most important thing in React are the components to start building the structure.
Therefore, it is very important to **sketch the structure of the components**. 
As you can see on the following image.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lg4xjnets67j166m1gx.JPG)

After creating a clear structure on the Todoist and the components, you start with making it **visual on for example FIGMA**(wireframe).
Here you can start creating with the components you just thought of.
As you can see on the following image for example.
**FIGMA** https://www.figma.com/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqibg5drofpdy9p04e2d.JPG)

After figuring that out, it would also help to think about what techniques you would like to use and therefore which packages to use and write them down as well on the Todoist.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crcdzr6qnqiwrnnvbjqr.JPG)

And of course what's going to be your Git strategy.


**STEP 3: ORGANIZE**
Once you got the approach figured out, it's time to start organizing what has been thought of for the project.
If it's a group project, you can make it clear on who does what and when.
Even when you are alone, you can **write down when and what you will do**.
Here you can find an example of a weekly planning.
**WEEK1**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46xqrew8xgoznzauq29a.JPG)
Which you can add as a comment in the Todoist.
Also plan for time to work on unforseen issues
Besides this weekly planning it's very important to **start the day with a short 5min meeting on what you will do that day** and if there are problems, try to fix them if you don't manage to then try to fix it together or ask help!

**Communication is key !** 

Focus should also be on building itself, therefore, think about the ***folder structure*** as well. (this will depend on what kind of project you have).

**STEP 4: BUILD**
After preparing so well in advance, you will be so eager to start coding on your project !
Start with everything that was talked about.
**Enjoy the journey and have fun!**

**STEP 5: INSPECT**
After building the whole project, it's always important to ***take some time to inspect*** the whole project. Adjust where needed.


**STEP 6: REFLECT**
Once you're done inspecting the pages, it's also important to take time to reflect on the project.
To ***reflect on what went well and what went wrong**, ***to avoid making those mistakes on the next project*** and ***using what went well on the new project*** so you keep growing and improving.

**Hopefully this will help you out when planning your next or current project !**

***Don't every forget to have fun, be curious and be eager to learn !***