Day 7 on Redesigning Nasa's Picture of the Day webpage

Hello once again! I'll make this more straight forward

📚 What I have learned for this whole time

Components in React are really functions in javascript where you can easily separate a portion of the whole project into a piece where you can read the code in either it's own file or on the default '/App.js' file which makes your code more clear to you and where they are meant to go. This is pretty well know and if you have been following along reading the code, you will also know that I have separated the main components into it's own file and directory as it does give me a peace of mind.

Now, I'll be going over props. What are props? How can I use them?

For those already in the programming scene, it is similar to this.blank (definitely in javascript) or self.blank (You can find this in Python), where the inputs of the user or developer will go into that function through props. First off, you do not need to type in certain content to everything in every place. With props you can make objects of an account or props of the current date. Heres what I mean.

function Content(props) {
  return (
    // Insert your code
    <h1>My name is {props.name}</h1>
  )
}

function App() {
 return (
    <>
      <Content name="Jordon" />
      <Content name="Samuel" />
      <Content name="Peter" />
    </>
  )
}

I have learnt how to add the correct time on a blank React project, and I think it was javascript too, but the types are not an issue or something to worry about now. There was a lot learnt from that especially on the ways it can be used. If you want to see more on how this is done click here.

🚀 States

A state is when the output of something is changed in real time, and will update depending on the code or any imported library that has a state. On Reactl.org, you can find the clock example in there and see the code on how it looks like. Here is what it looks like in case you don't want to look at it on the website:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

Heres what it looks like with props:

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

🛫 API

I have been watching this tutorial to APIs by FreeCodeCamp. I'll be learning from it and soon apply it to this very project and also continue to post more often.

---

Thank you so much for reading this post as I did have a chance to make this post a few days ago, but I didn't do it because I procrastinated. It sucks but I'm back at it again.
I have provided some links down below.

• APOD Repository
• My Github
• Twitter

Hope to see you again soon!

---

⚙️ Resources

• Components and Props - reactjs.org
• Heres the CodePen with props
• State - reactjs.org