React Components: Wire-frame to a webpage
I recently learned Reactjs and I found the idea of components to be convenient and helpful for structuring the frontend of a website. As part of my react lessons, I had to create a project using the concepts I have learned and while working on the project I wanted to share how I managed to develop a page from wireframe to an actual web page using react components.
The project I am working on is a project management application with multiple models and the model I am going to work with for this particular blog purpose is an employee show page. An employee belongs to an employer and can be assigned to tasks on multiple projects.
The employee show page will then contain information about the employee, manager, coworkers, and list of projects and tasks that the employee is working on currently. A task has a Name, Total Working hours, Total Working Done as an attribute. The employee will also be able to report on the hours of work he/she puts on a specific task.
Before working on the components on React, I first made a wireframe on Adobe Illustrator highlighting the general look and structure of the page.
While designing the wireframe I made a determination on how the page will be divided into components in react.
- Employee Component — This container component will the show page for the employee page. It will contain three main container components; the navbar, sidebar and project list.
2. Navbar Component — I created the navbar in a separate component because I am going to use it in all other pages.
3. Sidebar Component — This component will contain the employee and manager name. In addition, it will contain the Coworkers component that is going to display all the coworkers.
4. Coworkers Component — This component will iterate over an array of coworkers and list them within the sidebar component.
5. Projects List Component — This is the main container component that will house all the projects currently the employee is working on. The project component will be iterated over this component.
6. Project Component — contains information about a particular project and will contain the tasklist container component.
7. Tasklist Component — This component will house the core component Task. At this point, I decided to list the tasks on a table and since the top bar (header) of a table does not need to be iterated, it is placed in this component and only the iterable part of the table that is the columns will be stored in the task component.
8. Task — This the innermost component in the employee show page. The component will iterate over the tasks of a given project and will fit the details as a table column. The form where the employee will report his/her progress will be presented in this component. Progress report for each task will also be rendered on this component.
After fitting all the components together bellow is the employee show page will all the details about the employee and projects.
