Study/React
-
Self-Closing TagsStudy/React 2020. 5. 25. 17:21
Self-Closing Tags Another JSX ‘gotcha’ involves self-closing tags. What’s a self-closing tag? Most HTML elements use two tags: an opening tag (), and a closing tag (). However, some HTML elements such as and use only one tag. The tag that belongs to a single-tag element isn’t an opening tag nor a closing tag; it’s a self-closing tag. When you write a self-closing tag in HTML, it is optional to i..
-
class vs classNameStudy/React 2020. 5. 25. 16:06
class vs className This lesson will cover more advanced JSX. You’ll learn some powerful tricks, and some common errors to avoid. Grammar in JSX is mostly the same as in HTML, but there are subtle differences to watch out for. Probably the most frequent of these involves the word class. In HTML, it’s common to use class as an attribute name: Hey In JSX, you can’t use the word class! You have to u..
-
React: The Virtual DOMStudy/React 2020. 5. 25. 15:01
The Problem DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is also a lot slower than most JavaScript operations. This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to. As an example, let’s say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would re..
-
The Virtual DOMStudy/React 2020. 5. 25. 14:48
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 = Hello world; // This will add "Hello world" to the screen: ReactDOM.render(hello, document.getElementById('app')); // This won't do anything at all: ReactDOM.render(hel..
-
Passing a Variable to ReactDOM.render()Study/React 2020. 5. 25. 14:30
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(..
-
ReactDOM.render() IIStudy/React 2020. 5. 25. 14:23
ReactDOM.render() II Move to the right a little more, and you will see this expression: document.getElementById('app') 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. In the code editor, select index.html. See if you c..
-
ReactDOM.render() IStudy/React 2020. 5. 25. 14:13
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. import React from 'react'; import ReactDOM from 'react-dom'; // Copy code here: ReactDOM.render(Hello world, document.getElementById('app')); 렌더링 JSX 당신은 JSX 태그들을 작성하는 법을 배웠다. 이제 그것들을 어떻게 렌더하는지 배울 차례이다. JSX식을 렌터하는 것은 이것을 스크린에 나타내는 것을 의미한다..
-
JSX Outer ElementsStudy/React 2020. 5. 25. 13:53
JSX Outer Elements There’s a rule that we haven’t mentioned: a JSX expression must have exactly one outermost element. In other words, this code will work: const paragraphs = ( I am a paragraph. I, too, am a paragraph. ); But this code will not work: const paragraphs = ( I am a paragraph. I, too, am a paragraph. ); The first opening tag and the final closing tag of a JSX expression must belong t..