DEV Community

Cover image for #3 of 100DaysOfCode
Atulit Anand
Atulit Anand

Posted on

#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
  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) => {
  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) => {
// 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. 🌻

Top comments (0)