Initial Setup

Setting up a new UI-Demo React project to use UI-demo sections, building blocks, demo pages and other landing.

Setting up the dependencies and project config options

First of all, you need to install all the npm dependecies that the UI-demo theme has, in order to be able to properly use the theme and all the UI components.

If you are building an application from scratch you should create an empty folder in your local working directory.
Then copy .eslintrc.js, .prettierrc, jsconfig.json/tsconfig.json and package.json files into the root of your newly created projects folder.

In the package.json you will find all the necessary dependencies, npm scripts and other important configuration options. You are free to change the name, author, email, version fields in the package.json file.

Setting up the necessary folders and files

In the /src/components folder of the UI-demo theme there are two important files/components which should be copied into your working directory. One is Page component (/src/components/Page.js|ts), which is the bootstrap point of the whole app and the parent component of the views and pages.

The declaration of the useDarkMode hook, the initialization of the AOS plugin and UI-Demo's ThemeProvider are in the "Page" component.

The other one is Container component (/src/components/Container.js|ts), which is the custom container decraration.

The ThemeModeToggler, which is used for the dark/light mode togging, and the TopNav component are in the /src/components folder as well.
They also should be copied into your working copy.

In your working directory create a new folder src folder and components folder inside the /src subfolder.

2.1 Copy the /src/components/Page.js|tsx, /src/components/Container.js|tsx, /src/components/ThemeModeToggler.js|tsx and /src/components/TopNave.js|tsx into the /your-app/src/components folder.

2.2 Next step copy the /src/layouts folder, where you can find the theme main layouts, into the root of your working directory.
In the future you are free to use any layout from the Layout building blocks, to modify them or create your own.

2.3 Finally copy the /src/theme folder into your projects folder

Folder setup (react-scripts)

If you are using the react-scripts version you should also copy the /public/index.html into the your-app/public/index.html
You are free to modify the meta tags, and other content of the index.html.

The folder structure should look like this:

your-app/
  README.md
  .eslintrc.js
  .prettierrc
  jsconfig.json // or tsconfig.json if you are using the TypeScript sources
  package.json
  node_modules/
  public/
    index.html
    favicon.ico
  src/
    components/
      Page.js // or Page.tsx if your are using the TypeScript sources
      Container.js // or Container.tsx if your are using the TypeScript sources
      ThemeModeToggler.js // or ThemeModeToggler.tsx if your are using the TypeScript sources
      TopNav.js // or TopNav.tsx if your are using the TypeScript sources
    layouts/
    App.js
    index.js

For the project to build, these files must exist with exact filenames:

• public/index.html is the page template;

• src/index.js|tsx is the JavaScript entry point. You are free to copy its content from UI-demo /src/index.js or leave it as it was created by create-react-app;

• /src/App.js|tsx is the app business logic starting point where you should instantiate your apps router, inject 3th party styles and the most importantly wrap the app root with the Page component you just copied, you can follow the same approach as done in UI-demo theme.

Folder setup (nextjs)

If you are using the nextjs version you should also copy the /src/pages/_app.js|tsx, /src/pages/_document.js|tsx into the your-app/src/pages/ folder
You are free to modify the meta tags, and other content.

The folder structure should look like this:

your-app/
  README.md
  .eslintrc.js
  .prettierrc
  jsconfig.json // or tsconfig.json if you are using the TypeScript sources
  package.json
  node_modules/
  src/
    components/
      Page.js // or Page.tsx if your are using the TypeScript sources
      Container.js // or Container.tsx if your are using the TypeScript sources
      ThemeModeToggler.js // or ThemeModeToggler.tsx if your are using the TypeScript sources
      TopNav.js // or TopNav.tsx if your are using the TypeScript sources
    layouts/
    pages/
      _app.js // or _app.tsx if your are using the TypeScript sources
      _document.js // or _document.tsx if your are using the TypeScript sources

Folder setup (gatsbyjs)

If you are using the gatsbyjs version you should also copy the /plugins, into the your-app/plugins.
And /gatsby-config.js into the root of your working folder.

The folder structure should look like this:

your-app/
  gatsby-config.js
  README.md
  .eslintrc.js
  .prettierrc
  jsconfig.json // or tsconfig.json if you are using the TypeScript sources
  package.json
  node_modules/
  src/
    components/
      Page.js // or Page.tsx if your are using the TypeScript sources
      Container.js // or Container.tsx if your are using the TypeScript sources
      ThemeModeToggler.js // or ThemeModeToggler.tsx if your are using the TypeScript sources
      TopNav.js // or TopNav.tsx if your are using the TypeScript sources
    layouts/
    pages/

Routing setup

Now you have everythig ready to create your apps business logic.

You would need to setup your app routing/navigation. You can follow the official guides and documentation:

• React Router - https://v5.reactrouter.com/web/guides/quick-start;

• NextJS Routing - https://nextjs.org/docs/routing/introduction;

• Gatsby Routing - https://www.gatsbyjs.com/docs/reference/routing/creating-routes/;

Development

Now when you have everything setup you can copy sections, pages, landings and any other components from UI-demo into your app.

Useful links

• ReactJS;

• Create React App;

• NextJS;

• GatsbyJS;

• Getting started with UI-demo (react-scripts);

• Getting started with UI-demo (nextjs);

• Getting started with UI-demo (gatsbyjs);

• UI-Demo;

• UI-Demo Components;

• UI-Demo Create-React-App example;

• UI-Demo NextJS example;

• UI-Demo GatsbyJS example;

• React Router;

• NextJS Routing;

• Gatsby Routing;