Study/React
-
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..
-
What is JSX?Study/React 2020. 5. 25. 13:17
What is JSX? JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML. What does “syntax extension” mean? In this case, it means that JSX is not valid JavaScript. Web browsers can’t read it! If a JavaScript file contains JSX code, then that file will have to be compiled. That means that before the file reaches a web browser, a JSX compiler wi..
-
The Mystery, RevealedStudy/React 2020. 5. 25. 12:30
INTRO TO JSX The Mystery, Revealed Good! Take another look at the line of code that you wrote. Does this code belong in a JavaScript file, an HTML file, or somewhere else? The answer is…a JavaScript file! Despite what it looks like, your code doesn’t actually contain any HTML at all. The part that looks like HTML, Hello world, is something called JSX. Click Next to learn about JSX. intro to jsx ..
-
Hello WorldStudy/React 2020. 5. 25. 12:21
Hello World Take a look at the following line of code: const h1 = Hello world; What kind of weird hybrid code is that? Is it JavaScript? HTML? Or something else? It seems like it must be JavaScript, since it starts with const and ends with ;. If you tried to run that in an HTML file, it wouldn’t work. However, the code also contains Hello world, which looks exactly like HTML. That part wouldn’t ..
-
Why React?Study/React 2020. 5. 25. 11:09
Why React? React.js is a JavaScript library. It was developed by engineers at Facebook. Here are just a few of the reasons why people choose to program with React: React is fast. Apps made in React can handle complex updates and still feel quick and responsive. React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a..