My Trial of Learning React

react-tutorial.md

Learning React

This is my trial of understanding react, and its' idea of components.

So What I can do with React?

React can make components as a single TAG (more like single object).

Create a React Repository

npm install -g create-react-app
npm install -g yarn

create-react-app .
TypeScript Support: create-react-app . --typescript

Create Components

First, TSX Files Requires import of the React in first place.

import React from 'react'

There are two main types of declaration of Components,
one is Functional Components and the other is Class Components,

Functional Components are Just a function that returns TSX HTML style Contents:

import logo from './logo.svg';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

Class Components, on the other hand, are just a classes that extends Components class and has member render() to render the components:

import React from "react"
import { Component } from "react";

export class BABA extends Component {
    render() {
        return (
            <div><span>BABA</span> is <span>YOU</span></div>
        );
    }
}

Importing Components

You can import the components by importing the class components or functional components:

import { BABA } from './baba';

const App: React.FC = () => {
  return (
    <div className="App">
      <header className="App-header">
        <BABA />
      </header>
    </div>
  );
}