Study
-
Import ReactStudy/React 2020. 5. 26. 09:39
Import React Wooo! Your first React component! Take a look at the code on line 1: import React from 'react'; This line of code creates a new variable. That variable’s name is React, and its value is a particular, imported JavaScript object: // create a variable named React: import React from 'react'; // evaluate this variable and get a particular, imported JavaScript object: React // { imported ..
-
Hello World, Part II... THE COMPONENTStudy/React 2020. 5. 26. 09:06
Hello World, Part II... THE COMPONENT React applications are made out of components. What’s a component? A component is a small, reusable chunk of code that is responsible for one job. That job is often to render some HTML. Take a look at the code below. This code will create and render a new React component: import React from 'react'; import ReactDOM from 'react-dom'; class MyComponentClass ext..
-
Variable Attributes in JSXStudy/React 2020. 5. 25. 18:57
Variable Attributes in JSX When writing JSX, it’s common to use variables to set attributes. Here’s an example of how that might work: // Use a variable to set the `height` and `width` attributes: const sideLength = "200px"; const panda = ( ); Notice how in this example, the ‘s attributes each get their own line. This can make your code more readable if you have a lot of attributes on one elemen..
-
Variables in JSXStudy/React 2020. 5. 25. 17:59
Variables in JSX When you inject JavaScript into JSX, that JavaScript is part of the same environment as the rest of the JavaScript in your file. That means that you can access variables while inside of a JSX expression, even if those variables were declared on the outside. // Declare a variable: const name = 'Gerdo'; // Access your variable // from inside of a JSX expression: const greeting = H..
-
Curly Braces in JSXStudy/React 2020. 5. 25. 17:31
JavaScript In Your JSX In Your JavaScript So far, we’ve focused on writing JSX expressions. It’s similar to writing bits of HTML, but inside of a JavaScript file. In this lesson, we’re going to add something new: regular JavaScript, written inside of a JSX expression, written inside of a JavaScript file. Whoaaaa… 당신의 자바스크립트 안에 JSX안에 JS 지금까지 우리는 JSX식 작성하는 것에 초점을 맞추었다. 이것은 약간 HTML작성과 비슷하지만 자바스크립트 ..
-
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..