Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaelmendoza/basic-react-app
Basic React App cli generator using react, react-router v4, babel v7, webpack, and sass.
https://github.com/michaelmendoza/basic-react-app
boilerplate react react-generator-cli react-router-v4 sass
Last synced: about 2 months ago
JSON representation
Basic React App cli generator using react, react-router v4, babel v7, webpack, and sass.
- Host: GitHub
- URL: https://github.com/michaelmendoza/basic-react-app
- Owner: michaelmendoza
- Created: 2018-12-18T20:00:26.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-17T03:07:09.000Z (almost 6 years ago)
- Last Synced: 2024-10-30T06:27:25.931Z (3 months ago)
- Topics: boilerplate, react, react-generator-cli, react-router-v4, sass
- Language: JavaScript
- Homepage:
- Size: 249 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# basic-react-app
[](https://forthebadge.com)
Basic React App is a cli tool for generating a basic react applciation. This app supports react v16.6, react-router v4, babel v7 and webpack v4. Webpack is configured with babel loaders for bundling react, modern javascript (ES6), css, sass, and image files for development and production.
## Quick Start
Clone source code from the github repo
``` git clone https://github.com/michaelmendoza/basic-react-app.git ```
Link the project using npm
``` npm link ```
Generate a react app into `appname` folder
```basic-react-app appname```
Then install npm dependencies
```cd appname; npm install```
For development use `npm run dev` to run your app with a dev server on http://localhost:8080.
For production use `npm run build` to create a minified bundled javascript file in `dist` folder.
## Architecture Overview
After install, running `basic-react-app appname` will create a directory called `appname` inside the current folder. Inside that folder, the app will generate the basic project structure.
```
appname
|- /src
|- index.js // Entry point for javascript
|- index.html // App entry point
|- App.jsx // App Layout
|- assets // Folder for images and assets
|- components // Folder for react jsx components
|- containers // Folder for react-router jsx pages
|- stores // Folder for data stores
|- styles // Folder for css and sass stylesheets
|- package.json // NPM config file
|- webpack.config // Webpack config file
|- .gitignore // Git ignore
|- .babelrc // Babel config file
|- /dist // Folder where webpack bundles apps
```
## What's Included?
Your project environment will include everything you need for a basic react application including:
* React, JSX, ES6
* CSS, SASS
* React Router v4, Material-UI
* Webpack script using Babel to bundle JS, JSX, CSS, SASS and Image files for production
* Webpack Development Server
## Why use Basic React App?
Basic React App is great for:
* Learning React
* Starting Simple SPA React Applications
* Creating simple examples for React
### Popular Alternatives
* Create React App
* Simple React App
## References
* https://github.com/facebook/create-react-app
* https://github.com/Kornil/simple-react-app
* https://github.com/rwieruch/minimal-react-webpack-babel-setup
* https://webpack.js.org/guides/getting-started/
* https://www.valentinog.com/blog/react-webpack-babel/
* https://reacttraining.com/react-router/web/guides/quick-start
* https://alligator.io/react/index-js-public-interfaces/
* https://github.com/mui-org/material-ui
* https://medium.com/netscape/a-guide-to-create-a-nodejs-command-line-package-c2166ad0452e