https://github.com/kaf-lamed-beyt/rrp
A parcel powered react, redux template, that gives you the feeling of create-react-app, but this time, fast bundling time.
https://github.com/kaf-lamed-beyt/rrp
Last synced: about 1 month ago
JSON representation
A parcel powered react, redux template, that gives you the feeling of create-react-app, but this time, fast bundling time.
- Host: GitHub
- URL: https://github.com/kaf-lamed-beyt/rrp
- Owner: kaf-lamed-beyt
- License: mit
- Created: 2020-09-10T06:40:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-09-15T00:20:38.000Z (over 4 years ago)
- Last Synced: 2025-04-06T05:52:13.876Z (about 1 month ago)
- Language: JavaScript
- Size: 3.91 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rrp
A parcel powered react, redux template, that gives you the feeling of create-react-app, but this time with fast bundling, compile and build time.
## Development
- To get this package globally on your machine type this 👇 in your terminal.
```npm
npm install rerp -g
```
OR
```npm
npm install rerp name-of-your-app
```
It automatically creates a new folder wit your app name and install all the required dependencies.
- To start using this package locally on your machine run this command in your terminal
```npm
npm start
```
it pops open your browser and loads the app at this address. :point_down:
## `localhost:3000`
- I've installed prettier as a dependency, run the following command to format your codes.
```npm
npm run format
```
## Folder structure
```
your-app
├── build
├── node_modules
├── public
│ ├── bundled-app-icon
│ ├── index.html
│ └── css && js (bundled format)
│──src
│ ├── components
│ │ └──App.js
│ ├── scss
│ │ └── app.css
│ │ └── global.scss
│ │ └── _variables.scss
│ ├──index.js
| └── index.html
├── .gitignore
├── .prettierrc
├── .babelrc
├── package.json
└── README.md
```
I decide to go with `scss` files for our styles since it gives you proper flexibility when writing your styles.
You can place all your styles in the `scss` folder. In this package there are some base scss files already in the project,
- The `_variables.scss` file houses all your variables in one file. So when you want to use any of the variables, you simply import them into the file. e.g 👇
```scss
---global.scss
@import './variables.scss';
body {
background: $primary;
}
```
- You can also nest elements when using scss.
```scss
.app__base {
margin-top: 10%;
text-align: center;
font-size: 30px;
color: $text-primary;
.logo {
width: 200px;
width: 200px;
img {
height: 100%;
width: 100%;
}
}
}
```
In the assets folder, you can choose to add your styles along with your images too. Your choice, really! 😊
Inside the `src` folder, there's a sub `components` folder, that's where all your components would go.
## Things to note.
- Don't worry you can use arrow functions to bind your handlers to the context of `this` in the constructor of your `class` components.
```javascript
class ClassComponent extends React.Component {
constructor() {
super()
this.state = {
clicked: 0
}
}
// es6 arrow function handler
handleClick = () => {
const { clicked } = this.state
this.setState({
clicked: clicked + 1
})
}
render() {
const { clicked } = this.state
return (
you clicked me {clicked} times
)
}
}
```