All the design has been generated with tailwindcss. Find all the theme related configuration inside tailwind.config.js
All the designs have been generated with Tailwind CSS. Find all the theme related configurations inside tailwind.config.js
We have detected common components and have generated possible variants of it. To check the documentation of generated common components by integrating storybook, please follow the below steps:
npx storybook init
npm run storybook
This is the documentation of React Figma Web. It contains all the information you need to get started with and make changes to your App
This project was bootstrapped with Create React App.
This project is integrated with a Tailwind CSS setup, a new utility-first CSS framework, in an CRA environment. You can read more over on Getting Started with Tailwind.
- System Requirements
- Setup Feedback
- Install Dependencies
- .env file
- Running the App
- Folder Structure
- Available Scripts
- Changing the Page
<title>
- Installing a Dependency
- CRA User Guide
- How to Update to New Versions?
- Whatβs Included?
Setup your project by running the following commands:
npm install
This file contains various environment variables that you can configure.
PORT - Port to run your frontend on
REACT_APP_GOOGLE_CLIENT_ID - (Optional) Your Google Client ID
npm start
After creation, your project should look like this:
.
βββ package.json
βββ package-lock.json
βββ postcss.config.js
βββ public
β βββ favicon.ico
β βββ index.html
β βββ logo192.png
β βββ logo512.png
β βββ manifest.json
β βββ robots.txt
βββ README.md
βββ src
β βββ App.js
β βββ assets
β β βββ fonts ---------- Project fonts
β β βββ images --------- All Project Images
β βββ components --------- UI and Detected Common Components
β βββ constants ---------- Project constants, eg: string consts
β βββ hooks -------------- Helpful Hooks
β βββ index.js
β βββ pages -------------- All route pages
β βββ Routes.js ---------- Routing
β βββ styles
β β βββ index.css ------ Other Global Styles
β β βββ tailwind.css --- Default Tailwind modules
β βββ util
β βββ index.js ------- Helpful utils
βββ tailwind.config.js ----- Entire theme config, colors, fonts etc.
For the project to build, these files must exist with exact filenames:
public/index.html
is the page template;src/index.js
is the JavaScript entry point.
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack. You need to put any JS and CSS files inside src, otherwise Webpack wonβt see them.
Only files inside public can be used from public/index.html. Read instructions below for using assets from JavaScript and HTML.
You can, however, create more top-level directories. They will not be included in the production build so you can use them for things like documentation.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
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!
Note: this is a one-way operation. Once you eject
, you canβt go back!
If you arenβt satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point youβre on your own.
You donβt have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldnβt feel obligated to use this feature. However, we understand that DhiWise wouldnβt be useful if you canβt customize it when you are ready for it.
To configure the syntax highlighting in your favorite text editor, head to the relevant Babel documentation page and follow the instructions. Some of the most popular editors are covered.
Note: This feature is available with
[email protected]
and higher.
It only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can take.
You would need to install an ESLint plugin for your editor first. Then, add a file called .eslintrc
to the project root:
{
"extends": "react-app"
}
Now your editor should report the linting warnings.
Note that even if you edit your .eslintrc
file further, these changes will only affect the editor integration. They wonβt affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.
If you want to enforce a coding style for your project, consider using Prettier instead of ESLint style rules.
You can find the source HTML file in the public
folder of the generated project. You may edit the <title>
tag in it to change the title from βReact Appβ to anything else.
Note, that normally you wouldnβt edit files in the public
folder very often. For example, adding a stylesheet is done without touching the HTML.
If you need to dynamically update the page title based on the content, you can use the browser document.title
API. For more complex scenarios when you want to change the title from React components, you can use React Helmet, a third party library.
The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with npm
:
npm install --save react-router
Alternatively you may use yarn
:
yarn add react-router
This works for any library, not just react-router
.
You can find detailed instructions on using Create React App and many tips in its documentation.
Please refer to the User Guide for this and other information.
Your environment will have everything you need to build a modern single-page React app:
- React, JSX, ES6, TypeScript and Flow syntax support.
- Language extras beyond ES6 like the object spread operator.
- Autoprefixed CSS, so you donβt need
-webkit-
or other prefixes. - A fast interactive unit test runner with built-in support for coverage reporting.
- A live development server that warns about common mistakes.
- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
- An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria. (Note: Using the service worker is opt-in as of
[email protected]
and higher) - Hassle-free updates for the above tools with a single dependency.
The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.