Conquer-ui-kit NPM

logo

Conquer Tech - R1 with React TypeScript + Webpack

A starter project for using React, TypeScript, SCSS and Webpack.

Features

Webpack 5 + HMR
TypeScript + React
SCSS + Autoprefixing
Storybook
Redux toolkit

🚀 Getting Started

Get up and running with these simple steps:

Clone the project
Run npm install
Run npm start

Class & Functional stubs

In the master branch you can find the Final progress. In the branch develop you can find the In developement files.

Styles, Images, Fonts and output

Here's an example of the default generated output to our build folder.

- index.html
-- js
-- scss
-- fonts
---- some-font-file.woff
-- images
---- path-to-example-image.jpg

By default, fonts and images are copied to the build folder.
To include a reference to an image or font, it should be relative to where your css would output.

For example:

assets/scss/some-file-somewhere.scss

.example {
    background-image: url("../images/path-to-image-example.jpg");
}

@font-face {
    font-family: "Example-font";
    src: url("../fonts/some-font-file.woff");
}

Would output to the folder css/app.css

- index.html
-- js
-- css
---- app.css
-- fonts
---- some-font-file.woff
-- images
---- path-to-example-image.jpg

Production

Note: This will compile to a build folder.

npm run build

Build tools

React - JavaScript library for building user interfaces.
TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript.
Webpack 5 - App bundler for JavaScript.
SCSS - Preprocessor for SCSS to CSS.