React Landing Page

Community feedback

• 

  P

  Mikhail Lorenzo Aniel•230

  @lorenzoanielPosted over 1 year ago

  Hi Adam thanks for reaching out,

  Looks like you have a bit more experience in terms of using component libraries and react to complete this project and so I will have to be a little more detailed with my analysis for your solution.

  • When making components in react try to make things as modular as possible, I noticed you decided to summarize the skills section all under 'skill', if we look at the design file notice how the skills are separated into noticeable components: icon, skill name, skill score as well as the corresponding color scheme for that particular skill. Instead of combining the individual skills with its parent grid container it is best to separate it as its own sub component, this way incase there are new design changes it will be easy to isolate or say client wants new functionality that is drastically different from original design you can simply remove that sub component and plug in a different one into your {mainSkillItems.map((item, index) => ( providing the same data but different look or possible different data coming from hypothetical API into new component, either way makes for easier development for you and other developers looking to add to your code.

  • kudos for using theme provider. If you have not experimented on this, for your next project try multiple theme providers, one main one for general styles and maybe one for a subcomponent, for this solution an example would be if you turned skill items into its own subcomponent and passed a theme provider which applies the proper color scheme to a particular skill, advantages to this is that incase client wants to change color scheme of subcomponent ex: purple, pink, gradient cyan, gradient <insert color here> it will be as simple as adding or removing additional stying in your theme object, which leads me to another point please separate your theme object into its own style folder, more of a minor thing but a good habit. In fact separate similar components into their own folders instead of just under one umbrella folder ex: 'RightContainer','LeftContainer','ParentContainer' could all be under components/containers, this will also get you into the habit of refactoring your code and making button/header/logo/etc. components with their own folders instead of packing all components within containers. I had the same habit but now as annoying as it is I try to break down components as much as I can so that my app is truly modular.

  • Seems like you are well on your way so I will suggest you practice with one component ui library at a time (looks like materialUI in your case), and then try and learn other tech like css-in-js or css preprocessors like SASS/Stylus. The reason being is that while component UI libraries are great for fast deployment and prototyping, when you have to tackle more complex or custom styling/animations the opinionated nature of these libraries will be a drawback. Arm yourself with atleast one way to make highly complex/custom styling.

  Good luck fellow student.

  Marked as helpful

  1

  ---

  

  Adam Breslin•30

  @nitroadam1233Posted over 1 year ago

  @lorenzoaniel Thanks for the advice Mikhall, I will make these changes in my next project. Do you know how to use Material-UI by any chance, and if you do can you tell me how to add custom breakpoints with Material-UI?

  0

  

  P

  Mikhail Lorenzo Aniel•230

  @lorenzoanielPosted over 1 year ago

  @nitroadam1233 unfortunately i have not used material UI yet, but i took a quick look at the docs: https://mui.com/material-ui/customization/breakpoints/ & https://mui.com/material-ui/react-use-media-query/

  One uses general themeing to apply breakpoints, which looks helpful for any breakpoint style changes that affect many components, and there is also a hook feature for components that have unique breakpoint stsyling you would only apply to that particular component. I think that hook uses boolean to verify if condition for breakpoint matches, using that boolean value you can then render out the breakpoint style. Again I have not used material UI so I can only give a brief shallow summary here, please read the docs I found, they might make more sense to you if there is a way in material to render styling conditionally, from the tech I use there should be so the concept might be universal here.

  0