Component

A component is ('props) => React.element or React.component<'props>

Component definition in RescriptReact

type componentLike<'props, 'return> = 'props => 'return type component<'props> = componentLike<'props, element>

JSX component interface

  • A component is a module with:
    • make : props => React.element
    • makeProps: 'a => props
module Movie = { type props = {"title": string, "desc": string} @obj external makeProps: (~title: string, ~desc: string, ~children: React.element=?, unit) => props = "" let make = (props: props) => { <div> <h1> {props["title"]->React.string} </h1> <p> {props["desc"]->React.string} </p> </div> } } @react.component let make = () => { <div> <Movie title="Dark" desc="The best sifi movie." /> </div> }

@react.component Decorator

  • @react.component decorator helps to create component more easily
module Movie = { @react.component let make = (~title: string, ~desc: string) => { <div> <h1> {title->React.string} </h1> <p> {desc->React.string} </p> </div> } } @react.component let make = () => { <div> <Movie title="Looper" desc="The best sifi movie." /> </div> }

No need to write let make = (~title: string, ~desc: string, unit) cause @react.component helps to add it.