React - Getting Started (The Welcome Element)

About

React lets you create new sort of HTML element (called component) where you can pass parameters via attributes called props

Example: the Welcome element

  • The definition of Welcome tag
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • We use this new tag and save it in a variable myPage. (<note tip>This weird HTML expression in Javascript is called JSX</note>)
const MyApp = <Welcome name="Nico" />;
  • The container in the HTML page. React needs a container where to add the generated HTML. This container has generally the root Id.
<div id="root"></div>
ReactDOM.render(
  MyApp,
  document.getElementById('root')
);
  • Output:

Powered by ComboStrap