Welcome to the documentation for the Azzle React Template! This guide will help you understand the structure of the template, its components, and how to effectively use and customize it for your projects.
Hello! Welcome to Azzle's official documentation. Simple, Flexible, ready to use React Template which will bring you so much closer to your end goals. Let’s dive in.
React is constructed leveraging Node.js. as its foundation. To initiate your journey with React, it's essential to have an up-to-date version of Node.js and For managing routing within your React application, the employment of React Router DOM is necessary.
We require many packages (dependencies) to run our site.
Move into
/azzle-ai (project root) directory and run
command below.
npm install
After the installation, you should have a folder named
/node_modules in the project root directory..
To start our development server run command below:
npm run devOpen your browser and visit http://localhost:5173!. You should see a page like below.
Awesome! You are a genious.
Now open the code editor and start hacking!
Some useful commands to work with the project.
1. npm run dev to
Start development server at
http://localhost:5173
2. npm run build for
Generating production build
3. npm run preview To
serve build files at
http://localhost:4173
Follow the steps below to setup your site template:
azzle-react/src/components - Component
files
azzle-react/src/hooks - Hooks filesazzle-react/src/pages - All pagesazzle-react/public/assets - Asset files
azzle-react/src/styles - Style filesazzle-react/index.html - Root file
We have integrated Tailwind CSS for styling in the template.
If you're familiar with Tailwind CSS, you can modify the
Tailwind configuration file
tailwind.config.js to customize the design
according to your requirements.
The styles are organized in the
src/style directory. You can locate the
style.css file within this directory, which
serves as the entry point for Tailwind CSS. Here, you can
customize Tailwind's utility classes and extend them as
needed.
To make changes, navigate to the
src/style directory and edit the
style.css file based on your preferences.
Tailwind's utility-first approach allows for quick and
efficient styling adjustments.
If you require a more advanced setup, you can edit the
respective files yourself within the same folder. Tailwind
provides modular CSS files, allowing you to include only the
necessary styles for your project. You can manage these styles
in your style.css file.
Feel free to leverage Tailwind's extensive utility classes to
minimize the CSS output and include only the styles required
for your components. This can be achieved by configuring your
tailwind.config.js
file to include only the necessary utilities.
You can update the logo by simply replacing it with a new logo of the same name.
1. Navigate to the src/assets/img directory
within your project.
2. Locate the existing logo file that you wish to replace. Ensure that the replacement logo you have matches the same file format (e.g., PNG, JPG) and has the same name as the original logo file.
3. Once you've found the original logo file, simply replace it with your new logo file. Make sure to use the same filename to ensure that the project references the new logo correctly.
4. After replacing the logo file, any references to the logo throughout your project will automatically reflect the changes, as long as they are referencing the file by its filename.
5. You may need to restart your development server or rebuild your project for the changes to take effect, depending on your development environment.
6. That's it! You've successfully replaced the logo in your project.
Documentation and examples for header, footer, layout and Root App.jsx
In the azzle-react/src/pages directory, you'll
find two folders: common and home
The common folder contains pages that are shared
and can be used across different sections of the application.
These pages, such as login and signup, are designed to be
reusable and can be integrated with any other home pages.
Within the home folder, you'll discover four
distinct home pages. Each home page represents a unique layout
or design variation for the main landing page of the
application.
The App.js file, located at
azzle-react/src/App.js, sets up the routing for
the application using react-router-dom . Here's
an overview of the App.js component:
Routes component is used to define the
routing for the application.
< Route > element
that wraps the < Layout /> component.
< Layout /> component serves as the layout
for the entire application, containing the header, main
content, and footer.
(Home_01)(Login)(Blog)Error_404
component.
The Layout.jsx component, located at
azzle-react/src/components/layout/Layout.jsx
, provides a consistent layout structure for the pages. It
includes a header, main content area, and footer. Here's an
example of the Layout.jsx component:
Layout.jsx component is a functional
component that wraps the entire content in a
< div > element with the class
page-wrapper.
Header component is rendered at the
top.
< Outlet /> component is used as a
placeholder for rendering child components based on the
nested routes.
Footer_01 component is rendered at the
bottom.
< Layout /> component to provide a
consistent layout structure.
< Outlet /> component to render
nested child components based on routes.
To integrate the Header component into your pages, follow these steps:
src/components/header directory into your page
component file.
loginCSS, signupCSS,
navColor, and light as needed for
customization.
loginCSS,
signupCSS, navColor, and
light props. These props allow you to control
the appearance and behavior of the header based on your
application's design requirements.
loginCSS: CSS class for the login Button.
signupCSS: CSS class for the sign-up
Button.
navColor: Color for the navigation bar.
light: Boolean value to determine if the
header should have a light or dark style.
Header component in this way
ensures a consistent and customizable header across various
sections or pages of your application. It simplifies the
process of managing the header's appearance and
functionality, enhancing the user experience.
The list of various footer types & its descriptions are
provided below for your reference: Inside the
src/components/footer folder, you'll find four
distinct footer components contributing to the project's
structure.
Inside the
src/components/footer/Footer_01 folder, you'll
find Footer Variant One component.
Inside the
src/components/footer/Footer_02 folder, you'll
find Footer Variant Two component.
Inside the
src/components/footer/Footer_03 folder, you'll
find Footer Variant Three component.
Inside the
src/components/footer/Footer_04 folder, you'll
find Footer Variant Four component.
Documentation and examples for displaying typography, table, image and video and more..
Documentation and examples for typography, headings, body text, lists, and more.
| Heading | Example |
|---|---|
<h1></h1>
|
h1. Heading |
<h2></h2>
|
h2. Heading |
<h3></h3>
|
h3. Heading |
<h4></h4>
|
h4. Heading |
<h5></h5>
|
h5. Heading |
<h6></h6>
|
h6. Heading |
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted
text.
This line of text is meant to be treated as no longer
accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
The React Icons library is a popular set of icon components for React applications. It provides a collection of icon components that can be easily integrated into your React projects, allowing you to add icons to your user interface without the need for external image files.
A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.
See what's new added, changed, fixed, improved or updated in the latest versions.
Initial Release