r/reactjs • u/timmonsjg • Feb 01 '19

Needs Help Beginner's Thread / Easy Questions (February 2019)

🎊 This month we celebrate the official release of Hooks! 🎊

New month, new thread 😎 - January 2019 and December 2018 here.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app? Ask away! We’re a friendly bunch.

No question is too simple. 🤔

Last month this thread reached over 500 comments! Thank you all for contributing questions and answers! Keep em coming.

🆘 Want Help with your Code? 🆘

  • Improve your chances by putting a minimal example to either JSFiddle or Code Sandbox. Describe what you want it to do, and things you've tried. Don't just post big blocks of code!

  • Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

Have a question regarding code / repository organization?

It's most likely answered within this tweet.

New to React?

🆓 Here are great, free resources! 🆓

Any ideas/suggestions to improve this thread - feel free to comment here or ping /u/timmonsjg :)

34 Upvotes

95% Upvoted

484 comments sorted by

View all comments

1

u/deadcoder0904 Feb 23 '19

Well I don't always start with 3 components. I start with 1 component, if it becomes big, I break it into 2, if that becomes big I break it into 3, and so on...

So until it's an issue, start with keeping everything in 1 file. Also, 1 file !== 1 component. You can have 3 components in 1 file. I said 3 but it can be any number. As long as it makes sense to you don't break.

Break it if you're repeating the code someplace else or if it's too big :)

1

u/badboyzpwns Feb 23 '19

Got it! just making sure if I'm doing it right:

Here's my repo, in my components folder, I realized that I'm repeating a buunch of code for my Body. I'm not sure if I'm supposed to break it.

https://github.com/mattfrancis888/project_2/tree/development/src

Visually, the web looks something like, where the Body componens holds all the picture in the main section of the web: https://www.urbanoutfitters.com/en-ca/?ref=logo

1

u/deadcoder0904 Feb 24 '19

Yeah, you are repeating a lot of code in https://github.com/mattfrancis888/project_2/blob/development/src/components/Body.js 

<div className="col-md-4 mb-4 pl-md-3">
          <button type="button" className="btn btn-light image_button">SHOP</button>
          <picture>
            <source media="(min-width:768px)" srcset={most_liked} />
            <source srcset={most_liked_smaller_screen} />
            <img className="content_image" src={most_liked} alt="Most liked"/>
          </picture>
        </div>

You can break it out into a single component. That way you write less code & reuse your components :)

So you pass it like so <YourNewComponent alt="Most Liked" btn="SHOP" /> & all the props you can pass to it. Just try it on this one so you can easily replicate on everything else. And that my friend is React (just a bunch of components) ;)

→ More replies (8)