wahyu9kdl

Codevolutions React Tutorial

1. Introduction

What is React?

Why learn React?

Component Based Architecture

Reusable Code

React is declarative

More on why React?

Prerequisites

Guideline

picture 2

2. Hello World

3. Folder Structure

4. Components

Components In Code

Component Types

5. Functional Components

Making A Functional Component

import React from 'React';

let Greet = () => {
    return (<div>Hello Shaan Khan</div>);
};

export default Greet;

import Greet from './Components/Greet.tsx';

<Greet/>

export const Greet = () => ();

import {Greet} from './Components/Greet.tsx'

6. Class Components

import React, { Component } from "react";

class Welcome extends Component {
  render() {
    return <h1>Hello World</h1>;
  }
}

export default Welcome;

Class Components vs Functional Components

Functional

Class Components

7. Hook Updates

8. JSX

Hello.tsx

import React from 'react'

const Hello = () => {
    return (
        <div>
            <h1>Hello Shaan</h1>
        </div>
    );
}

export default Hello;

Hello.ts

import React from 'react'

const Hello = () => {
    return React.createElement('div', null, React.createElement('h1', null, 'Hello Shaan'));
};

export default Hello;

JSX Differences

9. Props


```tsx
import React from "react";

let WelcomeProp: React.FC<{ name: string }> = (props) => {
  console.log(props);
  return (
    <div>
      <h1>Hello {props.name}</h1>
    </div>
  );
};

export default WelcomeProp;

<GreetProp name="Hero man">
    <p>This is children prop</p>
</GreetProp>

import React from "react";

let WelcomeProp: React.FC<{ name: string }> = (props) => {
  console.log(props);
  return (
    <div>
      <h1>Hello {props.name}</h1>
      {props.children}
    </div>
  );
};

export default WelcomeProp;

import React, { Component} from 'react'

class Welcome extends Component {
    render() {
        return <h1>Welcome {this.props.name}</h1>
    }
}

export default Welcome

10. State

Props vs State

picture 1

State Example

import React, { Component } from "react";

class Message extends Component {
  state = {
    message: "Welcome Visitor!",
  };

  changeMessage() {
    this.setState({
      message: "Thank You For Subscribing!",
    });
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <button
          onClick={() => {
            this.changeMessage();
          }}
        >
          Subscribe
        </button>
      </div>
    );
  }
}

export default Message;

11. State & The setState Method

    this.setState(
      {
        count: this.state.count + 1,
      },
      () => {
        console.log(`Callback value`, this.state.count);
      }
    );

    console.log(this.state.count);
  }

Conclusions

12. Destructuring Props & State In React

Functional Components

const GreetDestructured = ({ name, heroName }) => { return ( <div> <h1> Hello {name} aka {heroName} </h1> </div> ); };

export default GreetDestructured;


  * Alternatively we can destructure it inside of the body
```tsx
const GreetDestructured: React.FC<{ name: string; heroName: string }> = (
  props
) => {
  const { name, heroName } = props;

Class Components

const {state1, state2} = this.state;

13. Event Handling

Starting With Functional Components

Common Mistakes With Events

Starting With Class Components

14. Binding Event Handlers

EventBinding

How to bind event handlers in React

        <button onClick={this.clickHandler.bind(this)}>Click Me!</button>

        <button onClick={() => this.clickHandler()>Click</button>

  constructor(props) {
    super(props);
    this.clickHandler = this.clickHandler.bind(this);
}

Summary

15. Methods As Props

Doing This

        <ChildComponent greetHandler={this.greetParent}/>

import React from "react";

let ChildComponent: React.FC<{ greetHandler: () => void }> = (props) => {
  return <button onClick={props.greetHandler}>Greet Parent</button>;
};

export default ChildComponent;

Passing A Parameter When Calling A Method As A Child Component

greetParent(childName) {
  console.log(`Hello ${childName}`);
}

16. Conditional Rendering

If/Else Approach

  if (this.state.isLoggedIn) {
      return <div>Welcome Shaan</div>;
    } else {
      return <div>Welcome Guest</div>;
    }

Element Variables


    let message;

    if(this.state.isLoggedIn) {
        message = <div>Welcome Shaan</div>
    }
    else {
        message = <div>Welcome Guest</div>
    }

    return (<div>{message}</div>);

Tenary Operators

    return(
        this.state.isLoggedIn ? (<div>Welcome Shaan</div>) : (<div>Welcome Guest</div>)
    );

Short Circuit Operator Approach

    return (
        this.state.isLoggedIn && (<div>Welcome Shaan</div>);
    );

17. List Rendering

console.log(map1); // Expected output: Array [2, 8, 18, 32]


* This is pretty much the knowledge of list rendering in react, but instead of multiplication we do JSX
* We do this by using the map method inside of the jsx

```tsx
 <div>
      {names.map((name) => (
        <h1>{name}</h1>
      ))}
    </div>

const names = [...];

const nameList = names.map(name => <h2>{name}</h2>)
return <div>{nameList}</div>

  const personList = persons.map((person) => (
    <h2>
      I am {person.name}, I am {person.age}. I know {person.skill}
    </h2>
  ));

Making this a seperate component

import React from "react";

interface Person {
  id: number;
  name: string;
  age: number;
  skill: string;
}

let Person: React.FC<{ persons: Person[] }> = (props) => {
  const personList = props.persons.map((person) => (
    <h2>
      I am {person.name}, I am {person.age}. I know {person.skill}
    </h2>
  ));

  return <div>{personList}</div>;
};

export default Person;

18. List & Keys

This site is open source. Improve this page.