Understanding React Concepts part 1

As a self-taught frontend developer, I sometimes have little to no knowledge of what a method, approach or operation is technically called and this has had a huge effect on me when communicating an idea to other developers during normal interactions or interviews.

I have then decided to improve on this flaw by studying a book called "The Road To React" by ROBIN WIERUCH.

Here are some of the things I have learnt so far:

Component Definition - this basically means creating a bit of code that returns JSX that can be reused multiple times.

Component Instantiation - much similar to classes in Object-Oriented Programming. Basically, when a component is defined(this happens only once), such component can be instantiated(called) in multiple places much like how we define classes once and instantiate them multiple times. Example: // class definition

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

}

getInfo() {

return (this.name + "is" + this.age + "years old" );

}

}

// instantiation

const john = new Person("John", 30);

console.log(john.getInfo()); //"John is 30 years old"

Callback function: We can use calllbacks as a solution to the inability to get data(state) from a child component to the parent component as react follows a top-bottom approach, this means that data flows from the parent to the child components only. We can make use of callback functions to get information in a child component to the parent component.

Controlled Comnponents: are components in which the form's data is handled by the component's state. The current values are gotten through props and changes are made with the help of callbacks like Onclick, Onchange etc. The parent component manages its states, the states are then passed the values as props to the controlled component.