### Setup Development Environment

In order to kickstart the development of your web app with Aenft, the very first thing you need to do is to setup a react development environment.

Following tools are needed to setup a react dev environment:

- Node JS

NodeJS works as a node package manager behind the scene. It is recommended to download and install the latest version of Node JS from its official site http://nodejs.org/

### Introduction

To install Aenft on your local matchin, download the files from Themeforest and unzip them to the local disk on your computer.
Inside the extracted folder you will see two folders named 'Aenft-documentation' and 'Aenft-react'.
Open 'Aenft-react' with a code editor like vscode. And follow the stapes below-

For npm:

Open vscode terminal
Then run : `npm install`
Then run : `npm start`
Now in the browser go localhost:3000

If you want to use yarn:

Open vscode terminal
Then run : `yarn install`
Then run : `yarn start`
Now in the browser go localhost:3000

### Introduction

- public - All static files
  - images - All images for this template
  - index.html - Static index page.
- src - Content all the react file
  - components - All components with relevant SCSS
  - helper - All helper function
  - scss - Common SCSS file
  - App.js - Starting poing of react components
  - index.js - Entry poing of react app
- package.json - All packages have information
- node_modules - After install Aenft you can seee this folder, this folder content all installed package.

### Pages and Components Info

- Home (/Pages/Home.jsx)
- Home 2 (/Pages/Home2.jsx)
- Home 3 (/Pages/Home3.jsx)
- Blog Details (/Pages/BlogDetails.jsx)

###### Common Components:

- Header (/components/Header)
- Footer (/components/Footer)

###### Template Features:

- ES6+
- React JS 18.2.0+
- Express JS

### Dependencies

Here are the dependencies list which being used in the Aenft React Template:

      "dependencies": {
        @testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^5.2.2",
        "html-react-parser": "^3.0.4",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-parallax": "^3.5.1",
        "react-router-dom": "^6.4.3",
        "react-scripts": "5.0.1",
        "react-scroll": "^1.8.8",
        "react-slick": "^0.29.0",
        "slick-carousel": "^1.8.1",
        "web-vitals": "^2.1.4"
      },
      "devDependencies": {
        "@iconify/react": "^4.0.0",
        "node-sass": "^7.0.3"
      }

### Fonts

By default, the template loads Poppins and Inter font from Google Web Font Services, you can change the font with the one that suits you best.

You will find the font code in the "scss/default/_typography.scss

      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

### Icons

We use Iconify package for icon.
For use Iconify, go to Iconify site, search your icon, select react and use that react component.

### Deploy

For deploy first run the command `npm run build` or `yarn build`
Now you will get build folder.
Using an FTP Client (such as Filezilla or Total Commander), you will need to upload all of the contents of the 'build' folder to your server.

### Credits

Images
Freepick
Unsplash
FlatIcon
Packages
react
react-dom
react-router-dom
react-scripts
@testing-library/jest-dom
@testing-library/react
@testing-library/user-event
web-vitals
node-sass
Bootstrap
html-react-parser
react-slick
slick-carousel
@iconify/react

### Support

If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/Laralink ) Or direct email us on laralink007@Laralink.com.
We aim to answer all questions within 2 days . In some cases the waiting time can be extended to 4 days.