Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jjpeleato/reactjs-starter-boilerplate

React JS base repository for any project.
https://github.com/jjpeleato/reactjs-starter-boilerplate

javascript react-js redux

Last synced: 2 days ago
JSON representation

React JS base repository for any project.

Awesome Lists containing this project

README 

        
# React JS: Starter boilerplate



React JS base repository for any project.



## Project



Built with React JS platform using the following technologies: HTML 5, JavaScript, Redux, Router, CSS3, SASS & Compass, NPM or Yarn, Gulp v.4 and more.



### Installing dependencies



You must install the environment manually: Node.JS, NPM or Yarn and Gulp CLI.



For more information visit:



- Node and NPM: https://nodejs.org/es/

- Yarn: https://yarnpkg.com/es-ES/

- Gulp: https://gulpjs.com/



**Note:** If you work with Windows. To execute the commands, we recommend installing **Cygwin** http://www.cygwin.com/



**Note:** I recommend installing the following IDE for PHP Programming: Visual Studio Code (https://code.visualstudio.com/) or PHPStorm (recommended) (https://www.jetbrains.com/phpstorm/).



### Project skeleton



```

├─ assets/ # Front-end directory

│  ├─ img/

│  ├─ scss/

│  ├─ .htaccess.dist

│  └─ .htpasswd.dist

├─ gulp/

│  ├─ task/

│  └─ config.js # Paths and configuration Gulp system.

├─ public/ # Public directory

├─ src/ # Source directory

├─ .babelrc

├─ .editorconfig

├─ .env.alpha.local.dist

├─ .env.beta.local.dist

├─ .env.development.local.dist

├─ .env.production.local.dist

├─ .eslintrc.js

├─ .gitignore

├─ .htaccess

├─ .stylelintignore

├─ .stylelintrc

├─ deploy.sh

├─ gulpfile.babel.js

├─ LICENSE

├─ package.json

└─ README.md

```



### Installing



2. Open your terminal and browse to the root location of your project.

3. Run `$yarn install --dev`.

3. Run `$yarn start`.

4. End. Happy developing.



### Developing with NPM or Yarn and Gulp.



- Open your terminal and browse to the root location of your project.

- If required. Run: `$yarn install --dev` or `$npm install --save-dev` then: `$gulp [action]`

- To work with and compile your Sass files on the fly start: `$gulp`

- Gulp actions commands list:

    - `$gulp clean` Delete all files.

    - `$gulp css` Compile SASS to CSS and validate SASS according Stylelint (https://stylelint.io/). Not concat.

    - `$gulp cssWithConcat` Concat and compile SASS to CSS and validate SASS according Stylelint (https://stylelint.io/).

    - `$gulp fontAssets` Copy fonts assets to public directory.

    - `$gulp images` Copy and minify PNG, JPEG, GIF and SVG images with imagemin.

    - `$gulp validate` Validate SCSS according Stylint (https://stylelint.io/).

    - `$gulp validateScss` Validate SCSS according Stylint (https://stylelint.io/).

    - `$gulp watch` Compile SASS to CSS and concat and minify JS files in real-time.

- Yarn actions commands list:

    - `$yarn start` Runs the app in the development mode according .env.development.local file. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.

    - `$yarn test` Launches the test runner in the interactive watch mode.

    - `$yarn build` Builds the app according .env.production.local file to the build folder.

    - `$yarn build:alpha` Builds the app according .env.alpha.local file to the build folder.

	- `$yarn build:beta` Builds the app according .env.beta.local file to the build folder.

	- `$yarn eject` Compile for development environment.

	- `$yarn gulp:dev` Compile for development environment.

	- `$yarn gulp:prod` Compile for production environment.

	- `$yarn gulp:validate` Validate SCSS according Stylint (https://stylelint.io/).

	- `$yarn lint` Validate src/ directory according Airbnb's ESLint config (https://www.npmjs.com/package/eslint-config-airbnb).

	- `$yarn lint:fix` Fix src/ directory according Airbnb's ESLint config (https://www.npmjs.com/package/eslint-config-airbnb).



### Technologies and tools



The present project uses several technologies and tools for the automation and development process. For more information and learning visit the following links.



1. React: https://reactjs.org/

2. Prop-types: https://github.com/facebook/prop-types

3. Redux: https://redux.js.org/

4. React-Router: https://github.com/ReactTraining/react-router

5. React-Snap: https://github.com/stereobooster/react-snap

6. Material-UI: https://material-ui.com/

7. Normalize: https://github.com/necolas/normalize.css

8. Git: https://git-scm.com/

9. NPM: https://www.npmjs.com/

10. Yarn: https://yarnpkg.com/

11. Sass: https://sass-lang.com/

12. Gulp: https://gulpjs.com/

13. Babel: https://babeljs.io/

14. EditorConfig: https://editorconfig.org/

15. ESLint: https://eslint.org/

16. Stylelint: https://stylelint.io/

17. Airbnb's ESLint config: https://www.npmjs.com/package/eslint-config-airbnb

18. Husky: https://www.npmjs.com/package/husky

19. Human.txt: http://humanstxt.org/



**Note:** Thanks a lot of developers that to work on this projects.



### Others clarifications



1. If required. It is possible that on Mac OS the Gulp tasks do not run the correct form. In this case install NodeJS, NPM and Gulp-cli in your OS and execute the tasks outside the Docker containers.



## Finally



More information on the following commits. If required.



Grettings **@jjpeleato**.