Kurz 3(2) - A Practical Start with React

Něco jako psaní komponent asi patří do samostatného postu.

Komponenty se v Reactu dělí na function a class. Stavové a nejstavové. Function komponenta je vlastně reference na anonymní funkci, co nemá ani return statement

const TableTab = () => (
<div className="container">
  <div className="alert alert-success" role="alert">
    <h4 className="alert-heading">Well done!</h4>
  </div>
</div>
);  

Statové komponenty, co mají i Lifecycle musí dědit z React.Component klasy.

Nejdřív to jednodušší. Props. Uložiště pro vlastnosti každé komponenty.Následně můžeme napsat něco takového.

import React from 'react';
const Header = (props) => {
    if(props.headerText)
    return ( <div><h1>{props.headerText}</h1></div> );
}
 
export default Header;

a vyrenderujeme jako

<Header headerText="wow"></Header>

Pretty ez asi. Při renderu pole dětí se používá .map nějak takto

  <tbody>
    {this.props.posts.map(function(post) {     
return (
    <tr>
      <td>{post.id}</td>
      <td>{post.title}</td>
      <td>{post.body}</td>
    </tr>
       ) 
    })}
  </tbody>

Jelikož je všechno generické a netypové, tak se může použít balíček prop-types, který dovoluje definovat které props vlastnosti jsou required. Nebo použít Typescript, který to řeší interfacy