DEV Community

loading...

Discussion on: Learn by Contributing

Collapse
nickytonline profile image
Nick Taylor (he/him) • Edited
  • I would say only work on stuff that you find interesting and challenging. Otherwise don't bother. You won't enjoy it.

  • When I first started learning react, I started contributing as a way of learning. I found a react boilerplate project, react-slingshot, and just started offering suggestions that became PRs, and also did bug fixes. Eventually I was asked to become a maintainer to which I said yes.

coryhouse / react-slingshot

React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in


Build status: Linux Build status: Windows Dependency Status Coverage Status

A comprehensive starter kit for rapid application development using React.

Why Slingshot?

  1. One command to get started - Type npm start to start development in your default browser.
  2. Rapid feedback - Each time you hit save, changes hot reload and linting and automated tests run.
  3. One command line to check - All feedback is displayed on a single command line.
  4. No more JavaScript fatigue - Slingshot uses the most popular and powerful libraries for working with React.
  5. Working example app - The included example app shows how this all works together.
  6. Automated production build - Type npm run build to do all this:

React Slingshot Production Build

Get Started

  1. Initial Machine Setup

    First time running the starter kit? Then complete the Initial Machine Setup.

  2. Clone the project

    git clone https://github.com/coryhouse/react-slingshot.git.

  3. Run the setup script

    npm run setup

  4. Run the example app

    npm start -s

    This will run the automated build process, start…

Takeaway from this is open source is a great way to learn from others and if you contribute enough to a project, you may be asked to become a maintainer (if that's your jam).

  • In terms of problems/solutions, the more recent one I had while converting the Refined GitHub extension to TypeScript (TS), I had converted everything to TS, but webpack builds were failing. So initially, I tried some configuration changes in regards to webpack and the TS config, but no dice. I compiled each entry point from webpack directly with the TS compiler and they built fine, so clearly something was not right with webpack/TS situation.

At this point I started to debug webpack, specifically the ts-loader plugin. If you've never debugged webpack code, you can run the following command to get started with the debugger. node --inspect-brk ./node_modules/webpack/bin/webpack.js. I found the error that was being thrown from webpack in the code and put a breakpoint there. First I saw that the files weren't being generated. When I reran the debugger, this time I saw that a particular boolean was not set properly which was related to webpack/TS configuration. Once I fixed the configuration, I was good to go. Takeaways, use your tools. Also, I was probably tired at this point and probably missed the obvious misconfiguration. πŸ™ƒ

Thread Thread
agoldis profile image
Andrew Goldis Author • Edited

Awesome!

  1. I started using refined-github :)
  2. Would you mind if I copy your comment to the article? It's very inspirational and a good showcase of real-world example
Thread Thread
nickytonline profile image
Nick Taylor (he/him)

Sure, no problem.

Thread Thread
agoldis profile image
Andrew Goldis Author

πŸ‘πŸ» thanks a lot!

Forem Open with the Forem app