CodeSandbox Blog

Which specific "best practices" are you referring to?

Ignore the CSS-related discussions for now. React itself doesn't care how you handle the CSS in your app. You can write standalone stylesheets and match the classnames in your HTML output, same as you always have, write inline styles, or use one of the fancy new "CSS-in-JS" libs that have popped up.

Other than that, the aspects of "reusability" and "easier to work with than hand-written DOM manipulation" are certainly true. "Easy to learn" is just an observation, not a reason to use it.

In general, React is beneficial if you're doing any kind of interactive client-side application, regardless of how big your company is. It provides a consistent mental model for how your app is constructed and updated: given some set of state values, the resulting UI output will be X, and the data and updates flow top-down in the tree. This becomes more valuable as the size of the client-side logic and UI grows.

I'd suggest taking some time to actually try out React and get a feel for how it works in practice. The easiest way to do it is to open up https://codesandbox.io and start a new React project.

Here's a couple meta-links that may be helpful for learning more.

My suggested list of resources for getting started with React:

http://blog.isquaredsoftware.com/2017/12/blogged-answers-learn-react/

My React/Redux links list:

https://github.com/markerikson/react-redux-links

If you've got any further questions I can help with,…

I loved this article. Disclaimer, I'm the founder of CodeFund (formerly Code Sponsor). As such, my focus is funding for open source.

To start, you should check out Nadia Eghbal's Lemonade Stand (https://github.com/nayafia/lemonade-stand). She lists many different ways to generate funding, along with the pros and cons. There is no silver bullet. I believe that real substantial funding must come from all directions. Also, funding sources vary based on the personality of the maintainers. Some may prefer to go the fund-raising path with Patreon or Open Collective. Some may prefer the TideLift SLA path. Some go the route of selling merchandise, training or books.

However, most paths of funding require the developer to take on the role of fundraiser, marketer, or even publisher. Developers may not want to do this and would prefer to focus on the code. This is why advertising fits most models. It provides passive, recurring and consistent income that does not require the maintainer to veer from their chosen path. It supports DHH's "fuck you" policy. The maintainer is not beholden to the advertiser with CodeFund, because there is no direct agreement.

CodeFund (https://codefund.app) is an open source platform that helps fund maintainers, bloggers, and builders through non-tracking ethical ads. We only display ads based on the context of the website, not the visitor profile. Our ads are relevant and non-obtrusive to visitors.

For example, go to https://jsbin.com or…

The official React tutorial starts you out by installing create-react-app. I know that vue has something similar and I wouldn't be surprised if others did as well (are there even other important front-end frameworks besides React/Angular/Vue at the moment?)

https://reactjs.org/tutorial/tutorial.html

This allow you to start off with a great setup and skip the configuration so you can get started with just writing React. I highly suggest starting with official docs before writing these off. A lot of other tutorials are of varying quality but you can trust the official docs for sure until you learn more about the community and which resources are worth it (or just use this https://github.com/markerikson/react-redux-links). It can be overwhelming if you aren't actively following the front-end world but the reality is that you need very little node knowledge and can go a very long way without ever touching webpack + babel. Even then, once you get to the point, learning to configure those things won't take much time and to me, it's worth it for the developer experience.

If you really want to dabble in just writing React code, you can also try these browser IDEs if they float your boat.

https://codesandbox.io/
https://stackblitz.com/

react-three-fiber is a really nice library to make web 3D things with. Three.js is brilliant, but there's a metric ton of boilerplate to get complicated things up and running. react-three-fiber just shuffles that away so you can concentrate on building a graph out of components. I've been getting up to speed with it for a little while and I've been chucking things I've learned in to a Github Pages site - https://onion2k.github.io/r3f-by-example/ Each example can be spun up on Codesandbox with the click of a link eg https://onion2k.github.io/r3f-by-example/examples/geometry/instanced-ducks/ (Click the "Fork on Codesandbox" link)

There are tons of good examples of how to use react-three-fiber on Codesandbox - https://codesandbox.io/search?query=react-three-fiber&page=1

Fun example of at least making an attempt...the Demuxed website for 2019[1] had a big, animated hero image on top of a deep purple background. Obviously we went with a video first, which looked great, but then...we ran into this problem and different browsers/hardware all would show slight-but-obvious differences between the video background and the hero background.

Ultimately we decided to just use a gif, but the other, more fun solution we experimented with was to use canvas to render the video, grab the hex value from one of the purple pixels, and set the background to that[2].

[1] https://2019.demuxed.com

[2] https://codesandbox.io/s/video-canvas-playground-gp0hk?from-embed=&initialpath=3-analyze.html&file=/index.html

I ran into that myself while working on a form heavy project. You can use various react form libraries to help make things easier, but then you need to figure out how to wrap your favorite visual component library. Passing all the properties between the two is really really confusing.

I'm a fan of the Material-UI project which provides the visual components and ability to style them however you want. React Final Form is terrific with managing forms (and easily made very performant).

imho, these form components become really nice to work with...

Demo: https://lookfirst.github.io/mui-rff/

Codesandbox: https://codesandbox.io/s/react-final-form-material-ui-example-tqv09

Code: https://github.com/lookfirst/mui-rff