This content originally appeared on DEV Community and was authored by atulit023
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. ?
This content originally appeared on DEV Community and was authored by atulit023
atulit023 | Sciencx (2021-04-14T17:14:52+00:00) #3 of 100DaysOfCode. Retrieved from https://www.scien.cx/2021/04/14/3-of-100daysofcode/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.