#3 of 100DaysOfCode

Third-Day, well that was pretty mindboggling. I made another project using React and, I feel great about this one. 😀

The syntax is quite overwhelming but still not as bad as callback hell and the schemas in MongoDB so it's Ok.

Anyway, I learned the following things today.

• TC39 is the technical community that makes yearly releases of ECMAScript. - more of a did you know❓ really
• Classes in ES6.
• fetch API, promises, async, and await. Just enough to make the app working otherwise I have no idea how they work
• Class Component in React - This one is the hero to the day.
  • functionality of constructor and this in the class component
  • what is React.Component class
  • super() constructor
• render() - A class component must have a render() function
• 'props' keyword (plural) in class component not prop
• Styling in react
  • Its value.
  • And the fact that there is no double curly braces syntax to pass styles in the style property, there we are just passing a javascript object and outer curly braces denotes that it's a dynamic expression syntax
• properties inside a 'state' in a class component has to be an object, it can't be of any other data type
• class field - for example

constructor(props){
  super(props);
  this.state = {
    profiles: [], // just some variable name
  }
}

something like that can be replaced by something like this (lol slick code 😂)

state = {
  profiles: [],
}

• Input in react
  • via normal DOM API (i.e. querySelector())
  • via ref() - react syntax
  • via controlled elements - exciting one

The issue I face today is in line 67 of the completed file If anyone wanna check it out.

Their instead of this,

addNewProfile = (profileData) => {
this.setState(
  prevState => ({
    profiles: [...prevState.profiles, profileData],
  })
)
};

I tried to push values directly in the array without using setState()

addNewProfile = (profileData) => {
  this.state.profiles.push(profileData) 
// it didn't gave an error but the DOM also never updated itself. 
};

Yeah, and this about sums it up.
The part that I most struggled with is the input one but it was quite simple actually, the only thing that I am lacking right now is practice and I am sure after making some more projects, I'll be able to master this.

👉 This is my today's work

👉 You can build and run the files on this playground

Thanks for reading this and joining me, 😀
Wish me luck.🤗
Have a beautiful day. 🌻