Study/React
-
Name a Component ClassStudy/React 2020. 5. 26. 14:41
Name a Component Class Good! Subclassing React.Component is the way to declare a new component class. When you declare a new component class, you need to give that component class a name. On line 4, notice that our component class’s name is MyComponentClass. Component class variable names must begin with capital letters! This adheres to JavaScript’s class syntax. It also adheres to a broader pro..
-
Create a Component ClassStudy/React 2020. 5. 26. 14:31
Create a Component Class You’ve learned that a React component is a small, reusable chunk of code that is responsible for one job, which often involves rendering HTML. Here’s another fact about components: every component must come from a component class. A component class is like a factory that creates components. If you have a component class, then you can use that class to produce as many com..
-
Import ReactDOMStudy/React 2020. 5. 26. 09:50
Import ReactDOM Now take a look at the code on line 2: import ReactDOM from 'react-dom'; This line of code is very similar to line 1. Lines 1 and 2 both import JavaScript objects. In both lines, the imported object contains React-related methods. However, there is a difference! The methods imported from 'react-dom' are meant for interacting with the DOM. You are already familiar with one of them..
-
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작성과 비슷하지만 자바스크립트 ..