> For the complete documentation index, see [llms.txt](https://tutorial.specian.co.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tutorial.specian.co.uk/frontend/files-organisation.md).

# Files organisation

There are 2 important concepts with our React app: `pages` and`components`.

### 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.tsx`is responsible for display the link's information:

{% code title="Link.ts" %}

```typescript
import * as React from "react";

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

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

{% endcode %}

and `LinkList.tsx` display them as a list:

{% code title="LinkList.tsx" %}

```typescript
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>
);
```

{% endcode %}

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

{% tabs %}
{% tab title="LinksPage.tsx" %}

```typescript
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;
```

{% endtab %}

{% tab title="index.tsx" %}

```typescript
export * from "./LinksPage";
```

{% endtab %}
{% endtabs %}

`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 the`components` 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
```

{% code title="Header.tsx" %}

```typescript
import * as React from "react";

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

{% endcode %}

{% code title="LinksPage.tsx" %}

```typescript
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;
```

{% endcode %}

Replace everything in `App.tsx`

{% code title="App.tsx" %}

```typescript
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;
```

{% endcode %}

Run `yarn start` and open [localhost:3000](http://localhost:3000/).

![](/files/-LqHyhWH_5n8p26jq7YT)