Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link to library examples using Create React App #737

Closed
gaearon opened this issue Sep 24, 2016 · 42 comments
Closed

Link to library examples using Create React App #737

gaearon opened this issue Sep 24, 2016 · 42 comments

Comments

@gaearon
Copy link
Member

gaearon commented Sep 24, 2016

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
Copy link
Member Author

gaearon commented Sep 24, 2016

"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
Copy link

zebapy commented Sep 24, 2016

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

@hnordt
Copy link
Contributor

hnordt commented Sep 24, 2016

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

@stephenkeep
Copy link

stephenkeep commented Sep 24, 2016

This is where I first came across CRA:

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

@eddywashere
Copy link

eddywashere commented Sep 25, 2016

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
Copy link

vinpac commented Sep 25, 2016

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
Copy link
Member Author

gaearon commented Sep 26, 2016

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.

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
Copy link
Contributor

just-boris commented Sep 26, 2016

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
Copy link
Member Author

gaearon commented Sep 26, 2016

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
Copy link

skolmer commented Sep 26, 2016

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
Copy link

claughlin-r7 commented Sep 26, 2016

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

@amsdamsgram
Copy link

amsdamsgram commented Sep 26, 2016

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

@iswanj
Copy link

iswanj commented Sep 26, 2016

@gaearon I'll take react-intl

@vjeux
Copy link
Contributor

vjeux commented Sep 26, 2016

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
Copy link

claughlin-r7 commented Sep 26, 2016

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
Copy link
Member Author

gaearon commented Sep 26, 2016

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
Copy link

claughlin-r7 commented Sep 26, 2016

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
Copy link
Member Author

gaearon commented Sep 26, 2016

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
Copy link

amsdamsgram commented Sep 27, 2016

@gaearon I'll take belle

@gaearon
Copy link
Member Author

gaearon commented Sep 27, 2016

Please see my review of this PR: formatjs/formatjs#669 (review). 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
Copy link

amsdamsgram commented Sep 27, 2016

Hey, I'm running into an issue.

capture d ecran 2016-09-27 a 18 23 27

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
Copy link
Member Author

gaearon commented Sep 27, 2016

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
Copy link

amsdamsgram commented Sep 27, 2016

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
Copy link
Member Author

gaearon commented Sep 27, 2016

As I noted before, I’d recommend making examples use library version from npm: #737 (comment). 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
Copy link
Member Author

gaearon commented Sep 27, 2016

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
Copy link
Contributor

just-boris commented Sep 27, 2016

I am going to migrate spectacle-boilerplate.
CRA will dramatically simplify setup there.
UPD initial implementation FormidableLabs/spectacle-boilerplate#31

@pjm17971
Copy link

pjm17971 commented Sep 27, 2016

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
Copy link
Member Author

gaearon commented Sep 27, 2016

I believe I mentioned this in a comment before: #737 (comment). 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
Copy link

pjm17971 commented Sep 27, 2016

@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
Copy link

gayancharith commented Sep 28, 2016

@gaearon I'll take react-countup

@tbillington
Copy link

tbillington commented Sep 28, 2016

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

@amsdamsgram
Copy link

amsdamsgram commented Sep 29, 2016

@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:

@gaearon
Copy link
Member Author

gaearon commented Sep 30, 2016

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
Copy link
Member Author

gaearon commented Sep 30, 2016

@tbillington That would be cool too!

@iswanj
Copy link

iswanj commented Oct 1, 2016

@gaearon I pushed a PR for react-datalist too

@JisuPark
Copy link
Contributor

JisuPark commented Oct 3, 2016

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

@gayancharith
Copy link

gayancharith commented Oct 8, 2016

@gaearon I pushed a PR for react-countup

@gayancharith
Copy link

gayancharith commented Oct 8, 2016

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

@kennetpostigo
Copy link

kennetpostigo commented Oct 11, 2016

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

@gayancharith
Copy link

gayancharith commented Oct 15, 2016

@kennetpostigo sure I will

@transitive-bullshit
Copy link
Contributor

transitive-bullshit commented Sep 20, 2017

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
Copy link

OscarYuen commented Nov 8, 2017

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

@lock lock bot locked and limited conversation to collaborators Jan 21, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests