How can we create a component?

We have two types of components

1. Class component
2. Functional component

Class component

      
        class Button {

          render(){

            return (
              Click me!
            );
          }
        }
      
    

Functional component

      
        function Button(){

          return (
              Click me!
          );
        }
      
    

So ...

A component is a function that returns HTML or a javascript class that returns HTML inside it's render method

We can have something like this

      
        function Button(){

          const text = 'Click me!!!';
          return (
              {text}
          );
        }        
      
    

Or something like this

      
        function Button(){

          return (
            {
              isLoading? (Loading...) : (Now you can click me);
            }
            
          );
        }        
      
    

JSX

• Rendering logic is inherently coupled with UI logic
• So we need a way to have HTML and UI logic in one place
• We can use JSX
• JSX stands for JavaScript XML

We can start writing javascript inside JSX inside { }

      
        function Button(){

          const text = 'Click me!!!';
          return (
              {text}
          );
        }  
        
        function Date(){

          return (
              
We're in {new Date().getFullYear()}
              {/* We're in 2021 */}
          );
        }        
      
    

Composing Components

      
        function HomePage(){

          return (
            
              

                
                  ...
                
              
              

                

                  
                  
                  
                
              
            
            
          );
        } 
      
    

We can render conditionally

      
        function NotificationButton(){

          return (
            
            {hasNewNotification && ()}
            
          );
        } 
      
    

Is this component reusable?

    
      function Button(){

        return (
            Click me!!!
        );
      }        
    
  

What if we want a button with 'submit' text?

      
        function ClickMeButton(){
  
          return (
              Click me!!!
          );
        }        
      
    

      
        function SubmitButton(){
  
          return (
              Submit
          );
        }        
      
    

How can we make this component reusable?

Props

Props are arguments passed into React components.

• stands for properties and is being used for passing data from one component to another
• Props are being passed in a uni-directional flow. (one way from parent to child)
• Props is read-only, which means that data coming from the parent should not be changed by child components.

How can we use Props?

1. Define the prop in parent (where we want to render the component)
2. Pass it down to the component
3. Render the prop in the component

Define props and pass them down to components

Render prop inside the component

      
        function Button(props){

          return (
            {props.text}
          )
        }
      
    

Components can have multiple prop

      
        function Coffee({name, img, description, price}){

          return (
            

              
              
{name}
              
{price}
              
{description}
            
          );

        }
      
    

State

React components can have internal state

State is like a component's memory

When the state changes, react will update the UI automatically (re-render)

Lets implement a counter component and see the state in action

      
        function Counter(){
          let counterValue = 0;

          const handleIncrementClick = () => counterValue ++;

          return (
            
Counter value is: {counterValue}
            Increment
          )
        }
      
    

Clicking the button will increase the counter value

But it wont update the UI

Now, we can use state

We can define state with useState function

      
        const [value, setValue] = useState(initialValue);
        // value is the actual state.
        // setValue is a special function to update the value.
        // By Calling setValue(newValue), state and UI will be updated.
        // You can name them whatever you want.
        // You can have as many state as you want (multiple useState call).
      
    

Lets define the state

      
        function Counter(){
          const [value, setValue] = useState(0);

          const handleIncrementClick = () => counterValue ++;

          return (
            
Counter value is: {value}
            Increment
          )
        }