React and JSX

JSX ("JavaScript XML") refers to the the markup language, a well-established and popular form of syntactic sugar, that we use in React to build out a web app's user interface:

• has a very HTML-like syntax
• unlike HTML, it allows for variable or conditional "what-if" types of renderings

JSX lives inside the return statement (which renders the UI) of a function component:

function App() {
  const appName = "yourname"
  return (        
    <div className="App">
      <p>Welcome to ${appName}</p>
    </div>
  )
}

JSX and DOM manipulation

As we can see from the previous code snippet, most of the DOM manipulation work happens before the return (render) statement! There we can do "programming things" like:

• declaring state variables
• proposing handler methods for events
• fetching data from external sources
• assigning (miscellaneous) variables

Thus, a React file (simply just a .js/.jsx file) that consists of:

• a function with
  • some programmatic instructions using JavaScript
  • a virtual DOM render using JSX