A minimal template for building front-end web applications. Modern templates are often bloated, for example - Create React App. They usually come with a lot of unnecessary things that I don't use, and never will. Plus, they also use 'npm' package manager, which is very space and data inefficient. My template uses yarn for package management - Faster, Lighter, and Better than npm. Parcel for bundling - faster and requires less configuration than 'Webpack', And a cherry on top with 'React Bootstrap' - A fast UI framework optimized for React.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
- Parcel for bundling the application
- Yarn for managing packages
- React-bootstrap as a ui framework
- Other custom components
Things you'll to install this project..
- An Operating System with a working shell ( Bash, Powershell, zsh etc.)
- The latest version of Git
- npm
To install Yarn
npm install --global yarnFirst, clone this project to your local system. You could download as a zip file or clone it throught the terminal
Copy and paste on the terminal
git clone https://github.com/foderking/Minimal-React-Template.git
cd Minimal-React-TemplateThen install dependencies:
npm installTo run in hot module reloading mode:
npm startTo create a production build:
npm run buildTo run tests:
npm run testEnd with an example of getting some data out of the system or using it for a little demo.
The filler component provides two modules - DummyParagraph and DummySentence. They accept the "length" variable as props.
Using DummyParagraph in src/App.js:
....
import DummyParagraph from './Filler/DummyParagraph'
const App = () =>
{
return (
<div className='container'>
<h1>Hello World!</h1>
<div className='paragraph'>
<DummyParagraph length={3} />
</div>
</div>
)
}
....renders block of text with 3 paragraphs
Using DummySentence in src/App.js:
....
....
import DummySentence from './Filler/DummySentence'
const App = () =>
{
return (
<div className='container'>
<h1>Hello World!</h1>
<div className='sentence'>
<DummySentence length={3} />
</div>
</div>
)
}
....
....renders sentence with 3 words