We ship this React template with a basic configuration to help you quickly get started with the development process.
Quickstart
To get started with Mosaic React, navigate to the main folder of the template, and find the file that includes -react in its name. Unzip the file and you’re ready to begin customizing your React app.
Open the project folder with the code editor of your choice and launch the terminal. Run npm i to install all the required dependencies, and then run npm run dev. Vite will run a local server and provide you with the URL to view the app. The page will reload every time you make changes.
From this point on, you can start customizing the template. Every change you make to class names will trigger CSS regeneration.
Folder structure
The folder structure of the template is designed to be easy to understand for the end user. The root of the template contains essential files for the React template to function, such as Vite configuration files and PostCSS.
The src/ folder contains all the necessary files to customize the template. React components are organized into three folders:
pages/contains the pages that make up the template.partials/includes partial components such as the header, footer, page sections, and more.utils/contains utility functions.components/contains reusable components like modals, dropdowns, and more.charts/contains the dashboard components showing charts made with Chart.js.
In addition, the src/ directory contains other folders such as css/ and images/, whose contents are explicitly described by their respective names.
Routing
Routing is the process of redirecting to a different page based on user navigation. In the React template, we use an external library called React Router, which is imported into the main.jsx file and enables client-side routing.
In the App.jsx file, we imported all the template pages and defined routes for each of them using their respective paths.
Adding or removing pages
Every template comes with a set of pre-built pages. At some point, you may need to add or remove pages from your site.
To remove a page, find the page component to remove and delete it. After that, you’ll also need to remove the import statement from the App.jsx file and the corresponding route path.
To add a new page to your website or app, you’ll need to follow a few steps. First, you’ll need to create a new page component. This component will contain the code that defines the content and layout of the new page.
Once you’ve created the component, you’ll need to import it into the App.jsx file. This file is the main entry point for your app, and it contains the code that sets up the routing system for your pages. By importing your new component into this file, you’ll be able to include it in your app’s navigation flow.
Finally, you’ll need to define a route path for the new page. This is the URL that users will use to access the new page. By defining a route path, you’ll be telling your app which component to render when a user navigates to the specified URL.
Building and deploying your React app
After making your changes, run npm run build to compile and minify your code for production. By default, the build output will be placed in the dist folder. Once you have built the app, you can test it locally by running the npm run preview command.
If everything is working correctly, you’re ready to deploy your app. You can use GitHub Pages, GitLab Pages, Netlify, Vercel, or any other hosting service you prefer. For more information, refer to the Vite documentation.