move code to example: composition vs inheritance

[cyan33]

As is mentioned in #246, I'm trying to move the code from docs/composition-vs-inheritance to /examples. Just want to send a small PR to see if I'm doing it the right way so that I could move on for the rest work.

There are several things that I noticed though:

1. I tried to convert codepen link to a codesandbox one, but the thing is: there is no global variable name React and ReactDOM in codesandbox. So I had to add it manually through import but it clearly adds noise to the previous compact example. Is there a quick fix about this? (I'm not quite familiar with codesandbox)
2. What if the codepen example contains css styles? How can I combine all of those to a js file? Or should I come up a new code example maybe?

cc @washingtonsoares @bvaughn

[reactjs-bot]

Deploy preview for reactjs failed.

Built with commit 5f552b5

https://app.netlify.com/sites/reactjs/deploys/5b0f84e611b73b170df22149

[washingtonsoares]

Hello!

It's the first time I'm reading the code and I'm wondering.
Why don't we move this example to CodeSandbox?

[cyan33]

Yeah my intention was to move it to CodeSandbox. But in this codepen example, we have both css and javascript and I'm not sure about how to do that within a single javascript file in the example folder. Any thoughts?

[washingtonsoares]

One question: Is it possible to reference multiple files through a codesandbox: // link? If it is possible, I see that it is possible to solve the problem if we create a style.css file and reference it in index.js.

[washingtonsoares]

Another idea would be to create css-in-js, but I'm afraid to cause some unnecessary 'complexity' in the documentation.

What you think about ?

[cyan33]

Is it possible to reference multiple files through a codesandbox: // link?

I've tried that but it didn't work. Is it a gatsby plugin that we are using? Maybe should see how that works.

Another idea would be to create css-in-js...

For the second approach, I think it could add much extraneous noise to the example snippets, which is meant to be clear and compact.

[bvaughn]

I tried to convert codepen link to a codesandbox one, but the thing is: there is no global variable name React and ReactDOM in codesandbox. So I had to add it manually through import but it clearly adds noise to the previous compact example. Is there a quick fix about this? (I'm not quite familiar with codesandbox)

The short answer is, " add the import".

We could do something kind of hacky to expose the import as a global var, but it might confuse users who fork the sandbox.

What if the codepen example contains css styles? How can I combine all of those to a js file? Or should I come up a new code example maybe?

Might be better to pick a different example for now.

CodeSandbox API supports adding multiple files- so we could also send a CSS file. But the Gatsby plug-in I wrote doesn't support that yet. Maybe you'd be interested in adding that ability to the plugin as an initial step?

[cyan33]

@bvaughn That sounds interesting. Could you show me the link to the gatsby plugin you wrote?

[washingtonsoares]

Maybe you'd be interested in adding that ability to the plugin as an initial step?

I think it's good to add the plugin's ability to support multiple files.

[washingtonsoares]

Could you show me the link to the gatsby plugin you wrote?

@cyan33 I think this is the link: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-code-repls

[bvaughn]

I'm thinking you could pass it a comma-separated list of files. This would be a backwards compatible change too.

So a single file would continue to be:

[codepen://components-and-props/rendering-a-component.js]

And multiple files would become:

[codepen://components-and-props/rendering-a-component.js,components-and-props/rendering-a-component.css]

[cyan33]

That seems good. Working on it now.

[washingtonsoares]

Hello guys!

All the pull requests that refer to this pull request have already been merged.
I would be very happy if we could finalize this too! 😃

I can help by resolving conflicts and reviewing the code.

What do you think ? @cyan33 @bvaughn

[washingtonsoares]

@bvaughn @cyan33 Do you think it would be a good idea to continue this work? I think it will not be so difficult, since the PRs related in Gatsby have already been merged.

[cyan33]

@washingtonsoares Hey Washington, hope you've doing well and thanks for following up on this pull request. I'll take a look after work!

[BartoszKlonowski]

Hello @cyan33!
I was walking through that part of docs and saw that the composition-vs-inheritance does no longer exists in the docs and I was unable to find any exact replacement. We already have a bunch of good examples in Passing Props to a Component page, so I don't think this PR you created is still required.
Let me close this as outdated, but thank you very much for taking the time to contribute to the docs! 👍