DEV Community

loading...
Cover image for #3 of 100DaysOfCode

#3 of 100DaysOfCode

icecoffee profile image atulit023 ・2 min read

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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

state = {
  profiles: [],
}
Enter fullscreen mode Exit fullscreen mode
  • 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],
  })
)
};
Enter fullscreen mode Exit fullscreen mode

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. 
};
Enter fullscreen mode Exit fullscreen mode

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. 🌻

Discussion (0)

Forem Open with the Forem app