Creating a New Page in React Project

Creating new pages is a fundamental task in expanding the functionality of an application. In a React project, the user interface doesn't consist of pages in the traditional sense. Instead, what we observe in the browser are React components that are associated with routes.

In our React project, we have a "pages" folder that includes components such as "Sign In" and "Sign Up" among others, which function as individual pages. These components are constructed by integrating various elements from the "atoms" and "molecules" folder. To illustrate this concept, let us examine the Sign In page as an example.

On the Sign In page, there is a header and a form containing various input text boxes, such as those for Username and Password, as well as different types of buttons, including Sign In and Sign Up. These elements are combinations of atoms and molecules; the Header and FormBuilder are molecules, while the Textboxes and buttons are atoms.

For more information on the folder structure, refer to Understanding React Folder Structure document,

Creating a new page

Follow the below mentioned steps to create a new page in React Project.

1. Create a new file under pages folder with the .jsx extension. This process is similar to creating a component in React.
   Below screenshot displays the sample code for a React component.
   
2. Register the newly created component into index.jsx for routing. Like other folders, pages folder also has "index.jsx" file.
   
3. Configuring routing for the newly create page by following the instructions given in Configuring Routing to existing or new page document.
4. Integrate the required atoms and molecules as per requirement. For more details for creating reusable components refer to the document Creating Reusable Components in React. For steps to integrate using reusable components refer to document
   Using Reusable Components.