• Purpose :
  React conf has been tried to have a positive effect on developer training. The only purpose of this boilerplate is to help those interested in development using react.js. We use different tools to show you how these tools work and also help you to compare them together.
• One Dependency :
  You will have only one build dependency. It uses Webpack, Babel. It provides a cohesive experience for you.
• No Configuration Required :
  You don't need to configure anything. Only required thing is to focus on writing code. You can reach a reasonably good configuration of both development and production builds.

• React, Hooks.
  

• ES6 & Next Generation JavaScript :

  Use object destructuring, arrow functions, JSX syntax and more.

• Next Generation CSS :

  • Styled-Components :
    It is powered of CSS and help you to write actual CSS code. you will have unique generated class names to keep your code coupsoled.
  • SASS
    If it's easily for you to use SASS, so keep use it. we support SASS too.
  • LESS
    At the end, with using this boilerplate you can ship only the styles that are on the page. This feature guide you to the best performance.

• React-intl:

  If you want to have scalable apps, you probably need to support multiple languages. We use react-intl in this boilerplate to have a multilingual app.

• Offline-First :

  Availability without network connection, INTERESTED :) , from the instant your users load the app, they can reach your app without network connection.

• Formatting :

  Don't worry about implementing clean code or formatted one. We use prettier and have some configuration in Babel. to being sure that your codes always are clean and formated.

• SEO :

  We support SEO (document head tags management ) for search engines that support indexing of JS content.

• Next-SEO

• AntDesign :

  You can easily customize ant design component and also use the only component that you need them in your project. Considering these features, your app can meet a great performance.

• Next.js & Webpack Setting
  

• Next-Compose-Plugin

• OptimizeCSSAssetsPlugin :

  Next.js doesn't minify CSS files out of the box, so we've added the OptimizeCSSAssetsPlugin to handle this lack.

• TerserPlugin:

  This plugin uses terser to minify your JavaScript.

• BundleAnalyzer:

  Visualize the size of webpack output files with an interactive zoomable treemap.

• Transform Remove Console:

  This plugin removes all console.* calls.

• Babel Plugin Module Resolver:

  A Babel plugin to add a new resolver for your modules when compiling your code using Babel. This plugin allows you to add new "root" directories that contain your modules. It also allows you to setup a custom alias for directories, specific files, or even other npm modules.

• cross-env

The root directory of your application, contain a .env.example file. You should copy the file with .env. Your .env file should not be committed to your application's source control, since each developer / server using your application could require a different environment configuration.

1. Make sure that you have Node.js v10 or later and npm v5 or above installed.

2. Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
   

3. Run npm install in order to install dependencies.
   

4.At this point you can run npm start to see the example app at http://localhost:4000. You can easily change this port by changing the .env file ._