The Road to React: The One with Hooks/

...

/

React JSX

React JSX

Let's learn about Javascript XML role in React.

We'll cover the following...

In React, when the returned output of the App component resembles HTML. This output is called JSX, which mixes HTML and JavaScript. Let’s see how this works for displaying the variable:

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

📜Note: In the app onwards we can now see the output in the browser since we are starting the app using npm start. This will start the live-server, which will then begin to listen for any changes made in our code files.

See the output in action, both in the output tab and ...