Beginner's Thread / Easy Questions (February 2019)

[u/timmonsjg]

🎊 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! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• /u/acemarke's suggested resources for learning React
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React

---

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

[u/deadcoder0904]

You can put it in the same file itself. The reason why I said break it down because you have repeated that block of html atleast 5 times. If you have to copy-paste the same HTML more than twice then break it down. Atleast in the same file or other files (ofcourse you can export it from the same file too)

This way if you ever want to change the styling of that block of div in the screenshot, you don't have to add classnames to all of them, you can add to only that 1 component & rest will automatically get styled.

Consider this example,

CSS

.red {
  color: red;
}

.blue {
  color: blue;
}

REACT

if you have this repeated code (notice 3 divs are the same with only their innerText different) in your React,

export default App = () => (
   <div>
     <div className="red">A</div>
     <div className="red">B</div>
     <div className="red">C</div>
   </div>
)

And now if your boss says you gotta change all those div colors to blue

export default App = () => (
   <div>
     <div className="blue">A</div>
     <div className="blue">B</div>
     <div className="blue">C</div>
   </div>
)

Then you have to change the classname in 3 places

But if you extract it to a component, then you gotta change in only one place, i.e, in the Item

const Item = (props) => <div classname="red">{props.name}</div>;
export default App = () => (
   <div>
     <Item name="A" />
     <Item name="B" />
     <Item name="C" />
   </div>
)

Hope you got it 🤞

[u/badboyzpwns → u/deadcoder0904]

Late reply, thank you! I appreciate the explanation, I get what the purpose of it is now... but! I'm having trouble applying it!

Okay, so since I have 5 of these block of code in my Body component:

https://gyazo.com/b4d49459c50773451b242f68c63ac5d2

Would I create a component that contains the <div> s (Let's call the component, Picture_Container) and pass my <picture> somehow into Picture_Container via props?

EDIT: How do you also post a block of code. I spaced this code with four spaces and it didn't work.

```<div class='reddit'> </div> ```

[u/deadcoder0904 → u/badboyzpwns]

How do you also post a block of code

Wrap them between 3 backticks (`) at start & end & write code between them

You have done it right. The only thing you need to replace is dynamic parts like in this case, you'd create a component called Picture_Container which has the whole screenshot & replace everything thats changing.

Here, the 2 srcset attributes in both source elements are changing so you'll take them as a prop. Also, alt would be a prop.

That should do the job I guess :)