JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display user.name
:
return (
< h1 >
{ user . name }
</ h1 >
) ;
You can also “escape into JavaScript” from JSX attributes, but you have to use curly braces instead of quotes. For example, className="avatar"
passes the "avatar"
string as the CSS class, but src={user.imageUrl}
reads the JavaScript user.imageUrl
variable value, and then passes that value as the src
attribute:
return (
< img
className = "avatar"
src = { user . imageUrl }
/>
) ;
If you want to change selection, open document below and click on "Move attachment"
Quick Start – React the simplest case, you’ll add a <link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project. Displaying data <span>JSX lets you put markup into JavaScript. Curly braces let you “escape back” into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display user.name: return ( <h1> {user.name} </h1> ); You can also “escape into JavaScript” from JSX attributes, but you have to use curly braces instead of quotes. For example, className="avatar" passes the "avatar" string as the CSS class, but src={user.imageUrl} reads the JavaScript user.imageUrl variable value, and then passes that value as the src attribute: return ( <img className="avatar" src={user.imageUrl} /> ); You can put more complex expressions inside the JSX curly braces too, for example, string concatenation: App.js App.js Download Reset Fork 99 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1 Summary
status | not read | | reprioritisations | |
---|
last reprioritisation on | | | suggested re-reading day | |
---|
started reading on | | | finished reading on | |
---|
Details