Created by Milad Heydari, Mehri Daei and maintained with ❤️ by an amazing react conf team.
- Quick Scaffolding
- You can create components, routes, make API call and also make your App more attractive with using AntDesign, besides you can have multilingual App.
- Instant Feedback
- Enjoy coding with good speed and awsome DX (Developer eXperience). As soon as you change CSS, SASS,LESS, JS, your changes are directly implemented without having to refresh your browser. One more thing Enjoy using one of the best UI libraries name AntDesign and finally have clean and formatted code.
- Philosophy
- 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.
- Styled-Components :
-
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
-
Make sure that you have Node.js v10 or later and npm v5 or above installed.
-
Move to the appropriate directory:
cd <YOUR_PROJECT_NAME>. -
Run
npm installin order to install dependencies.
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.
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 ._