HOME DOCS PWA ABOUT
  1. Replicator
    1. Write
    2. Read
    3. Upgrading the Container
  2. Concepts
    1. Storing Information
    2. Writing Specifications
    3. Retrieving Information
  3. Create an App
    1. Create React App
    2. Install Jinaga
    3. Define a Model
    4. Initialize a Starting Point
    5. Declare a Component
    6. Match Successor Facts
    7. Declare a Child Component
  4. Write Tests
    1. Write Some Tests (JavaScript)
    2. Write Some Tests (TypeScript)
    3. Create Related Facts
    4. Query Facts
    5. Export the Model (JavaScript)
    6. Export the Model (TypeScript)
    7. Authorize Facts
  5. Conventions
    1. JavaScript
    2. TypeScript
  6. Reference
    1. Jinaga
      1. fact
      2. query
      3. watch
      4. for
      5. match
      6. exists
      7. notExists
      8. not
      9. hash
      10. login
      11. local
      12. service
      13. onError
      14. onLoading
      15. onProgress
      16. graphviz
      17. inspect
    2. Preposition
      1. then
    3. Syntax diagram
  7. Jinaga React
    1. Composition
    2. Field Specification Functions
      1. field
      2. projection
      3. collection
      4. property
      5. mutable
      6. array
  1. Create an App

Declare a Component

We'll declare a component to display a site. Inside de src folder, create a folder called components. Inside that folder, create a file called SiteContainer.tsx.

With Jinaga-React, you can create a specification that reads properties from a starting fact. Define a specification that starts with the Site fact.

import { field, jinagaContainer, mapProps, specificationFor } from "jinaga-react";

import { j } from "../jinaga-config";
import { Site } from "../model/site";

const siteSpecification = specificationFor(Site, {
  domain: field(d => d.domain)
});

So far we only have one property. It is mapped to the domain field of the Site fact.

Now map that property to a React component.

const siteMapping = mapProps(siteSpecification).to(({ domain }) => (
  <div>
    <h1>{domain}</h1>
  </div>
));

Finally, create a Jinaga container for that mapping.

export default jinagaContainer(j, siteMapping);

Now you can add this component to the app in App.tsx.

import SiteContainer from "./components/SiteContainer";

function App() {
  //...

  return (
    <div className="App">
      <SiteContainer fact={site} />
    </div>
  )
}

Continue With

Match Successor Facts