https://github.com/justinformentin/rawrs
React App With Routing and Styled-components
https://github.com/justinformentin/rawrs
cli command-line-interface command-line-tool commander parceljs react react-router reactjs redux styled-components
Last synced: about 2 months ago
JSON representation
React App With Routing and Styled-components
- Host: GitHub
- URL: https://github.com/justinformentin/rawrs
- Owner: justinformentin
- Created: 2018-09-04T22:17:02.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-23T05:57:57.000Z (over 7 years ago)
- Last Synced: 2025-06-23T09:50:55.273Z (12 months ago)
- Topics: cli, command-line-interface, command-line-tool, commander, parceljs, react, react-router, reactjs, redux, styled-components
- Language: JavaScript
- Size: 55.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/rawrs) [](https://david-dm.org/justinformentin/rawrs)
[View Site](https://rawrs-cli.github.io/)
# Rawrs
React App With Routing and Styled-components.
## Overview
Rawrs is a command line utility for React. It was made in an attempt to add to and improve the React ecosystem. It has much more functionality than Create React App, but much less than other, application specific boilerplates. This makes Rawrs the perfect choice for developers that are new to React.
Rawrs has 5 main features.
1. [React-Routing](https://github.com/ReactTraining/react-router)- Such a necessary feature in many applications, Rawrs has routing implemented with example routes in the example scaffolding.
2. [Styled-Components](https://www.styled-components.com/docs)- While other options such as SCSS are great, Styled Components enforces best practices- Small components, single use class names, splitting components and containers.
3. Code Generation- Rawrs allows you to create components in the command line. This is something that other frameworks/libraries have, but is rare in the React ecosystem for some reason.
4. [ParcelJS](https://parceljs.org/)- Rawrs is set up using ParcelJS, a zero configuration web application bundler that is much more user-friendly than webpack.
5. [Redux](https://redux.js.org/)- Getting started with Redux is often difficult for beginners, so Rawrs has an option to build your app with Redux, helping by setting up the basic structure.
## Install
```
npm install -g rawrs
```
## Dependencies
You need to have ParcelJS installed to be able to serve and build your app.
```
npm install -g parcel-bundler
```
## Basic usage
```
rawrs create firstapp
cd firstapp/src
parcel index.html
```
And that's all it takes to go from zero to working app.
## Usage
### Create
Create a new app using Rawrs.
Rawrs was made with rapid development in mind. Your app will be set up with example routes, Styled Components implementation, and support for advanced JavaScript features like async/await, and optionally Redux.
| Option | Description |
| ---------------- |-------------|
| `-r, --redux` | Adds redux setup, installing dependencies and setting up the store |
| `--no-git ` | Skip git support, don't initialise repo |
Here's an example of creating an app that handles all the bindings that comes with React + Redux, and generating a redux component.
```
cd ~/project
rawrs create new-app --redux
cd new-app/src
rawrs generate components/About --redux
parcel index.html
```
This will create an app with redux support, build and serve the application at http://localhost:1234 with hot module reloading, and add a new redux-aware component for a about page.
### Generate
Create a file - either component, redux component, or ES6 class using current best-practices.
| Option | Description |
| ---------------- |-------------|
| `-f, --functional` | Creates a functional rather than class based component |
| `-r, --redux` | Adds redux setup to the component (ignored by functional component) |
| `--content ` | Content to put into the render block. Line breaks will be respected and can just be entered like so: `\n
`|
| `--imports ` | Pre-written import statements to include in the head. Again, line breaks are respected. |
```
rawrs generate component components/Menu
```
The `generate` command is aliased to `g`, and the file type is optional and defaults to component, the following is identical.
```
rawrs g components/Menu
```
A .jsx is appended to the filename automatically and is not required, but is harmless and will not duplicate if accidentally added. As long as a directory already exists, you can create a component in any directory structure.
```
rawrs g components/ui/Header/NavBar
```
Full example of creating an AboutUs class component and adding an import and content:
```
rawrs g components/AboutUs -f --imports "import { Link } from 'react-router-dom';" --content "
About Us
\n\nSome text about companyLearn More
"
```
Note: You can put anything in the import/content. Rawrs doesn't validate it.
### Destroy
The opposite of generate, using the destroy command **will delete** files. This is a destructive command and full responsibility should be taken when using it. It is nevertheless a useful command when quickly making structures:
```
rawrs g Aboutus //whoops, not right
rawrs destroy Aboutus
rawrs g components/AboutUs -f
```
Be warned, though. Rawrs **will** delete any file it's told to delete.
```
rawrs destroy App.js
rawrs destroy index
```
### Serve / Build
To run your application in development mode, navigate to the main directory, in the example app's case it's /you-app/src, and run
```
parcel index.html
```
To build your app for production, run
```
parcel build index.html
```
Parcel will list the files it just built. Take the files and serve them however you would any other app with an index.html entry point.