Link to library examples using Create React App

[gaearon]

I would like to compile a list of React-related libraries whose examples use Create React App for build setup. Redux examples except for the universal and counter-vanilla all use it. React Router 4 examples are all copy-pasteable into App.js generated with Create React App.

Please help me find more such examples!

---

Update: help wanted porting libraries! See the instructions below.

[gaearon]

"Boilerplate" examples that use CRA for build setup and showcase how to do something in React are welcome too! Please let me know if you find or create any.

[zebapy]

Creact-react-app and ParseServer API https://github.com/zebapy/create-react-app-parse-redux

[hnordt]

I'll be creating some examples for https://github.com/smalldots/smalldots using CRA soon, but it's not ready yet :(

[stephenkeep]

This is where I first came across CRA:

https://github.com/marmelab/admin-on-rest/blob/master/docs/Tutorial.md

[eddywashere]

This might fall under boilerplate example - component-template. It's built with CRA to help enable folks to publish components built on top of reactstrap or react components in general. Planning to add a getting started guide to reactstrap that uses CRA as well. Happy to hear feedback on this use or abuse of CRA : ]

[vinpac]

https://github.com/vinpac/base-kit

It comes with redux, react-router 4, basic components ( e.g. Dropdown, Modal ), sass support and a configurable and awesome style library based on bootstrap 4.

Example of use ( based on Stripe layout ): https://vinpac.github.io/base-kit/

[gaearon]

Here is good list of popular React libraries (and here’s a better one).

For those that offer components and have examples with custom build setups and don’t need server rendering or exotic features, let’s send PRs that use Create React App for example code? If the authors don’t them, let’s also collect feedback in this thread.

Please comment if you’d like to help out with this! Make sure to mention the library names you’re going to tackle so that we don’t duplicate effort.

• [x] react-intl @iswanj https://github.com/yahoo/react-intl/pull/669
• [ ] react-loader @claughlin-r7
• [ ] belle @iDams
• [ ] react-countup @gayancharith

How to do it:

• Write a comment in this thread with the library name you intend to migrate.
• Clone the library code.
• Make sure you can run the examples.
• Create a project with CRA inside the library repository.
• Port the examples over to it, if possible.
• Make it the example folder when you’re done.
• If you’re stuck, or something doesn’t work, ask for help in this thread.
• Please make sure you explain why we’re doing it and preserve authors’ intent.
• Send a PR!
• If it’s rejected, don’t be sad. We all learn from this!
• Report the results back here.

[just-boris]

vjeux/most-npm-installed-projects Created 9 months ago

Can we ask @vjeux to update the statistics? For example, there is no aphrodite, however, there are some examples, that can be moved to CRA.

[gaearon]

Yeah, this is the only list I found so far but it shouldn’t be hard to compile a better one (or use “awesome” and “ecosystem” lists). You’re welcome to add more lists in comments, and I’ll put them into the post.

[skolmer]

I would love to see a Visual Studio Code Extension for react-create-app that also generates required vscode configuration. A sample vscode configuration can be found in this boilerplate project: https://github.com/skolmer/react-hot-boilerplate-vscode Details about vscode extensions https://code.visualstudio.com/docs/extensions/overview If someone is interested to cooperate on an extension please let me know!

[claughlin-r7]

@gaearon I'll take a look at updating react-loader

[amsdamsgram]

As @gaearon said, this is a pretty good list too for react tools: awesome list

[iswanj]

@gaearon I'll take react-intl

[vjeux]

I spent an entire day getting the information from https://react.parts/ and it was painful. I'd love if we could ask the authors of that website for the information as they already have it in their db rather than trying to crawl it again.

[claughlin-r7]

What's the recommended process for setting up an examples folder. Should you comment the dist code from the libraries build task then reference this in the examples?

[gaearon]

Not sure what you mean, could you clarify? You can look at Redux examples folder to see how CRA can be used in this context.

[claughlin-r7]

My thinking is if the library has an examples folder e.g.

package.json
src/
--- library.js
dist/
--- libaray.min.js
examples/
--- (CRA) has the create app with some examples of the library in use

inside the examples and importing the library should this be from the dist version or from npm?

Sorry is this is still vauge. Is there a link to the examples in Redux where CRA is being used?

[gaearon]

inside the examples and importing the library should this be from the dist version or from npm?

I think importing from npm is the best way. (Author may not agree, but this is why I’m saying we collect feedback.) The reason I prefer importing from npm is because people often try to copy-paste examples as top-level folders and try to play with them, and importing library source doesn’t really work in that scenario.

[amsdamsgram]

@gaearon I'll take belle

[gaearon]

Please see my review of this PR: https://github.com/yahoo/react-intl/pull/669#pullrequestreview-1746957. I think it’s important we don’t add unnecessary files, preserve original intention (like important <script>s and <title>), don’t appear too spammy, and, most importantly, clarify why we are sending PRs in the first place. You can use my comment there as a reference.

[amsdamsgram]

Hey, I'm running into an issue.

belle is using :: operator of ES2016. CRA seems to not like it and according to this issue #167, we can't configure .babelrc yet or we need to run eject. Is it still the case?

Ejecting CRA won't follow the point of this thread to make it easy for beginners to understand examples right? So is there another solution or should we not consider updating belle example anymore @gaearon?

[gaearon]

belle is using :: operator of ES2016

:: is not a part of ES2016. It is a stage 0 proposal that might never make it into the language. Moreover, it is not the best for performance reasons, as it binds a new function on every render().

I suggest using stage 2 Class Properties proposal instead. It is supported by Create React App because we use it at Facebook, and if its syntax changes, we’ll make sure to release a codemod to automatically migrate the code for Create React App users.

Here is how equivalent code looks like with Class Properties:

  _renderDay(day) {
    const date = day.getDate();
    return (
      <div onMouseDown={this._onMouseDown}>
        🎁{ date }
      </div>
    );
  }

  _onMouseDown = (event) => {
    event.stopPropagation();
  }

If you’re confused about the changes, I removed :: and instead used an arrow in _onMouseDown definition so that it gets autobound.

Update: actually, this won’t work in that file since DatePickerPlayground uses React.createClass(). But with React.createClass(), autobinding is enabled by default so :: has no effect there. You can safely completely remove :: from that example.

[amsdamsgram]

That was a quick answer, thanks! Ok I got it but this is a change in a lib component not my example, so it might be a choice of the author of the lib. Should we still do the change? (It might happen in other components I guess)

[gaearon]

As I noted before, I’d recommend making examples use library version from npm: https://github.com/facebookincubator/create-react-app/issues/737#issuecomment-249708654. In this case library components would all be compiled. I don’t know whether it works well for Belle authors, but it’s worth suggesting. It’s always possible to use npm link for local development.

[gaearon]

That said DatePickerPlayground.js is definitely in examples folder, not in a library component. This alias makes belle resolve to src so you’d need to add belle explicitly to package.json.

[just-boris]

I am going to migrate spectacle-boilerplate. CRA will dramatically simplify setup there. UPD initial implementation https://github.com/FormidableLabs/spectacle-boilerplate/pull/31

[pjm17971]

So I might be asking my stupid question of the day, but the first thing I did when I came across create-react-app was to attempt to outsource my library example website build hell to it. However, in the end I couldn't work out how to refer to my own ES6 source, which resided outside of the create-react-app created src/ dir.

Since one on the main uses (for me, and since this issue invites comments on use cases that might not work) in having an example directory is to develop my library against, importing from npm didn't seem like a great way to go (I can see in other cases that might be ok). I want to build a new example, or modify and existing one, get my code working, and only then publish to npm.

So instead I made my whole project a CRA project, with its src/ dir, then under that my own source directory called components/ and another directory called examples/. This worked, but I'm not super excited about the structure.

[gaearon]

I believe I mentioned this in a comment before: https://github.com/facebookincubator/create-react-app/issues/737#issuecomment-249708654. I also used to link examples to the source. However I've stopped doing it now because of all the people who try to run them as standalone apps and who can't figure out why configuration breaks once you extract the example into a standalone folder outside the project. So these days I don't use webpack config for that, and instead use npm link for local development of examples. The downside is that I have to rebuild my library/component to refresh the example. Depending on the project, this may or may not be an acceptable tradeoff, but that's the only option CRA allows right now.

[pjm17971]

@gaearon yes, I read that comment, but from a library author's perspective, I'm explaining why that isn't a workable solution. At least for me. But you clearly understand the use case and the downside, so my work is done here. [Edit: I did try your approach and I can't make it work with my peer dependencies. npm link and peer dependencies seem very much broken.]

