Basic introduction to React

Defining React

React is a JS Library tool for making User Interface(UI) created and managed by Facebook. React enables us to program by using a declarative programming method and optimize updates while upadating UIs via using Virtual DOM. By using component based programming, we are able to effectively compose complex UI and manage components by using JSX expressions.

Distinct features of React

1. Declarative Programming

React uses declarative programming method which focuses on "What?" rather than "How?" to solve a certain issue.

Vanilla JS uses procedural programming which focuses on how to get to a certain goal while React focuses on the goal. If we declare the goal in React, React will take care of the "How?" part itself.

2. Virtual DOM

React uses Vitrual DOM bases on former UI on memory to calculate the [minimal set(최소 집합)] to minimize processing for the best efficiency.

3. Component

• Definition of Component - recyclable group unit of UI

• Features of component
  - Recyclable when needed
  - Usable on independent occasions for effecient code maintenance
  - Can comprehend other component
  - Better readability
  

• Types of component

  • Class Component - component which has to include a render() method and returns JSX. Relevant functions usable via state and lifecycle API

    // App.js
    import React from 'react';
    
    class App extends React.Component {
    render() {
    return <h1>This is Class Component!</h1>;
    }
    }
    
    export default App;

  • Function Component - component which returns JSX without using render() method making it way more simple but unable to use sta†e and lifecycle which made it less useful. However, React 16.8 version added a Hook technique making sta†e usable in function component.

    // App.js
    
    import React from 'react';
    
    const App = () => {
      return <h1>This is Function Component!</h1>;
    };
    
    export default App;

• Using components
  Component names should always start with upper-cased letters since React interprets lower-cased components to HTML tags.

JSX

• Definition of JSX - an extended form of JS expression used in react for accessing and implementing HTML and JS logic inside a single file.

• Features of JSX - Recognizable since it's similar to HTML tags and could be used to sync HTML markup and JS logic in a single file.

• JSX expression

  • JSX element - can be used anywhere like HTML

  const hi = <p>Hi</p>;

  • JS expression - by using {}(curly braces) inside JSX, we are able to log valid JS value inside a JSX

  // Greetings.js
  import React from 'react';
  
  const Greetings = () => {
  const name = '김개발';
  
  return <h1>{name}님, Welcome to Wecode!</h1>;
  };
  
  export default Greetings;

  • JSX attribute - for adding attributes, camelCase should be used. Also as attribute name could be differnt from HTML attributes, check before using attributes on the official React website

  /* HTML
  <h1 class="greetings">Welcome to Wecode!</h1>
  
  /* JSX
  <h1 className="greetings">Welcome to Wecode!</h1>

  • Handling Events - events and event hanler can be used directly in JSX while creating tags
    - use "on" former to an event with camelCase.
    - use function to add event handler

  // JS
  const title = document.getElementsByClassName("title")[0];
  title.addEventListener("click", handleClick);
  
  // JSX
  <h1 className="title" onClick={handleClick}>
    Welcome to Wecode!
  </h1> 

  • Inline Styling - camelCase and double curly braces used should be used while styling

  // HTML
  <h1 style="color:red;background-image:yellow">Welcome to Wecode!</h1>
  
  // JSX
  <h1 style={{ color: "red", backgroundImage: "yellow" }}>
  Welcome to Wecode!
  </h1>

  • Self-Closing Tag - all tags could be used as self closing tags. Tags that had one element such as an image tag(<img>) in HTML, needs to be closed with / as <img/>.
  • Nested JSX - mother tag required neccessarily

   // Bad
  const Greetings = () => {
    return (
      <h1>김개발님!</h1>
      <h2>위코드에 오신 걸 환영합니다!</h2>
    );
  }
  
   // Good
   const Greetings = () => {
     return (
       <div>
         <h1>김개발님!</h1>
         <h2>위코드에 오신 걸 환영합니다!</h2>
       </div>
     );
   }

  • React Fragment - while mother tag is mandatory while using JSX, a meaningless tag could be replaced by <React.Fragment> tag without adding meaningless DOM element. This tag can be also contracted with the following tag <>...</>.

  const Greetings = () => {
    return (
      <React.Fragment>
        <h1>김개발님!</h1>
        <h2>위코드에 오신 걸 환영합니다!</h2>
      </React.Fragment>
    );
  };

  or

  const Greetings = () => {
    return (
      <>
        <h1>김개발님!</h1>
        <h2>위코드에 오신 걸 환영합니다!</h2>
      </>
    );
  };

Summary :

1. React is a JavaScript Library for programming User Interface

2. React has the following distinct features - Declarative Programming, Vitrual DOM, Component, JSX