Intro To JSX

이 글은 React의 JSX에 관한 기본 개념 및 문법을
정리하기 위해 작성하였습니다.

---

< Why React? >

React.js is a Javascript library (It was developed by engineers at Facebook)

 

< Reasons why people choose to program with React >

1. React is fast. Apps made in React can handle complex updates and still feel quick and responsive.
2. 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.
3. React is scalable. Large programs that display a lot of changing data are where React performs best.
4. React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React’s potential.
5. React is popular. While this reason has admittedly little to do with React’s quality, the truth is that understanding React will make you more employable.

 

 

---

< What is JSX? >

Jsx is a syntax extension for javascript and looks a lot like HTML,
it was written to be used with React.

 

• Syntax extension means that JSX is not valid javascript. Web browser can't read it!
  If a javascript file contains JSX code, then that file will have to be compiled.
  (a JSX compiler will translate any JSX into regular javascript)

 

ex)

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

: in this code, '<h1>Hello World</h1>' is a JSX code.

 

 

---

< JSX Elements >

A basic unit of JSX is called a JSX element.   ex)   <h1>Hello World</h1>

JSX elements are treated as Javascript expressions.
This means that a JSX element can be saved in a variable, passed to a function, stored in a object or array.

 

ex)

// example of a JSX element being saved in a variable:
const navBar = <nav>I am a nav bar</nav>;

// 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>
};

 

Reference to Javascript expressions :

 

 

https://masteringjs.io/tutorials/fundamentals/expressions

 

What is a JavaScript Expression?

https://2ssue.github.io/common_questions_for_Web_Developer/docs/Javascript/expression_statement.htmlhttps://mast

JavaScript에서 expression과 statement는 어떤 차이가 있을까요? | 2ssue's dev note

 

 

---

< Attributes In JSX >

JSX elements can have attributes, just like HTML elements can.

 

ex)

// example 1
const title = <h1 id='title'>Introduction to React.js: Part I</h1>;
// example 2
const panda = <img src='images/panda.jpg' alt='panda' width='500px' height='500px' />;

 

 

---

< Nested JSX >

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

 

• If JSX expression takes up more than one line, you must wrap the multi-line JSX expression in ( )

 

ex)

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

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

 

 

---

< JSX Outer Elements >

There's a rule : a JSX expression must have exactly one outermost element.
(The first opening tag and the final closing tag of a JSX expression must belong to the same JSX element!)

 

ex)

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

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

 

 

---

< ReactDOM.render() >

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

 

• ReactDOM.render() takes two arguments.
  - first argument : JSX expression that will be rendered to the screen.
  - second argument : Decide where to appear.

 

< In More Detail >
: ReactDOM.render() takes a JSX expression, creates a corresponding tree of DOM nodes, and add that tree to the DOM. This is the way to make a JSX expression appear onscreen.

 

ex)

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

// JSX Variable also Work!
const toDoList = (
  <ol>
    <li>Learn React</li>
    <li>Become a Developer</li>
  </ol>
);
 
ReactDOM.render(
  toDoList, 
  document.getElementById('app')
);

 

 

---

< The Virtual DOM >

ReactDOM.render() is only updates DOM elements that have changed.
This means that if you render exact same thing twice in a row, the second will do nothing.

 

ex)

const hello = <h1>Hello world</h1>;
 
// This will add "Hello world" to the screen:
ReactDOM.render(hello, document.querySelector('body'));
 
// This won't do anything at all:
ReactDOM.render(hello, document.querySelector('body'));

: This is significant! 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 want to know what is virtual DOM, please reference this
  : https://begin-to-end-project.tistory.com/23

Virtual DOM