Skip to content

Latest commit

 

History

History
230 lines (173 loc) · 12.8 KB

CONTRIBUTING.md

File metadata and controls

230 lines (173 loc) · 12.8 KB
Raw

Contributing to React-Templates

👍🎉 First off, thanks for taking the time to contribute! 🎉👍

The following is a set of guidelines for contributing to React-Templates and its submodules, which are hosted on GitHub. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request.

Table of Contents

Code Of Conduct

This project and everyone participating in it is governed by the react-templates Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to hardikopensource@gmail.com.

I have a Question - OR - I need Help

Note: Please don't file an issue to ask a question. You'll get faster results by using the resources below.

What should I know before I get started

Knowledge of the above mentioned technologies would be required while using these templates

What does this project do and Why is it useful

  • This project consists of various templates which can be used to speed up the initial phase of setup and development
  • Separate projects involve various technologies which take up a tremendous amount of time and effort to setup, before they can even be used (e.g. redux)
  • With template already setup users can focus entirely on building their own application.
  • For projects involving firebase, authentication (Google for now) has already been taken care of.
  • For projects involving Node and MongoDB, database connection along with server file have been setup.
  • A good directory and file structure (open to change) and naming conventions along with example files have been used to promote better design patterns, clean code and suitable heirarchy.

How do I get started

Steps to start with the templates have been mentioned in each project's individual README.
Although the procedure is common, as mentioned below :

  • Click on the template name you want to use. You will be redirected to the template github repo.

  • Checkout to main branch and click on Code button or Use this template
    Code Actions

    1. If you clicked on Use this template (Preferred) -

    • Enter the details as you would while creating a repo
    • Select option Include all branches if you want other branches to be a part of your own project too
    • Then click on Create repository from template button
    • Your repository will be built upon the template
    • Click on Code and then clone the repo on your local machine
      code repo from template

    2. If you clicked on Code

    • Select your preferred method (https, ssh or github cli) and click on copy icon button

      clone options

    • Open your favored terminal (or integrated terminal in VS Code) and type git clone [repo-link], replace [repo-link] with the copied url and press Enter

    • The template will be cloned to your local machine

    • Now from root, enter yarn install-all or npm install-all

      Note - If using npm, remove yarn.lock from the directories

    • Wait for some time while the dependencies download, and then enter :

      • yarn start or npm start to run in development mode (hot reload only in client)
      • yarn dev or npm run dev to run in developement mode (hot reload in both client and server)

    • Change remote repo

      • Check current remote with
        git remote -v
      • Change the 'origin' remote's URL
        git remote set-url origin [your-repo-link]
      • Verify new origin with
        git remote -v
      • Push to new origin with
        git push -u origin main

How Can I Contribute

We are really glad that you want to contribute to the repository. Contributing to this repository not only works for you, but helps many others who are working on the same repo too. Each and every contribution matters.
Follow the below guidelines to contribute to this project -

To the current repos -

Note - For contributing to current templates, create issues and pull requests in the respective templates and not in this repo (react-templates), only changes to assets, .md files and .gitmodules are to be made in this repo.

  • Create an issue : First step to contribute to the repository is to create the right issue. Add the right labels to your issue.
    How to create a good issue ?

  • Add your code : See the article on the following link to see how you can add your changes to the repo, but check here to see how to create branches .
    Guide to Github contribution

    How to Branch

    • After you clone your repo on your local machine, checkout to dev branch and merge main to it with
      git merge main

    • After successful merge, create and checkout to new branch using
      git checkout -b [branch-name]

    • The branch names should follow the patterns mentioned below :

      • Branch names should begin with what type of issue they solve. Choose strictly from one of the following :

        1. feature - If it is a new feature
        2. bugfix - If it fixes a bug (breaking or non-breaking)
        3. enhancement - Any improvement to current repo (only code)
        4. documentation - Improvement or addition in docs (includes comments, readmes, .md files)
        5. refactor - Improvement in code quality (cleaner code, better design patterns)
        6. restructure - Restructuring folders and files

      • After selecting the type of branch, follow it with a / (backslash) and your desired branch name e.g.
        feature/firebase-email-auth
        Keep the branch name short and precise to what it does.

      • Make your changes in the branch using atomic commits.

        Note - Look in individual templates README to see the commit rules, else if not mentioned follow these

    • After making changes in your branch, create a pull request to the dev branch of the original repo.

      Note - Please make changes in the documentation(comments, .md files etc) too, that are affected by your code

    • Add the creator (or any other maintainer) for review.

    • Once the maintainer approves of the code, it will be merged to dev and then subsequently to the main branch

