React.js: INTRO TO JSX

dolphinSarah·2020년 8월 19일

INTRO TO JSX

Why React?

왜 사람들은 React를 선택할까?

React is fast.
React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's maintainability problems.
React is scalable. Large programs that display a lot of changing data are where React performs best.
React is flexible.
React is popular. It will make you more employable.

Hello World

const h1 = <h1>Hello world</h1>;

위의 코드를 한 번 보자. 이상하지 않은가?
const로 시작해서 ;로 끝나니까 분명 JavaScript 같으면서도 HTML의 코드가 적혀 있다.

이 코드를 HTML 파일에서 실행해보면 잘 되지 않을 것이다. JavaScript 파일에서도 마찬가지다. 무슨 일일까?

The Mystery, Revealed

사실 이 파일은 JavaScript에 속한다!

<h1>Hello world</h1>

HTML처럼 보이는 위의 코드는 JSX라고 불리는 것이다.

What is JSX?

JSX는 JavaScript를 위한 syntax extension이다. React에서 쓰이며, JSX의 코드는 HTML과 많이 닮아 보인다.

syntax extension이란... JSX is not valid in JavaScript. Web browsers can't read it!

If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler will translate any JSX into regular JavaScript.

JSX Elements

A basic unit of JSX is called a JSX element.

<h1>Hello world</h1>

HTML처럼 보이지만 이 코드는 HTML 파일이 아닌 JavaScript 파일에서 찾을 수 있다.

JSX Elements And Their Surroundings

JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go.

That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array...

Here's an example of JSX element being saved in a variable :

const navBar = <nav>I am a nav bar</nav>;

Here's an example of several JSX elements being stored in an object :

const myTeam = {
  center: <li>Benzo Walli</li>,
  powerForward: <li>Rasha Loa</li>,
  smallForward: <li>Tayshaun Dasmoto</li>,
  shootingGuard: <li>Colmar Cumberbatch</li>,
  pointGuard: <li>Femi Billon</li>
};

Attributes In JSX

JSX elements can have attributes, like HTML elements can.

Here are some JSX elements with attributes:

<a href="http://www.example.com">Welcome to the Web</a>;

const title = <h1 id="title">Introduction to React.js: Part I</h1>;

A single JSX elements can have many attributes , just like in HTML:

const panda = <img src="images/panda.jpg" alt="panda" width="500px" height="500px" />;

Nested JSX

You can nest JSX elements inside of other JSX elements, just like in HTML.

Here's an example of a JSX element, nested inside of a JSX element:

<a href="https://www.example.com"><h1>Click me!</h1></a>

To make this more readable, you can use HTML-style line breaks and indentation:

<a href="https://www.example.com">
  <h1>
    Click me!
  </h1>
</a>

If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses.

(
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
)

Nested JSX expressions can be saved as variables, passed to functions, etc, just like non-nested JSX expressions can!

Here's an example of a nested JSX expression being saved as a variable:

 const theExample = (
   <a href="https://www.example.com">
     <h1>
       Click me!
     </h1>
   </a>
 );

JSX Outer Elements

A JSX expression must have exactly one outermost element.

In other words, this code will work:

const paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);

But this code will not work:

const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

The first opening tag and the final closing tag of a JSX expression must belong to the same JSX element!

If you notice that a JSX expression has multiple outer elements, the solution is usually simple: wrap the JSX expression in a div element.

Rendering JSX

You've learned how to write JSX elements! Now it's time to learn how to render them.

To render a JSX expression means to make it appear onscreen.

The following code will render a JSX expression:

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

JavaScript is case-sensitive , so make sure to capitalize ReactDOM correctly!

ReactDOM.render() I

ReactDOM is the name of a JavaScript library. This library contains several React-specific methods, all of which deal with the DOM in some way or another.

ReactDOM.render() is the most common way to render JSX. It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM. That is the way to make a JSX expression appear onscreen.

import React from 'react';
import ReactDOM from 'react-dom';

// This is just an example, switch to app.js for the exercise.
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

First argument being passed to ReactDOM.render() is h1~.

ReactDOM.render()'s first argument should be a JSX expression , and it will be rendered to the screen.

ReactDOM.render() II

You just learned that ReactDOM.render() makes its first argument appear onscreen.

But where on the screen should that first argument appear ?

The first argument is appended to whatever element is selected by the second argument.

Selected element acts as a container for ReactDOM.render()'s first argument!

Passing a Variable to ReactDOM.render()

ReactDOM.render()'s first argument should evaluate to a JSX expression, it doesn't have to literally be a JSX expression.

The first argument could also be a variable, so long as that variable evaluates to a JSX expression.

In this example, we save a JSX expression as a variable named toDoList. We then pass toDoList as the first argument to ReactDOM.render():

const toDoList = (
  <ol>
    <li>Learn React</li>
    <li>Become a Developer</li>
  </ol>
);

ReactDOM.render(
  toDoList, 
  document.getElementById('app')
);

The Virtual DOM

One special thing about ReactDOM.render() is that it only updates DOM elements that have changed.

That means that if you render the exact same thing twice in a row, the second render will do nothing:

const hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:

ReactDOM.render(hello, document.getElementById('app'));

// This won't do anything at all:

ReactDOM.render(hello, document.getElementById('app'));

Only updating the necessary DOM elements is a large part of what makes React so successful.

React accomplishes this thanks to something called the virtual DOM.

If you wanna learn more, read this article about the Virtual DOM: https://www.codecademy.com/articles/react-virtual-dom

In summary, here's what happens when you try to update the DOM in React:
1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the real DOM.
4. Changes on the real DOM cause the screen to change.