React Tutorial

1. React Inastallation
2. React Fundamental Concepts
3. React Advanced concepts

React Fundamental

What is react?

Why we use React?

Benefits of single page aplications.

React JSX

React Component

React properties

React Hooks

React state

Event in react

Add css in react jsx

What is react?

Top Next

React is a flexible, efficient, open-sourse JavaScript library for building user interfaces.

Why we use React?

Top Next

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application.

Benefits of single page aplications.

Top Next

1. Quick Loading Time.
2. Seamless User Experience.
3. Ease in Building Feature-rich Apps.
4. Uses Less Bandwidth.

What is JSX?

Top Next

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. Return a single element (only one parent element)

JSX Element | JavaScript in JSX | JSX Expressions | JSX attributes | JSX Functions | JSX Conditional rendering.

JSX Element

let element = <h1>Hello, world!</h1>;
let emptyHeading = <h1 />;

JSX Expressions

let name = 'Josh Perez';
let element = <h1>Hello, {name}</h1>;

function fullName(firstName, lastName) {
  return firstName + ' ' + lastName;
}
let element = <h1>Hello, {fullName('Julie', 'Johnson')}</h1>

JSX attributes

const element = <img src={user.avatarUrl} />;
const element = <button className="btn">Click me</button>;

JSX Functions

name() {
  return "Julie";
}

return (
  <h1>
    Hi {name()}!
  </h1>
)

JSX Conditional rendering

import React from "react";
export default function Weather(props) {
  if (props.temperature >= 20) {
    return (
      <p>
        It is {props.temperature}°C (Warm) in {props.city}
      </p>
    );
  } else {
    return (
      <p>
        It is {props.temperature}°C in {props.city}
      </p>
    );
  }
}

Javascript in JSX

function App(){
    const name = 'Mike'
    return (
      <>
          <h1>Hello {name}</h1>
          <p>{name === 'Mike' ? '(admin)': '(user)'}</p>
      </>
    )
}

What is component?

Top Next

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components.

Class Components

Class components can define functions that will execute during the component's lifecycle.

Creating a class component

// MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>This is my component.</div>
    );
  }
}
export default MyComponent;

Functional component

A functional component is basically a JavaScript/ES6 function that returns a React element (JSX). According to React's official docs.

Creating a Functional component

import React from 'react';

function UserProfile() {
  return (
      <div className="UserProfile">
        <div>Hello</div>
        <div>World</div>
     </div>
  );
}
export default UserProfile;

Making an Interactive Component

Embed an internal component

import React from 'react';
import UserAvatar from "./UserAvatar";

export default function UserProfile() {
  return (
      <div className="UserProfile">
        <UserAvatar />
        <UserAvatar />
      </div>
  );
}

Embed an external component

import React from 'react';
import ComponentName from 'component-name';

export default function UserProfile() {
  return (
      <div className="UserProfile">
        <ComponentName />
      </div>
  );
}

Nested Components

What is react properties?

Top Next

It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.

Passing properties to a component

<Student firstName="Julie" lastName="Johnson" age={23} pro={true} />

Accessing the properties from a component

import React from "react";

export default function Student(props) {
  return (
    <h1>
      {props.firstName} {props.lastName} is {props.age}.
    </h1>
  )
}

Default Props value

const Person = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}

Person.defaultProps = {
    name: 'No name',
    age: 0,
}

Props object destructuring

What is react hooks?

Top Next

useState | useEffect | useRef | useCallback | useMemo | useContext | useReducer | Custom Hooks

useState

useEffect

useRef

useCallback

useMemo

useContext

useReducer

Custom Hooks

What is react state?

Top Next

State is a plain JavaScript object used by React to represent an information about the component's current situation. It's managed in the component (just like any variable declared in a function).

React state

import React, { useState } from "react";

export default function Hello(props) {
  let [name, setName] = useState("Julie");
  function updateName() {
    let newName = prompt("What is your name?");
    setName(newName);
  }

  return (
    <h1>
      {name}
    </h1>
    <button onClick={updateName}>
      Update name
    </button>
  );
}

What is react routing?

Top Next

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

What is event in react?

Top Next

An event is an action that could be triggered as a result of the user action or system generated event.

Event listener

import React from "react";

export default function Hello() {
  function handleClick(event) {
    event.preventDefault();
    alert("Hello World");
  }

  return (
    <a href="/" onClick={handleClick}>
      Say Hi
    </a>
  );
}

Add css in react jsx

Top