rerp v1.0.1
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 install rerp -g
OR
npx 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 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 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 π
---global.scss
@import './variables.scss';
body {
background: $primary;
}
- You can also nest elements when using 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 yourclass
components.
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 (
<div>
<button onClick={this.handleClick}>you clicked me {clicked} times</button>
</div>
)
}
}