Files organisation

There are 2 important concepts with our React app: pages andcomponents.

Pages

Each folder correspond to a URL and contains everything the page needs.

Example /links displays all the links saved by a user.

.
└── src
    └── pages
        └── links
            ├── Link.tsx
            ├── LinkList.tsx
            └── index.tsx

Link.tsxis responsible for display the link's information:

Link.ts

import * as React from "react";

export interface LinkProps {
  id: string;
  uri: string;
  userId: string;
}

export const Link = (props: LinkProps) => <div>URI: {props.uri}</div>;

and LinkList.tsx display them as a list:

LinkList.tsx

import * as React from "react";
import { LinkProps, Link } from "./Link";

export interface LinkListProps {
  links: LinkProps[];
}

export const LinkList = (props: LinkL
istProps) => (
  <div>
    {props.links.map(link => (
      <Link {...link} />
    ))}
  </div>
);

Then LinksPage.ts fetches the data and uses the created components to display it:

LinksPage.tsx

import * as React from "react";
import { LinkList } from "./LinkList";

const getData = () => [{ id: "1", uri: "http://mock", userId: "userid" }];

export const LinksPage = () => (
  <div>
    <LinkList links={getData()} />
  </div>
);

// we export default pages for code splitting later
// more info at https://reactjs.org/docs/code-splitting.html
export default LinksPage;

index.tsx

export * from "./LinksPage";

Link and LinkList are components but to keep it simple, we keep things related to each other close to each other. This prevent files juggling when editing a page.

If we use Link in more than one page, then we will move it to thecomponents folder.

Components

This folder containers all components that are used in more that one place. Let's add a Header to our LinksPage.

.
├── src
    ├── components
    │   └── Header
    │       ├── Header.tsx
    │       └── index.tsx
    └── pages
        └── links
            ├── Link.tsx
            ├── LinkList.tsx
            └── index.tsx

Header.tsx

import * as React from "react";

export const Header = () => <div>Header here</div>;

LinksPage.tsx

import * as React from "react";
import { LinkList } from "./LinkList";
import { Header } from "../../components/Header";

const getData = () => [{ id: "1", uri: "http://mock", userId: "userid" }];

export const LinksPage = () => (
  <div>
    <Header />
    <LinkList links={getData()} />
  </div>
);

// we export default pages for code splitting later
// more info at https://reactjs.org/docs/code-splitting.html
export default LinksPage;

Replace everything in App.tsx

App.tsx

import React from 'react';
import './App.css';
import { LinksPage } from './pages/links';

const App: React.FC = () => {
  return (
    <div className="App">
      <LinksPage />
    </div>
  );
}

export default App;

Run yarn start and open localhost:3000.