React.js Components Structure

The React.js components are organized within the src/components directory. This directory is further divided into two subdirectories:

• pages: Contains React components that are specific to a particular page.
• shared: Contains React components that are shared across multiple pages of the website.

Component Structure

Each component follows a consistent structure:

1. Main JavaScript File: This file contains the component’s logic and rendering logic.
2. Index File: This file exports the component’s default export.

Component Folder Structure

Each component folder may also include:

1. Folder with icons and images: Contains images and icons used by the component.

Examples

Here are some examples of how components are organized and used:

src/components/shared/list/list.jsx

import PropTypes from 'prop-types';
          import React from 'react';
          
          import Button from 'components/shared/button';
          import Heading from 'components/shared/heading';
          import Link from 'components/shared/link';
          

This file imports other shared components such as Button, Heading, and Link. It demonstrates how components can be reused across different pages.

src/components/pages/industries/cards/feature.jsx

import PropTypes from 'prop-types';
          import React from 'react';
          
          import Container from 'components/shared/container/container';
          import Heading from 'components/shared/heading';
          

This file imports a shared component Container and uses it to structure the layout of the component. It also imports the Heading component, showcasing the use of shared components within page-specific components.

Data Passing

Data can be passed between components using props. For example, a parent component can pass data to a child component as follows:

// Parent Component
          <MyChildComponent data={myData} />
          
          // Child Component
          const MyChildComponent = ({ data }) => {
            // Use the data prop here
          }
          

This demonstrates how data is passed down from parent to child components using props.

Styling

Components are styled using CSS modules. This ensures that styles are scoped to the specific component and do not conflict with other components’ styles.

Example Usage

Blog Author Component

The Blog Author component is a custom component used within Markdown files.

Isovalent, the company behind Cilium. Before that, Thomas spent 15 years as a kernel developer working on the Linux kernel in networking, security and eventually eBPF.`}
          />
          

This example demonstrates the use of the Blog Author component with header and bio props.

Additional Resources

• GatsbyJS documentation: Provides information on GatsbyJS and its features.
• ESLint: A tool for finding and fixing code style issues.
• Prettier: A code formatter for different languages, including JavaScript.
• npm-check-updates: A package for updating dependencies in a project.

Top-Level Directory Explanations

src/ - This directory contains the source code for the Cilium project.

src/components/ - This directory contains components used in the project.

src/hooks/ - This directory contains hooks used in the project.

src/layouts/ - This directory contains the layouts used for the project’s website.

src/pages/ - This directory contains the pages for the project’s website.