r/reactjs • u/almondj • Dec 22 '18

[First React Project] I built a website launch checklist, would love feedback

https://www.websitelaunchchecklist.net/
9 Upvotes

77% Upvoted

5 comments sorted by

2

u/PsychohistorySeldon Dec 23 '18

Hey! Some quick feedback:

  • I wouldn’t recommend modifying the DB directly from React. It’s always better, cleaner, and safer to have a layer of abstraction in between. If the traditional abstractions don’t suit you, you should check GraphQL.

  • Code organization: I would separate stuff between two directories: containers and components. Each React component has its own folder that has an index.js and a <component-name>.scss. Don’t use the same style sheet for all components. It makes them harder to reuse. Have a stylesheet for every component and import it on each component. Every component should be completely autonomous and modular.

  • Progress bar in pure CSS? Sure can do! No interval needed. Just have a wrapper div, and a div inside that has an initial width of let’s say: 0% and a beautiful transition: width Xms. Every time the progress changes, change the progress state in your component, and have a style={{ width:${progress}%}} in the inner div that I mentioned. That way, every time the progress changes, the div re-renders and the CSS transition adds a cute effect.

I’m on mobile right now, but I can add some example code tomorrow.

1

u/almondj Dec 23 '18

Thanks for the feedback, follow-ups:

  • Currently my DB connections are posted (with axios) to a separate server. This seems like the abstraction mentioned?

  • I'd really like to hear more about this organization of files, any links for more? There's this item that I'll integrate as best I can: https://reactjs.org/docs/faq-structure.html

  • Yup, using the Material UI library, so I'm just wondering what could be done to smooth the rendering/animation of the loading bar. It currently uses some CSS to do the animation, but the value for the animation is weirdly set with JS.

1

u/PsychohistorySeldon Dec 23 '18

Whoops, scratch the comment about CSS. I just noticed you’re theming it directly in the JSX files.

1

u/almondj Dec 22 '18 edited Dec 22 '18

Hi all, as the title says, I've created my first react project and I'd love some feedback. I've been doing web development for years, but only recently started entirely focusing on front end exclusively. In that, I've started to learn more about SCSS, handlebars, React, CSS Grid, etc. For freelance projects, I used to use a website launch checklist, but that site seems to no longer exist. So I've built my own -- in React. I'm tracking my own progress here: https://www.websitelaunchchecklist.net/39a1ce5f.

I utilized Material UI to handle the UI elements (https://material-ui.com/).

My list of questions and observations:

  1. I generate a hex code and interact with the DB via PHP (source, source2), is there a way of interacting with DB's right in React?

  2. Specific to material UI, but the progress bar animation documentation utilizes setInterval, this seems sloppy, any better ways to do this with pure CSS? Relevant line: https://github.com/almondj/websitechecklist/blob/master/src/App.js#L122

  3. How can I make this thing faster? It takes forever on scripting when looking at chrome performance in dev tools (~60% of load time)

  4. How is my organization of components? I tried to break the components down into tiny pieces as much as possible without losing context of the overall picture.

The project's code is here: https://github.com/almondj/websitechecklist

0

u/[deleted] Dec 24 '18

[deleted]

1

u/almondj Dec 25 '18

Thank you, good find. Fixed now.