Delpoyed Link:- https://store.misccart.com
|
|
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
React Client with Axios to make CRUD requests to Rest API in that:
React Axios GET request: get all Tutorials, get Tutorial by Id, find Tutorial by title React Axios POST request: create new Tutorial React Axios PUT request: update an existing Tutorial React Axios DELETE request: delete a Tutorial, delete all Tutorials
Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
yarn add react-icons
# or
npm install react-icons --saveexample usage
import { FaBeer } from "react-icons/fa";
function Question() {
return (
<h3>
{" "}
Lets go for a <FaBeer />?{" "}
</h3>
);
}View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under react-icons you import from.
For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons/md';
If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.
yarn add @react-icons/all-files
# or
npm install @react-icons/all-files --saveexample usage
import { FaBeer } from "@react-icons/all-files/fa/FaBeer";
function Question() {
return (
<h3>
{" "}
Lets go for a <FaBeer />?{" "}
</h3>
);
}You can add more icons by submitting pull requests or creating issues.
You can configure react-icons props using React Context API.
Requires React 16.3 or higher.
import { IconContext } from "react-icons";
<IconContext.Provider value={{ color: "blue", className: "global-class-name" }}>
<div>
<FaFolder />
</div>
</IconContext.Provider>;| Key | Default | Notes |
|---|---|---|
color |
undefined (inherit) |
|
size |
1em |
|
className |
undefined |
|
style |
undefined |
Can overwrite size and color |
attr |
undefined |
Overwritten by other attributes |
title |
undefined |
Icon description for accessibility |
Import path has changed. You need to rewrite from the old style.
// OLD IMPORT STYLE
import FaBeer from "react-icons/lib/fa/beer";
function Question() {
return (
<h3>
{" "}
Lets go for a <FaBeer />?{" "}
</h3>
);
}// NEW IMPORT STYLE
import { FaBeer } from "react-icons/fa";
function Question() {
return (
<h3>
{" "}
Lets go for a <FaBeer />?{" "}
</h3>
);
}From version 3, vertical-align: middle is not automatically given. Please use IconContext to specify className or specify an inline style.
<IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>Component
<IconContext.Provider value={{ className: 'react-icons' }}>CSS
.react-icons {
vertical-align: middle;
}Dependencies on @types/react-icons can be deleted
npm remove @types/react-icon/fa
### Development
```bash
yarn
yarn submodule # fetch icon sources
cd packages/react-icons
yarn buildThe preview site is the react-icons website, built in NextJS.
cd packages/react-icons
yarn build
cd ../preview
yarn start[Bootstrap 5][bootstrap] components built with [React][react].
[![GitHub Actions CI status][gh-actions-badge]][gh-actions] [![Travis CI Build status][travis-badge]][travis] [![npm][npm-badge]][npm] [![Codecov][codecov-badge]][codecov] [![Discord][discord-badge]][discord] [![Netlify][netlify-badge]][netlify]
React-Bootstrap is compatible with various versions of Bootstrap. As such, you need to ensure you are using the correct combination of versions.
See the below table on which version of React-Bootstrap you should be using in your project.
| Bootstrap Version | React-Bootstrap Version | Documentation |
|---|---|---|
| v5.x | 2.x | [Link][v5-documentation] |
| v4.x | 1.x | [Link][v4-documentation] |
| v3.x | 0.33.x (not maintained) | [Link][v3-documentation] |
If you would like to update React-Bootstrap within an existing project to use Bootstrap 5, please read our docs for [migrating to React-Bootstrap V2][v5-migration].
If you would like to update React-Bootstrap within an existing project to use Bootstrap 4, please read our docs for [migrating to React-Bootstrap V1][v4-migration].
- [react-router-bootstrap][react-router-bootstrap] – Integration with [React Router][react-router]
- [Awesome React Bootstrap Components][awesome-react-bootstrap-components] - Additional components like off-canvas navbar, switch and sliders.
Yarn is our package manager of choice here. Check out setup
instructions here if you don't have it installed already.
After that you can run yarn run bootstrap to install all the needed dependencies.
From there you can:
- Run the tests once with
yarn test(Or run them in watch mode withyarn run tdd). - Start a local copy of the docs site with
yarn start - Or build a local copy of the library with
yarn run build
Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.
It's the https://chakra-ui.com website for the latest version of Chakra UI. For older versions head over here
To use Chakra UI components, all you need to do is install the
@chakra-ui/react package and its peer dependencies:
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
# or
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6To start using the components, please follow these steps:
- Wrap your application with the
ChakraProviderprovided by @chakra-ui/react.
import { ChakraProvider } from "@chakra-ui/react"
// Do this at the root of your application
function App({ children }) {
return <ChakraProvider>{children}</ChakraProvider>
}Optionally, you can wrap your application with the ColorModeProvider so you
can toggle between light and dark mode within your app.
- Now you can start using components like so!:
import { Button } from "@chakra-ui/react"
function Example() {
return <Button>I just consumed some ⚡️Chakra!</Button>
}