1-3-react-jsx-and-rendering-elements.md

React | JSX and elements

React | 1. Hello World

The following code takes the tag with the id root and sets its content to <h1>Hello, world!</h1>

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

React | 2. Introducing JSX

You can see JSX as a new type. Now you can store in a variable a JSX as you would store a number for example.

Be careful in JSX, self closing tag, such as img, must be ended by />.

const element = <img src={user.avatarUrl} />;

React | 3. Rendering Elements

The only thing to remember here is that ReactDOM.render() is a function we will use once in the future and that will display our React applciation.