Intro to React

React

A JavaScript library for building user interfaces

LET'S

GET

STARTED

Why we use React?

There are several good reasons to choose ReactJS:

* Virtual DOM

* Server Rendering

* Custom Events System

* Declarative

* Easy interface &

* Many more...

Is React is a part of MVC pattern?

Actually, React Working only View Layer in MVC pattern

Who Uses React?

# Facebook

# Instagram

# Airbnb

# Alipay

# Wordpress.com source code and

# Gutenberg | WordPress

# and many other big bosses using React

You can find a big list here...

What do you need to know before learning React?

1. HTML

2. JavaScript

3. CSS sounds familier

But the most important thing is: More you learn to React, more deep dive into JavaScript. Because always React try to use update JavaScript features.

What we will Learn...

1. Create-React-App and File Structure

2. Hello World with React

3. Introducing JSX

4. Rendering Element

5. Component, State, Props

6. Event Handling

7. React DevTools

8. List, Form and

9. React Hooks

What we will Build...

Along the way we build a simple github user profile viewer app

create-react-app

File Structure

Hello World!

JSX

JSX looks similar to HTML and behaves in similar ways

we can write our entire app using React.createElement. But we won’t. Why? It’s not very ergonomic (it’s not as productive to write our code this way) so the React team created JSX. JSX looks similar to HTML and behaves in similar ways.

-- kent C Dodds

With JSX:

Without JSX:

Rendering Element



       import React, { Component } from 'react';


       class App extends Component {
         render() {
           return (
             <div style={{ text-align: center }}>
               <h1>Hello Developers</h1>
               <p>Thank you for being with us!</p>
             </div>
           );
         }
       }

Our Initial Greeting App

import React, { Component } from 'react';
import ReactDOM from 'react-dom'


class App extends Component {
  render() {
    return (
      <div style={{ text-align: center }}>
        <h1>Hello Developers</h1>
        <p>Thank you for being with us!</p>
      </div>
    );
  }
}


ReactDOM.render(
  <App />,
  document.getElementById('root');
);

Hello Developers

Thank you for being with us!

Component

Function Component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

ReactDOM.render(
  <Welcome name="Sara" />
  document.getElementById('root')
);

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

ReactDOM.render(
  <Welcome name="Sara" />,
  document.getElementById('root')
);

ES6 Class Component

Props

Source: WebJustify

Our app all components

Form Component

State

import React from 'react';

class Form extends React.Component {
  state = {
    userName: ''
  };

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.userName}
          placeholder="GitHub Username"
          required
        />
        <button type="submit">Add card</button>
      </form>
    );
  }
}

export default Form;

Form Component Initial Code

Event Handling

import React from 'react';

export class Form extends React.Component {
  state = {
    userName: ''
  };

  handleInput = (e) => {
    this.setState({ userName: e.target.value });
  }

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.userName}
          onChange={this.handleInput}
          placeholder="GitHub Username"
          required
        />
        <button type="submit">Add card</button>
      </form>
    );
  }
}

export default Form;

Form Component Step-2

import React from 'react';
import axios from 'axios';

export class Form extends React.Component {
  state = {
    userName: ''
  };

  handleInput = (e) => {
    this.setState({ userName: e.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios
      .get(`https://api.github.com/users/${this.state.userName}`)
      .then(resp => {
        this.props.onSubmit(resp.data)
        this.setState({ userName: '' })
      });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.userName}
          onChange={this.handleInput}
          placeholder="GitHub Username"
          required
        />
        <button type="submit">Add card</button>
      </form>
    );
  }
}

export default Form;

Form Component Step-3

"Be kind whenever possible. It is always possible."

- The Dalai Lama

Card Component

import React from 'react';

export const Card = props => {
  return (
    <div>
      <img alt="avatar" src={props.avatar_url} />
      <div>
        <h2>{props.name}</h2>
        <p>{props.bio}</p>
        <p>{props.blog}</p>
      </div>
    </div>
  );
};

export default Card;

User Profile Card

CardList Component




import React from 'react';
import Card from './Card';

export const CardList = props => {
  return <div>{props.cards.map(card => <Card {...card} />)}</div>;
};

export default CardList;

CardList Component

Let's do some CSS

CSS-in-JS

Final App

React Hooks

Hooks let you use React's features without classes.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import './styles.css';

class ClassyCounter extends Component {
  state = {
    count: 0
  };

  setCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div className="counter">
        <h1>{this.state.count}</h1>

        <button onClick={this.setCount}>Count Up To The Moon</button>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<ClassyCounter />, rootElement);

State in Components

State with Functional Components and useState

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import './styles.css';

function HooksCounter() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Count Up To The Moon</button>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<HooksCounter />, rootElement);