What I learned making my first open source React component

  • A folder for your code, a folder for your demo app (plus dev server and hot loading, yay\o/), a folder that you should use and I didn’t, some build stuff for shipping… – – Basically, it gives you everything you need so you can focus on your component and don’t…
  • You need a demo page so you can show off your component in action.
  • react-lazyload-fadein, for example, has a demo page that shows off different ways you can use it.
  • People will find out about your component in different ways.
  • Especially if someone could figure out how to slurp in the README file and make that demo page for you 🤔 – – The React community is a bit silly and loves to invent new patterns to bicker about.

Dude, open source is hard. People really do this every day!? 🤨

I open sourced my react-lazyload-fadein component this weekend. 75 stars already. I guess people like it 💪

It builds on top of react-lazyload to give you a nice fade-in effect when your component is ready. Lazyload means users load less stuff and your page appears faster because you’re not rendering complex expensive components until they’re visible. Fade-in means they don’t pop onto the page and startle your user.

Building the was pretty quick. Learn the new API for React transitions, realize images have an event, package it up in a component. Easy 👌

Then open sourcing it… that took 4 hours. Because open source is hard.

You can see half of the process on YouTube. The other half got banned because of the music.

Here are a few lessons I learned:

When you start a new React app, you use . It sets everything up for you. Babel, webpack, a dev server, some HTML, production builds, all the things.

But you don’t need most of that when you’re building a component. You wouldn’t want to minify before publishing to npmjs, for example. You definitely don’t need to add a bunch of HTML and CSS.

What I learned making my first open source React component