React — (Part1)

• What is React? React is a JavaScript Library used to build interactive user interface. It was created by Facebook in 2011.
• Vanilla JavaScript means plain text js
• Component help for reusable

Setting up the environment

• we need nodejs: node -v: check version of the node. Download from nodejs.org
• Choose your favourite ide

Creating react app

• Creating react app: you can use Create React APP(CRA), Vite

Command to create your project

1. npm create vite@4.1.0
2. Type Y to confirm to install vite package then type your project name
3. Choose Freactwork : React
4. Choose Variant: TypeScript
5. cd to your project then type npm install
6. then you can run: npm run dev

Congratulation for your first React!🎉

Understanding Project Structure

• node_module: all the third parties are install (dun touch it)
• public: to store public assets of your website like image, video,…
• src: your source code and it has a component called App.tsx
• index.html: root is a container of our application. entry point of application
• package.json: contains information of the project : project name, version, scripts, dependencies, ..
• tsconfig: tell the typescript compiler how to compile from typescript to JavaScript code ( dun touch it)
• vite.config.ts: (dun touch it)

There are many file in the project :( ? Which file it start first?

• it start from index.html ->

How to create a react Component:

• tsx | ts : is the extention of TypeScript file. we used ts for plain typeScript file and tsx for react component.
• To craete a component we can use JavaScript Class or function. Function base is more popular because it is easy to write and more consise.
• With a Function Name , you should always follow the PascalCasing rule like SendMessage(),
• With JSX : JavaScript XML , it will compile to JS code. With JSX you can create dynamic content.
• JSX stands for JavaScript XML. It is a syntax that allows us to write components that combine HTML and JavaScript in a readable and expressive way, making it easier to create complex user interfaces

Create First Hello World Application

• Create a component called : Message.tsx

//PascalCasing
function Message(){
    //JSX : JavaScript XML
    return <h1>Hello World</h1>
}

export default Message;

export default Message: means you need to export that component if you want to use somewhere else

• Call that component in App.tsx: You need to import Message component for using and export App component then you can use somewhere else.

import Message from "./Message";

function App(){
  return <div><Message /></div>
}

export default App;

You can use <Message /> (Self closed) or <Message></Message>. They are the same just <Message /> is more concise.

Output:

How React work?

So, with the above example we have component tree which are App(Top level component) and Message (Child component). App -> Message

When the application start, react take that component tree and build JS data structure called Virtual DOM.

What is Virtual DOM? It’s different from actual DOM running in browser, it’s a light weigh in memory representation of the components tree. Where each node represent component. When the data of the component changes, react update the corresponding node and the virtual DOM to reflect the new state.

Updating DOM is done by ReactDom.

1. When our application starts, React takes a tree of components and builds a JavaScript data structure called the virtual DOM. This virtual DOM is different from the actual DOM in the browser. It’s a lightweight, in-memory representation of our component tree.
2. When the state or the data of a component changes, React updates the corresponding node in the virtual DOM to reflect the new state. Then, it compares the current version of virtual DOM with the previous version to identify the nodes that should be updated. It’ll then update those nodes in the actual DOM.
3. In browser-based apps, updating the DOM is done by a companion library called ReactDOM. In mobile apps, React Native uses native components to render the user interface.

React EcoSystem

What is the different between library and framework?

• Library: A tool that provides specific functionality
• Framework: Provide a set of tools and guidelines for building app.

Example: React is a javascript library, Angular | Vue are framework

• Since React is just a library and not a framework like Angular or Vue, we often need other tools for concerns such as routing, state management, internationalization, form validation, animation, etc.

Creating List Group

• installing bootstrap: npm i bootstrap@5.2.3
• in the main.tsx , import ‘bootstrap/dist/css/bootstrap.css’
• Your ListGroup.tsx : https://getbootstrap.com/docs/5.3/components/list-group/#basic-example

function ListGroup() {
  return (
    <ul className="list-group">
      <li className="list-group-item">An item</li>
      <li className="list-group-item">A second item</li>
      <li className="list-group-item">A third item</li>
      <li className="list-group-item">A fourth item</li>
      <li className="list-group-item">And a fifth one</li>
    </ul>
  );
}

export default ListGroup;

Note: Command + D : select all keyword you want at the same time

Using Prettier: View -> Command Palette -> search for Format Document -> Click Configure -> Prettier . DONE

Output:

Fragment

• If you want to return multiple elements, you can do this:

1. use <div> to wrap all your code: select all ur code -> view -> command Pallet -> wrap Abbreviation -> type div . DONE
2. Use Fragment

import { Fragment } from "react";
function ListGroup() {
  return (
    <Fragment>
        <ul className="list-group">
          <li className="list-group-item">An item</li>
          <li className="list-group-item">A second item</li>
          <li className="list-group-item">A third item</li>
          <li className="list-group-item">A fourth item</li>
          <li className="list-group-item">And a fifth one</li>
        </ul>
    </Fragment>
  );
}

export default ListGroup;

3. Using Empty bracket

function ListGroup() {
  return (
    <>
      <h1>List Group</h1>
      <ul className="list-group">
        <li className="list-group-item">An item</li>
        <li className="list-group-item">A second item</li>
        <li className="list-group-item">A third item</li>
        <li className="list-group-item">A fourth item</li>
        <li className="list-group-item">And a fifth one</li>
      </ul>
    </>
  );
}
export default ListGroup;

Rendering Lists

function ListGroup() {
  const items = ["New York", "San Fransico", "Denver"];
  return (
    <>
      <h1>List Group</h1>
      <ul className="list-group">
        {items.map((item) => (
          <li key={item} className="list-group-item">
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}
export default ListGroup;

Note: We need key in each list <li> becuase, each item need to be unique.

Conditional Rendering

function ListGroup() {
  let items = ["New York", "San Fransico", "Denver"];
  items = [];
  const getMessage = () => {
    return items.length == 0 ? <h1>No Item in list</h1> : null;
  }
  return (
    <>
      <h1>List Group</h1>
      <ul className="list-group">
        {items.length == 0 && <p>List is Empty</p>}
        {items.map((item) => (
          <li key={item} className="list-group-item">
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}
export default ListGroup;

Handling Event

import { MouseEvent } from "react";

function ListGroup() {
  let items = ["New York", "San Fransico", "Denver"];
  const getMessage = () => {
    return items.length == 0 ? <h1>No Item in list</h1> : null;
  };
  //Event Handler
  const handleClick = (event: MouseEvent) => {
    console.log(event);
  };
  return (
    <>
      <h1>List Group</h1>
      <ul className="list-group">
        {items.length == 0 && <p>List is Empty</p>}
        {items.map((item, index) => (
          <li key={item} className="list-group-item" onClick={handleClick}>
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}
export default ListGroup;

onClick() is a prop. Syntax: onClick = {arrow Function}

MouseEvent: Type Annotation in TypeScript

Source Code: https://github.com/sophearyrin-dev/Yidio/tree/main/yidioapp