React.js Workshop

Who I am?

 jamal-pb95

jamal_uddin95

@jamal.pb95

jamal.pb95

jamal-pb95

jaamaal.xyz

Intro to React

What is React

???

React

A JavaScript library for building user interfaces

Why We Use React?

There are several good reasons to choose ReactJS:

 

       * Virtual DOM

       * Server Rendering

       * Custom Events System

       * Declarative

       * Easy Interface &

       * Many more...

 

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...

React: the good

React: the bad

this is not a MVC frameworks. React just work with view layer of the MVC pattern.

What do you need to know before learning React?

1. HTML

2. CSS &

3. JavaScript

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. Modern JavaScript for React Developer

          2. Create-React-App and File Structure

          3. Hello World with React

          4. Introducing JSX

          5. Rendering Element

          6. Component, Props, State

          7. Event Handling

          8. React DevTools

          9. List, Form and

          10. React Hooks

 

 

Modern JavaScript for

React Developer

  • let & const
  • arrow function
  • rest & spread operator
  • array & object destructuring
  • template literals
  • class
  • callback
  • promises
  • async/await
  • modules

 

let & const

// old school ES5 variable
var name = 'Jamal Uddin'
console.log(name) // Jamal Uddin
// old school ES5 variable
var name = 'Jamal Uddin'
console.log(name) // Jamal Uddin

// ES6
let num = 5
console.log(num) // 5
// old school ES5 variable
var name = 'Jamal Uddin'
console.log(name) // Jamal Uddin

// ES6
let num = 5
console.log(num) // 5

num = 10 // it's possible to change the value
console.log(num) // 10
// old school ES5 variable
var name = 'Jamal Uddin'
console.log(name) // Jamal Uddin

// ES6
let num = 5
console.log(num) // 5

num = 10 // it's possible to change the value
console.log(num) // 10

let num = 11 //     SyntaxError: Identifier 'num' has already been declared
// old school ES5 variable
var name = 'Jamal Uddin'
console.log(name) // Jamal Uddin

// ES6
let num = 5
console.log(num) // 5

num = 10 // it's possible to change the value
console.log(num) // 10

let num = 11 //     SyntaxError: Identifier 'num' has already been declared

const TAX_RATE = 8.5
console.log(TAX_RATE) // 8.5

const PI = 3.14
console.log(PI) // 3.14
// old school ES5 variable
var name = 'Jamal Uddin'
console.log(name) // Jamal Uddin

// ES6
let num = 5
console.log(num) // 5

num = 10 // it's possible to change the value
console.log(num) // 10

let num = 11 //     SyntaxError: Identifier 'num' has already been declared

const TAX_RATE = 8.5
console.log(TAX_RATE) // 8.5

const PI = 3.14
console.log(PI) // 3.14

PI = 3.1416 //     TypeError: Assignment to constant variable

arrow function

// ES5
function greet() {
  return 'Hello Friends'
}
// ES5
function greet() {
  return 'Hello Friends'
}


// ES6
const greet = () => {
  return 'Hello Friends'
}
console.log(greet()) // Hello Friends
// ES5
function greet() {
  return 'Hello Friends'
}


// ES6
const greet = () => {
  return 'Hello Friends'
}
console.log(greet()) // Hello Friends


// or
const greet2 = () => 'Hello Friends'
console.log(greet2()) // Hello Friends
// ES5
function greet() {
  return 'Hello Friends'
}


// ES6
const greet = () => {
  return 'Hello Friends'
}
console.log(greet()) // Hello Friends


// or
const greet2 = () => 'Hello Friends'
console.log(greet2()) // Hello Friends


// when you have a single parameter
const greetWithName = (name) => `Hello ${name}`
console.log(greetWithName('Jamal')) // Hello Jamal
// ES5
function greet() {
  return 'Hello Friends'
}


// ES6
const greet = () => {
  return 'Hello Friends'
}
console.log(greet()) // Hello Friends


// or
const greet2 = () => 'Hello Friends'
console.log(greet2()) // Hello Friends


// when you have a single parameter
const greetWithName = (name) => `Hello ${name}`
console.log(greetWithName('Jamal')) // Hello Jamal


// or
const greetWithName2 = name => `Hello ${name}`
console.log(greetWithName2('Jamal')) // Hello Jamal
// ES5
function greet() {
  return 'Hello Friends'
}


// ES6
const greet = () => {
  return 'Hello Friends'
}
console.log(greet()) // Hello Friends


// or
const greet2 = () => 'Hello Friends'
console.log(greet2()) // Hello Friends


// when you have a single parameter
const greetWithName = (name) => `Hello ${name}`
console.log(greetWithName('Jamal')) // Hello Jamal


// or
const greetWithName2 = name => `Hello ${name}`
console.log(greetWithName2('Jamal')) // Hello Jamal


// when you have multiple parameters
const multiply = (firstNum, secondNum) => firstNum * secondNum
console.log(multiply(5, 10)) // 50

Rest Operator

Spread Operator

Array Destructuring

Object Destructuring

Template Literals

Class

Callback

Callback problems

Promises

Promises

Promises

async/await

modules

modules

LET'S

GET STARTED TO

REACT

Hello World!

create-react-app

File Structure

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';
import ReactDOM from 'react-dom'


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


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

Hello Friends

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

State

Event Handling

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

Learning Resources:

1. Amazing Official Documentation

2. React Developer Guide by Adam Gołąb

3. How to React by Kent C. Dodds

4. The Beginner's Guide to React by Kent C. Dodds

5. React for Beginners by Wes Bos

Thank you

https://jaamaal.xyz

jamal-pb95

@jamal_uddin95

Made with Slides.com