[gayancharith]

@gaearon I'll take react-countup

[tbillington]

@gaearon What about web apps created with create-react-app?

[amsdamsgram]

@gaearon I'm getting a lot of warnings with belle. CRA is using react 15.3.2 and belle 15.0.0-rc.2. The author blocked the version in the packages.json ("react": "=15.0.0-rc.2").

Examples with CRA are running fine though. My question is, should I fixed all the warnings in this PR? Or we consider this is not related to this PR and I create another issue saying belle should update its react version?

For info, these are the warnings I get:

• Unknown prop
• You are manually calling a React.PropTypes validation function

[gaearon]

Or we consider this is not related to this PR and I create another issue saying belle should update its react version?

Updating React should be a separate PR but I understand it might be a large undertaking. I’m sure Belle users would appreciate it though!

[gaearon]

@tbillington That would be cool too!

[iswanj]

@gaearon I pushed a PR for react-datalist too

[JisuPark]

@gaearon I'll take a look at react-motion

[gayancharith]

@gaearon I pushed a PR for react-countup

[gayancharith]

@gaearon I'll take a look at react-google-login-component

[kennetpostigo]

@gayancharith thank you for the PR! You think you can make one for the react-facebook-login-component?

[gayancharith]

@kennetpostigo sure I will

[transitive-bullshit]

For anyone who ends up here an looking for a good React library starting point that uses create-react-app for an example project, check out react-modern-library-boilerplate.

[OscarYuen]

This is an example project for using router v4, redux, ant design and react-intl with create-react-app. It would be kept developing. create-react-redux-router-intl-app