How to plan a React project? For beginners

Jonathan — Sun, 14 Nov 2021 20:35:25 +0000

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/

In the Todoist you can for example start with the following structure.
Backlog, in progress, weekly planning and documents.

Backlog & in progress

Weekly planning
Add the documents as a comment to keep track.

Documents

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.

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/

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.

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

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 !

Forem: Jonathan

How to plan a React project? For beginners