This project includes following packages:
- React
- React router
- Typescript
- TailwindCSS
- FontAwesome
node analyze.js to build for production and run analyzer.
npm start starts up web app in development mode with web server and HMR.
npm run build to build for production.
npm test to run tests.
- Make sure NodeJS is installed with npm.
- Download this project to a local folder on your computer.
- Open terminal/cmd and go the local folder where you just downloaded this project to.
- Run the command
npm install. - Run the command
npm start. - Browser opens webpage
localhost:3000.
This project has included HMR (Hot Module Reloading) so it should be able to render your changes without refreshing the browser.
- index.tsx is the file that connects the application to the DOM.
- App.tsx is the entry point for our application. Routing is handled here, so any new routes must be inserted here.
- components/* is the directory for all the components that can be used. Components can be used in other components.
- pages/* is the directory for all pages. These pages use components.
- assets/* is the directory for all assets such as images, icons, etc.
Feel free to restructure your app to have it look like you want it to.
By keeping your components small it is easier to maintain different components and reuse them.
A smart component is defined as a component that stores logic.
A dumb component is defined as a component that is only visual. Often it doesn't even contain state (can do in rare cases) but only receives data to visualize from props.
Try have a lot of dumb components and a few smart components.
Try not to introduce too many libraries just because they are popular. This often results in a more complex application that is harder to maintain.
React is a JavaScript library for building UI.
The new thing in this is React hooks which was just released in v16.8. Find a lot of custom hooks here.
Thinking in React written by Facebook.
Typescript is a superset of Javascript. Typescript introduces a lot of extra stuff to Javascript such as types, enums, interfaces etc.
Tailwind is utility-first and provides highly composable, low-level utility classes that make it easy to build complex user interfaces.
Tailwind is not a UI kit like Bootstrap, so it doesn't have a default theme and no built-in UI components.
The problem that is often seen by using css is that every time the css is changed it might break the design on some pages because more elements are using the same classes. Tailwind tries to solve that problem by providing low-level utility classes to built up the design. These classes are never changed.
Documentation for Tailwind CSS can be found here.
Edit tailwind.js if you need to customize your own values such as colors, sizes etc.
Providing vector icons. All icons can be seen here.
React-fontawesome is being used to integrate it nicely into React.