Create my own repo -

If the templates present in this repo do not cover the technology you wish to use (like React Native, Django or Golang), don't worry, you can create your own template and add it to this repo. Follow the below steps for the same :

  • Create an issue : First step to contribute to the repository is to create the right issue. Add the right labels to your issue.
    How to create a good issue ?

    Note - For a new template create an issue in this repository only. Name the issue (separated by hiphens) as the technologies being used to create the new template. e.g. reactnative-firebase

  • Create your repo :

    • Create a repo in your own Github account and select use as a template option
    • Make changes to your repo by following your own design pattern and commit style (don't forget to add Contact Creator option for a way to contact you).

      Note - Please ensure to use the best design patterns in the respected language as well as a good folder structure.
      Please justify in the directory READMEs why you chose a particular structure

    • Once you are ready with the repo, clone this (react-templates) repo and create a new branch with the name
      template/[issue-name] e.g. template/reactnative-firebase
    • Run the following commands in order :
      git submodule add -b main [URL to Git repo]
      git submodule init
      git submodule update --init --recursive
      (What are gitmodules ?)
    • Link to your template should appear as a submodule in this repo. (your repo always remains with you)
    • Now create a pull request to the dev branch of this repo and add the creator (or any other maintainer) for review.
    • Once the maintainer approves of the code, it will be merged to dev and then subsequently to the main branch

    🎉👍 Congratulations 🎉👍, your code would now serve as a strong foundation for others, upon which they can build their apps much easily and faster.

    Note - Don't forget to increment the repo version in package.json according to the changes you make, know about SemVer

Styleguides

How To Commit

As already mentioned before, please follow the commit rules described in each individual repo, if not mentioned follow the pattern below :

  • Start with what has the commit achieved i.e. fixed, refactored, styled etc. in uppercase letters inside square brackets. Some of them being (but not limited to) :
    • REFACTORED
    • FIXED
    • STYLED
    • UPDATED
    • CHANGED
    • RESTRUCTURED etc.
  • Follow this by a space and what or/and where the change happened
    e.g. [REFACTORED] App.jsx OR [UPDATED] test.js from class to hooks

Languages and Frameworks styleguide

Please follow the below mentioned styleguides according to the language/framework you are working on :

  1. React / Javascript
  • Use hooks over classes
  • Use class based components only when utterly necessary. e.g. Errorboundary, pure components etc.
  • Try to create more stateless components
  • If using redux, make network calls only in redux with redux-thunk and not within the component or page
  • For file names, name components in PascalCase while page names in lowercase.
  • For function and variable names use camelCase

    Note - Try to follow clean code as much as possible

  • Try to make directory imports and exports. e.g.
    USE
    import { Login } from '../components'
    INSTEAD OF
    import Login from '../components/Login/Login'
  • Place imports in the following order (Look in React pages/home of any repo for the same):
    • Installed packages
      / Empty line /
    • Local files, assets and modules
      / Empty line /
    • Global store or Context (basically your data storage)
      / Empty line /
    • Styles
  1. CSS/SCSS
  • NO INLINE STYLING
  • Use CSS-IN-JS(styled-components) or CSS Modules
  • Add global styles only in GlobalStyles.js and TypoGraphy.js
  • Keep declarative class names, e.g.
    .loginButton instead of .button

Attribution

This CONTRIBUTING.md is adapted from the Atom CONTRIBUTING.md