Study
-
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..
-
Nested JSXStudy/React 2020. 5. 25. 13:42
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: Click me! To make this more readable, you can use HTML-style line breaks and indentation: Click me! If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses. This looks strange at first, b..
-
Attributes In JSXStudy/React 2020. 5. 25. 13:33
Attributes In JSX JSX elements can have attributes, just like HTML elements can. A JSX attribute is written using HTML-like syntax: a name, followed by an equals sign, followed by a value. The value should be wrapped in quotes, like this: my-attribute-name="my-attribute-value" Here are some JSX elements with attributes: Welcome to the Web; const title = Introduction to React.js: Part I; A single..
-
JSX Elements And Their SurroundingsStudy/React 2020. 5. 25. 13:24
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…you name it. Here’s an example of a JSX element being saved in a variable: const navBar = I am a nav bar; Here’s an example of several JSX eleme..