Components

In React, components are the building blocks of your application. Components are reusable, and can be nested inside other components. Components can be either functional or class-based. Functional components are just functions that return JSX. Class-based components are ES6 classes that extend the React.Component class. Class-based components have access to React's lifecycle methods. You don't have to understand about React components to be able to contribute to the website, but it's good to know about them or at the very least, be able to understand how they function and how to use them in the codebase.

Whenever you create a new component, make sure to put it in the components folder. If you are creating a new component, make sure to create a new folder for it. For example, if you are creating a new component called MyComponent, you would create a folder called MyComponent and put all of the files for that component in that folder. This is to keep the codebase organized and to prevent naming conflicts. All of those files should be named MyComponent as well. For example, MyComponent.jsx. If you are creating a new component, make sure to create a new folder for it and put all of the files for that component in that folder.

So just to recap, if you are making a new component, the structure should be components/YourComponent/YourComponent.jsx (and any other files that you need for that component).

JSX

You notice in the codebase that a lot of our files end in jsx. JSX is a syntax extension to JavaScript. It's a shorthand for React.createElement(). It looks like HTML, but it's not. It's just a syntax extension to JavaScript. JSX is not required to use React, but it makes it easier to write React components. You can read more about JSX here (opens in a new tab).

For our website, every component is built in jsx files, so make sure that any new components you create are in jsx files. Eventually, we will make the shift to TypeScript (if you are proficient/advanced in web dev, this is something that you can help out with), but for now, we are using jsx.