How to update and integrate React components?

Some of our content was developed using React documentation here, as it is a big part of Docusaurus. In this wiki, we want to give you instructions on how and where we use it. If you are not familiar with React, hopefully you'll feel more confident to make changes after reading this page.

Where is React used?

Following the default docusaurus structure, we have developed 3 of our main pages with React. They are:

• Home

In our folder structure, this page is developed in ./src/pages/index.js as it is the entry point of our website.

This index.js is defined as a React component. Its content is being imported from other React components located in the folder ./src/components. They are:

• HomePageHeader ./src/components/HomePageHeader/index.js

  • NewsTicker .src/components/Newsticker/index.js

• AboutUsCard ./src/components/AboutUsCard/index.js

• CarouselComponent ./src/components/CarouselComponent/index.js

• FAQsComponent ./src/components/FAQsComponent/index.js

If you want to make any change to the Home page, make sure you modify the right component of the ones named above.

• AboutUs

In our folder structure, this page is developed in ./src/pages/AboutUs/index.js

This index.js is defined as a React component. Its content is being imported from other React components located in the folder ./src/components. They are:

• AboutUsHeader ./src/components/AboutUsHeader/index.js

• AboutUsContent ./src/components/AboutUsContent/index.js

If you want to make any change to the AboutUs page, make sure you modify the right component of the ones named above.

• Developer

In our folder structure, this page is developed in ./src/pages/Developer/index.js

This index.js is defined as a React component. Its content is imported from other React components located in the folder ./src/components. They are:

• DeveloperHeader ./src/components/DeveloperHeader/index.js

• DeveloperContent ./src/components/DeveloperContent/index.js

• KitsGallery ./src/components/KitsGallery/index.js

If you want to make any change to the Developer page, make sure you modify the right component of the ones named above.

How to modify the content?

The content of each React component is fairly intuitive once you compare the code to what is displayed in the UI. Adding or removing text-based information in these components is not complicated.

However, there are some components that make use of some external design libraries that will require more knowledge of React. These are the <CarouselComponent /> (developed with Slick-Carousel) and the <FAQsComponent /> (developed with MaterialUI Accordion)