During my last 2 months at Flatiron, I was learning about React and its ability to easily create a template for creating a webpage. When it came time to create my final project, I had chosen to design my components with class components as opposed to functional components. While I was creating my project, I really did not know the difference between class and functional components.
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py2q0594o6qf463l0rfr.png)
This is my project from Flatiron: as you can see the css is the default code written up when running react-create-app. I'll be looking into making this application cleaner and more personalized.
When I was making the project, I used a template that one of my instructors had posted that made use of class components. I followed this template, but now that I am looking to polish and add to my projects I find it rather difficult to format and stylize my web application using CSS. Class components are easy to use, but as I have been doing research on fleshing out web page applications, I realized that using a class component is good for functionality, but ends up having a very barebones design. Every tutorial and blog post that I have looked at have functional components as their component template.
In addition, since my React project was based in Redux, I never had a real chance to create a pure React app that incorporates a backend. As a result, making changes to my project to add a navigation bar or sidebar has been difficult. It may just be my lack of experience that has made me unable to see the solution to my problem, but I found that it would be better to begin a new project, and while I don't have a clear idea of what I want to do with it, I figured I'd use it to learn how to code strictly in React, especially since functional components are standard with regards to web development.
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl2ygyrxofe49pkntej4.png)
This is my new project that will strictly React and will not use Redux. It's much more visually appealing compared to the default css given by React.
(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plfqjx6ndfxz9f608aui.png)
I managed to build in a navigation bar using react-icons which can be found here: https://react-icons.github.io/react-icons/icons?name=io5.
My idea for this project will either be a replication of my Flatiron project without the use of Redux, or (if I can change the format and styling of my original project) try to create one of my older Rails-based project using React.
Top comments (0)