React

Internet Engineering
Fall 2022
@1995parham

Introduction to

React

Amirhossein Nouri

Github

What is React?

React is a declarative JavaScript library for building user interfaces specifically for single-page applications (SPA).

It is open source and created by facebook (meta) in 2013.

wait what?

Declarative

declarative vs imperative

Declarative: Tell me what you want to do

Imperative: Tell me how to do it

Single Page Application (SPA)

Single-page application is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript.

No refresh required for navigation!

Here is an example

Component

Components are the building blocks of any React app.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Let check Snapp's components

How can we create a component?

We have two types of components

  1. Class component
  2. Functional component

Class component

      
        class Button {

          render(){

            return (
              
            );
          }
        }
      
    

Functional component

      
        function Button(){

          return (
              
          );
        }
      
    

So ...

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

Not really

We can have something like this

      
        function Button(){

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

Or something like this

      
        function Button(){

          return (
            {
              isLoading? () : ();
            }
            
          );
        }        
      
    
JSX

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 (
              
          );
        }  
        
        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 (
            
        );
      }        
    
  

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

      
        function ClickMeButton(){
  
          return (
              
          );
        }        
      
    
      
        function SubmitButton(){
  
          return (
              
          );
        }        
      
    

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 (
            
          )
        }
      
    

Components can have multiple prop

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

          return (
            
{name}

{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}

) }

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}

) }

Component Styling

Lets see component styling in action

Fetch External Data

Lets see fetching external data in action

Fork me on GitHub