Elementy strony

W następnych podrodziałach omówiono kolejno:

• Listy
• Formularze
• Szablony
• Nawigację (routing)
• Style

Dodatkowym elementem budowy stron są kontrolki (widgets) i związane z nimi style. Istnieje możliwość skorzystania z gotowych rozwiązań przeniesioych do środowiska React:

• Twitter Bootstrap: https://react-bootstrap.github.io/
• Wix: https://github.com/wix/wix-style-react
• Material: https://material-ui.com/

Listy

W elementach React można używać list:

const alist = (props)  => {
  let arr = [
   <h1 key="1">TYTUŁ</h1>,
   <h2 key="2">subtytuł</h2>,
  ];
 return <div>{arr}</div>;
}

W bardziej złożonych przypadkach można wykonać renderowanie listy przy użyciu mapowania:

const amap = (props)  => {
  let names = ['Pierwszy', 'Drugi', 'Treci'];
  return <div> {
      names.map(function (name, index) {
          return <div key={index}>Nazwa = {name}</div>
      })
      }
      </div>;
}

Zobacz przykład [026]

Więcej informacji: https://reactjs.org/docs/lists-and-keys.html