React - Getting Started (The Welcome Element)

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - About

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

Advertising

3 - Example: the Welcome element

  • The definition of Welcome tag
index.jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • We use this new tag and save it in a variable myPage. (This weird HTML expression in Javascript is called JSX)
index.jsx
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.
index.html
<div id="root"></div>
index.jsx
ReactDOM.render(
  MyApp,
  document.getElementById('root')
);
  • Output:

web/javascript/react/getting_started.txt · Last modified: 2019/06/21 14:48 by gerardnico