Important terms when starting with React. – User friendly Tech help

We already created our first react app using create-react-app cli. Now we’ll learn some of the core terminologies involved in react.
n
n1.Component :- its the building block of react app, just like functions, we create components to perform some functionality. It takes the given parameters (called as props) and render UI in the browser by consuming the given parameters.
n
nExample:- we need to display contact details of a person so we’ll create the below component which takes the props as parameter when we use this component.
n
na)Using class syntax to create component, 

n

n

n

n

123456
7

Class componentName extends Component { render(){
 return(
  )}}
export default componentname

n

b)Component uses the render method to return the UI component to the calling parent component.
n
nc)Export the component and it will imported with this name and used inside calling parent component
nd)Calling a component with props.
n
n2.Props, its like parameters to components like we have arguments to a function, we use them to pass data to components.
n
a)How to pass data :-
nb)Access the prop in the component by using this keyword (refering to the current context)

n

{this.props.contact.name}

n

c)Anything which is javascript expression in jsx is presented inside {} (curly brackets)
n
nNote:- props refer to attributes from parent components. It represents “read-only” data that are immutable.
n
3.Stateless function component, incase our component just returns the UI component we can use function to create a component instead of creating a class
n
na)What changes we have to do? 

n

n
• Function will take passing prop as argument

n

• Returns the description UI

n

• this keyword is not used in accessing the props inside function.

n

n

b)Example, we replaced the our class component with “stateless function component”
nClass component:-
n

n

n

n

n

 1 2 3 4 5 6 7 8 910111213141516171819202122232425262728293031
32

class ContactList extends Component{ render(){
 console.log(this.props);
 return(
 

 ) }}
export default ContactList;

n

Stateless function component for above class component:-

n

n

n

n

 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627
28

import React, { Component } from 'react'
function ContactList(props){
 return(
 

 ) }
export default ContactList;

n

4.State:-  represents mutable data that ultimately affects what is rendered on the UI. State is managed internally by the component itself and is meant to change over time, commonly due to user input (e.g., clicking on a button on the page).
n
na)To create state it should be declared inside a Class

n

n

n

n

1234567
8

state = {
 contacts : [ {
 "id": "test",
 "name": "Rion flower",     }                                 ]        }

n

nb)How to pass state to a component

n

n

n

n

123456
7

render() {
 return (
 
 
     )  }

n

nOne of the key benefits of using State in React to build UI components: when it comes to re-rendering the page, we just have to think about updating state. We don’t have to keep track of exactly which parts of the page change each time there are updates. We don’t need to decide how we will efficiently re-render the page. React compares the previous output and new output, determines what has changed, and makes these decisions for us. This process of determining what has changed in the previous and new outputs is called Reconciliation.
n
nNote:- In React UI is function of state, when state changes UI also changes.
nMore Tutorials

Matteo