diff --git a/.eslintignore b/.eslintignore index ff8a5577..94254171 100644 --- a/.eslintignore +++ b/.eslintignore @@ -4,4 +4,7 @@ node_modules/* content/* # Ignore built files -public/* \ No newline at end of file +public/* + +# Ignore examples +examples/* \ No newline at end of file diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 00000000..59cc204e --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,5 @@ +Thank you for the PR! Contributors like you keep React awesome! + +Please see the Contribution Guide for guidelines: + +https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..c392bd3f --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,139 @@ +# Contributing + +Thank you for your interest in contributing to the React Docs! + +## Code of Conduct + +Facebook has adopted a Code of Conduct that we expect project +participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct) +so that you can understand what actions will and will not be tolerated. + +## Guidelines for Text + +**Different sections intentionally have different styles.** + +The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below. + +**[Tutorial](https://reactjs.org/tutorial/tutorial.html)** is relatively informal, and is designed for people who prefer a hands-on approach to learning, and can tolerate skipping theory in favor of practice. Its goal is to give the reader a feel for a typical React workflow rather than to explain fundamentals in detail. Here we focus on *what* to do and spend less time on *how* or *why* we did it. It is extremely important to do a lot of hand-holding and unambiguously describe every single change. It should be possible for a beginner to mechanically follow every instruction, and still get to a working tic-tac-toe game. + +**[Quick Start](https://reactjs.org/docs/hello-world.html)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Quick Start builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Quick Start article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Quick Start also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them. This is, for example, why we introduce elements before components. Resist adding too much detail to Quick Start articles. They intentionally don't cover all corner cases, and focus on establishing firm foundations. + +**[Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)** are deep dives into topics that aren't essential for a beginner developer but that everyone bumps into sooner or later. They don't have a specific order, and target more experienced developers. If you have a set of recipes fitting a particular use case, and those recipes aren't opinionated (most React users would agree on them), this is the place to add them. + +**[Reference](https://reactjs.org/docs/react-api.html)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Quick Start or Advanced Guides should be mentioned in the reference documentation for the corresponding APIs. + +**[Contributing](https://reactjs.org/docs/how-to-contribute.html)** should stay up-to-date and be friendly to relatively experienced developers. + +**[FAQ](https://reactjs.org/docs/faq-ajax.html)** has a more conversational tone than the other sections. Here, it's fine to include some content that's not primarily concerned with React, as long as React users are overwhelmingly interested in it (e.g. recommendations on directory structure). It's also okay to show more than a single way to do something in the FAQ, and briefly discuss the tradeoffs. The FAQ prioritizes unblocking people with a working solution over explaining concepts in detail, and can be more opinionated than the rest of the docs, even providing popular library recommendations. + +**Try to follow your own instructions.** + +When writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated. + +## Guidelines for Code Examples + +### Syntax + +**Prefer JSX to `createElement`.** + +Ignore this if you're specifically describing `createElement`. + +**Use `const` where possible, otherwise `let`. Don't use `var`.** + +Ignore this if you're specifically writing about ES5. + +**Don't use ES6 features when equivalent ES5 features have no downsides.** + +Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it. + +In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature. + +**Don't use features that aren't standardized yet.** + +For example, **don't** write this: + +```js +class MyComponent extends React.Component { + state = {value: ''}; + handleChange = (e) => { + this.setState({value: e.target.value}); + }; +} +``` + +Instead, **do** write this: + +```js +class MyComponent extends React.Component { + constructor(props) { + super(props) + this.handleChange = this.handleChange.bind(this); + this.state = {value: ''}; + } + handleChange(e) { + this.setState({value: e.target.value}); + } +} +``` + +Ignore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text. + +### Style + +- Use semicolons. +- No space between function names and parens (`method() {}` not `method () {}`). +- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/). + +### Highlighting + +Use `js` as the highlighting language in Markdown code blocks: + +```` +```js +// code +``` +```` + +Sometimes you'll see blocks with numbers. +They tell the website to highlight specific lines. + +You can highlight a single line: + +```` +```js{2} +function hello() { + // this line will get highlighted +} +``` +```` + +A range of lines: + +```` +```js{2-4} +function hello() { + // these lines + // will get + // highlighted +} +``` +```` + +Or even multiple ranges: + +```` +```js{2-4,6} +function hello() { + // these lines + // will get + // highlighted + console.log('hello'); + // also this one + console.log('there'); +} +``` +```` + +Be mindful that if you move some code in an example with highlighting, you also need to update the highlighting. + +Don't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss. diff --git a/content/blog/2015-07-03-react-v0.14-beta-1.md b/content/blog/2015-07-03-react-v0.14-beta-1.md index 57db47aa..4f145055 100644 --- a/content/blog/2015-07-03-react-v0.14-beta-1.md +++ b/content/blog/2015-07-03-react-v0.14-beta-1.md @@ -7,7 +7,7 @@ This week, many people in the React community are at [ReactEurope](https://www.r With React 0.14, we're continuing to let React mature and to make minor changes as the APIs continue to settle down. I'll talk only about the two largest changes in this blog post; when we publish the final release we'll be sure to update all of our documentation and include a full changelog. -You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems. +You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems. ## Two Packages diff --git a/content/blog/2017-04-07-react-v15.5.0.md b/content/blog/2017-04-07-react-v15.5.0.md index 7a61d6e8..a0654165 100644 --- a/content/blog/2017-04-07-react-v15.5.0.md +++ b/content/blog/2017-04-07-react-v15.5.0.md @@ -63,7 +63,7 @@ jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js The `propTypes`, `contextTypes`, and `childContextTypes` APIs will work exactly as before. The only change is that the built-in validators now live in a separate package. -You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/frameworks/react/#setup-flow-with-react-a-classtoc-idtoc-setup-flow-with-react-hreftoc-setup-flow-with-reacta). +You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/react/components/). ### Migrating from React.createClass diff --git a/content/blog/2017-09-26-react-v16.0.md b/content/blog/2017-09-26-react-v16.0.md index b74789dc..31f52d3b 100644 --- a/content/blog/2017-09-26-react-v16.0.md +++ b/content/blog/2017-09-26-react-v16.0.md @@ -71,7 +71,7 @@ See the [documentation for `ReactDOMServer`](/docs/react-dom-server.html) for mo ### Support for custom DOM attributes -Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes. +Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](/blog/2017/09/08/dom-attributes-in-react-16.html). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes. ### Reduced file size @@ -135,7 +135,7 @@ Refer to the documentation for [detailed installation instructions](/docs/instal Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.** For deprecations listed in [packaging](#packaging) below, codemods are provided to automatically transform your deprecated code. -See the [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) blog post for more information, or browse the codemods in the [react-codemod](https://github.com/reactjs/react-codemod) project. +See the [15.5.0](/blog/2017/04/07/react-v15.5.0.html) blog post for more information, or browse the codemods in the [react-codemod](https://github.com/reactjs/react-codemod) project. ### New deprecations @@ -171,7 +171,7 @@ React 16 includes a number of small breaking changes. These only affect uncommon * There is no `react/lib/*` and `react-dom/lib/*` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in a new issue, and we’ll try to figure out a migration strategy for you. * There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them. -* The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://reactjs.org/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods. +* The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods. * The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example: * `react/dist/react.js` → `react/umd/react.development.js` * `react/dist/react.min.js` → `react/umd/react.production.min.js` @@ -197,12 +197,11 @@ ReactDOM.render( ); ``` -React also depends on `requestAnimationFrame` (even in test environments). A simple shim for test environments would be: +React also depends on `requestAnimationFrame` (even in test environments). +You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`: ```js -global.requestAnimationFrame = function(callback) { - setTimeout(callback, 0); -}; +import 'raf/polyfill'; ``` ## Acknowledgments diff --git a/content/community/articles.md b/content/community/articles.md new file mode 100644 index 00000000..7ac99209 --- /dev/null +++ b/content/community/articles.md @@ -0,0 +1,16 @@ +--- +id: articles +title: Articles +layout: community +sectionid: community +permalink: community/articles.html +--- + +- [React How-to](https://github.com/petehunt/react-howto) - Pete Hunt's guide to the React ecosystem. +- [9 things every React.js beginner should know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know) - Cam Jackson's guide for beginners. +- [React "Aha" Moments](https://tylermcginnis.com/react-aha-moments/) - Tyler McGinnis' article on his collection of "Aha" moments with React. +- [You're missing the point of React](https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a) - Dan Abramov's article about the best parts of React. +- [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's reccommended timeline for learning React and the React ecosystem. +- [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - Joshua Comeau's guide to showcase how easy it can be to start modern React development. +- [React FAQ](https://reactfaq.site/) - An external site with articles that try to answer frequently asked questions about React. +- [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state. diff --git a/content/community/conferences.md b/content/community/conferences.md index 0d2d052a..0ed693e7 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -7,22 +7,9 @@ permalink: community/conferences.html redirect_from: "docs/conferences.html" --- -## Upcoming Conferences - -### React Summit 2017 -October 21 in Lagos, Nigeria - -[Website](https://reactsummit2017.splashthat.com/) - [Twitter](https://twitter.com/DevCircleLagos/) - [Facebook](https://www.facebook.com/groups/DevCLagos/) - -### ReactiveConf 2017 -October 25–27, Bratislava, Slovakia +Do you know of a local React.js conference? Add it here! (Please keep the list chronological) -[Website](https://reactiveconf.com) - -### React Seoul 2017 -November 4 in Seoul, South Korea - -[Website](http://seoul.reactjs.kr/en) +## Upcoming Conferences ### React Day Berlin December 2, Berlin, Germany @@ -44,6 +31,11 @@ May 17-18 in Paris, France [Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) +### ReactNext 2018 +September 6 in Tel Aviv, Israel + +[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Facebook](https://facebook.com/ReactNext2016) + ### ReactJS Day 2018 October 5 in Verona, Italy @@ -182,3 +174,19 @@ October 7 in Sao Paulo, Brazil October 13 in Stockholm, Sweden [Website](https://statejs.com/) + +### React Summit 2017 +October 21 in Lagos, Nigeria + +[Website](https://reactsummit2017.splashthat.com/) - [Twitter](https://twitter.com/DevCircleLagos/) - [Facebook](https://www.facebook.com/groups/DevCLagos/) + +### ReactiveConf 2017 +October 25–27, Bratislava, Slovakia + +[Website](https://reactiveconf.com) + +### React Seoul 2017 +November 4 in Seoul, South Korea + +[Website](http://seoul.reactjs.kr/en) + diff --git a/content/community/courses.md b/content/community/courses.md new file mode 100644 index 00000000..eb7aefe5 --- /dev/null +++ b/content/community/courses.md @@ -0,0 +1,33 @@ +--- +id: courses +title: Courses +layout: community +sectionid: community +permalink: community/courses.html +--- + +## Free Courses + +- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React. + +- [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - This series will explore the basic fundamentals of React to get you started. + +- [React Armory: Learn React by Itself](https://reactarmory.com/guides/learn-react-by-itself) - With React Armory, you can learn React without the buzzwords. + +- [The Road to Learn React](https://www.robinwieruch.de/the-road-to-learn-react/) - Build a real world application in plain React without complicated tooling. + +## Paid Courses + +- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics. + +- [Frontend Masters](https://frontendmasters.com/courses/) - Video courses on React and other frontend frameworks. + +- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends. + +- [Pure React](https://daveceddia.com/pure-react/) - A step-by-step guide to mastering React. + +- [React for Beginners](https://reactforbeginners.com/) - Learn React in just a couple of afternoons. + +- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level. + +- [Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React". diff --git a/content/community/examples.md b/content/community/examples.md index bccc3287..7d43a8d4 100644 --- a/content/community/examples.md +++ b/content/community/examples.md @@ -1,5 +1,22 @@ --- -permalink: docs/examples.html -layout: redirect -dest_url: https://github.com/facebook/react/wiki/Examples +id: examples +title: Example Projects +layout: community +sectionid: community +permalink: community/examples.html --- + +There are many example projects created by the React community. Feel free to add your own project. If you add a project, please commit to keeping it up to date with the latest versions of React. + + +* **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React +* **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji +* **[Github Battle App](https://github.com/ReactTraining/react-fundamentals/tree/hosting)** Battle two Github users and see the most popular Github projects for any language. +* **[Haskell Websockets React Game of Score](https://www.fpcomplete.com/user/dschalk/Websockets%20Game%20of%20Score):** React with a Haskell websockets server. +* **[K5 Showcase](https://showcase.cloud.global.fujitsu.com):** Sample applications for React.js and Flux. +* **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & react-router-powered implementation of Hacker News using its Firebase API. +* **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search +* **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies. +* **[Product Comparison Page](https://github.com/Rhymond/product-compare-react)** Simple Product Compare page built in React +* **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL. +* **[Reddit Mobile](https://github.com/reddit/reddit-mobile)** Reddit's mobile platform. diff --git a/content/community/external-resources.md b/content/community/external-resources.md new file mode 100644 index 00000000..656a4399 --- /dev/null +++ b/content/community/external-resources.md @@ -0,0 +1,19 @@ +--- +id: external-resources +title: External Resources +layout: community +sectionid: community +permalink: community/external-resources.html +--- + +There are many wonderful curated resources the React community has put together. + +- [Reactiflux](https://www.reactiflux.com/) - A community of 20,000+ React developers. They keep a well curated [learning section](https://www.reactiflux.com/learning/). + +- [React-Redux Links](https://github.com/markerikson/react-redux-links) - Mark Erikson's highly curated list of tutorials and resources for React/Redux/ES6 and more. + +- [Awesome React](https://github.com/enaqx/awesome-react) - A collection of awesome things regarding React ecosystem. + +- [Awesome React Components](https://github.com/brillout/awesome-react-components) - A curated list of React components. + +- [Awesome React Talks](https://github.com/tiaanduplessis/awesome-react-talks) - A curated list of React talks. diff --git a/content/community/meetups.md b/content/community/meetups.md new file mode 100644 index 00000000..8fb3a68f --- /dev/null +++ b/content/community/meetups.md @@ -0,0 +1,117 @@ +--- +id: meetups +title: Meetups Around the World +layout: community +sectionid: community +permalink: community/meetups.html +--- + +Do you have a local React.js meetup? Add it here! (Please keep the list alphabetical) + +## Australia +* [Melbourne](http://www.meetup.com/React-Melbourne/) +* [Sydney](http://www.meetup.com/React-Sydney/) + +## Austria +* [Vienna](http://www.meetup.com/Vienna-ReactJS-Meetup/) + +## Belgium +* [Belgium](http://www.meetup.com/ReactJS-Belgium/) + +## Brazil +* [Belo Horizonte](http://www.meetup.com/reactbh/) +* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/) +* [São Paulo](http://www.meetup.com/pt-BR/ReactJS-SP/) + +## Canada +* [Vancouver, BC](http://www.meetup.com/ReactJS-Vancouver-Meetup/) + +## China +* [Beijing](http://www.meetup.com/Beijing-ReactJS-Meetup/) + +## Colombia +* [Medellin](https://www.meetup.com/React-Medellin/) + +## Denmark +* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/) +* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/) + +## England (UK) +* [Manchester](http://www.meetup.com/Manchester-React-User-Group/) + +## France +* [Paris](http://www.meetup.com/ReactJS-Paris/) + +## Germany +* [Berlin](http://www.meetup.com/React-Berlin/) +* [Hamburg](http://www.meetup.com/Hamburg-React-js-Meetup/) +* [Munich](http://www.meetup.com/ReactJS-Meetup-Munich/) + +## Greece +* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/) + +## India +* [Bangalore](https://www.meetup.com/ReactJS-Bangalore/) + +## Ireland +* [Dublin](http://www.meetup.com/ReactJS-Dublin/) + +## Israel +* [Tel Aviv](http://www.meetup.com/ReactJS-Israel/) + +## Netherlands +* [Amsterdam](http://www.meetup.com/React-Amsterdam/) + +## New Zealand +* [Wellington](http://www.meetup.com/React-Wellington/) + +## Norway +* [Norway](http://reactjsnorway.com/) +* [Oslo](https://www.meetup.com/ReactJS-Oslo-Meetup/) + +## Peru +* [Lima](http://www.meetup.com/ReactJS-Peru/) + +## Philippines +* [Manila](http://www.meetup.com/reactjs-developers-manila/) + +## Poland +* [Warsaw](http://www.meetup.com/React-js-Warsaw/) + +## Spain +* [Barcelona](http://www.meetup.com/ReactJS-Barcelona/) + +## Sweden +* [Goteborg](http://www.meetup.com/ReactJS-Goteborg/) + +## Ukraine +* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup) + +## US +* [Atlanta, GA - ReactJS](http://www.meetup.com/React-ATL/) +* [Austin, TX - ReactJS](http://www.meetup.com/ReactJS-Austin-Meetup/) +* [Boston, MA - ReactJS](http://www.meetup.com/ReactJS-Boston/) +* [Boston, MA - React Native](http://www.meetup.com/Boston-React-Native-Meetup/) +* [Chicago, IL - ReactJS](http://www.meetup.com/React-Chicago/) +* [Dallas, TX - ReactJS](http://www.meetup.com/ReactDallas/) +* [Irvine, CA - ReactJS](http://www.meetup.com/ReactJS-OC/) +* [Las Vegas, NV - ReactJS](http://www.meetup.com/ReactVegas/) +* [Leesburg, VA - ReactJS](http://www.meetup.com/React-NOVA/) +* [Los Angeles, CA - ReactJS](http://www.meetup.com/socal-react/) +* [Los Angeles, CA - React Native](http://www.meetup.com/React-Native-Los-Angeles/) +* [Nashville, TN - ReactJS](http://www.meetup.com/NashReact-Meetup/) +* [New York, NY - ReactJS](http://www.meetup.com/NYC-Javascript-React-Group/) +* [New York, NY - React Native](http://www.meetup.com/React-Native-NYC/) +* [Palo Alto, CA - React Native](http://www.meetup.com/React-Native-Silicon-Valley/) +* [Phoenix, AZ - ReactJS](http://www.meetup.com/ReactJS-Phoenix/) +* [Portland, OR - ReactJS](http://www.meetup.com/Portland-ReactJS/) +* [Provo, UT - ReactJS](http://www.meetup.com/ReactJS-Utah/) +* [Sacramento, CA - ReactJS](http://www.meetup.com/Sacramento-ReactJS-Meetup/) +* [San Francisco - ReactJS](http://www.meetup.com/ReactJS-San-Francisco/) +* [San Francisco, CA - React Native](http://www.meetup.com/React-Native-San-Francisco/) +* [Santa Monica, CA - ReactJS](http://www.meetup.com/Los-Angeles-ReactJS-User-Group/) +* [Seattle, WA - React Native](http://www.meetup.com/Seattle-React-Native-Meetup/) +* [Seattle, WA - ReactJS](http://www.meetup.com/seattle-react-js/) +* [Tampa, FL - ReactJS](http://www.meetup.com/ReactJS-Tampa-Bay/) +* [Tucson, AZ - ReactJS](http://www.meetup.com/Tucson-ReactJS-Meetup/) +* [Washington, DC - ReactJS](http://www.meetup.com/React-DC/) diff --git a/content/community/nav.yml b/content/community/nav.yml index 776730fb..4903f2c0 100644 --- a/content/community/nav.yml +++ b/content/community/nav.yml @@ -1,14 +1,42 @@ - title: Community Resources items: - id: support - title: Where To Get Support + title: Support - id: conferences title: Conferences + - id: meetups + title: Meetups + - id: articles + title: Articles + - id: podcasts + title: Podcasts - id: videos title: Videos + - id: courses + title: Courses - id: examples title: Examples - href: https://github.com/facebook/react/wiki/Examples - - id: complementary-tools - title: Complementary Tools - href: https://github.com/facebook/react/wiki/Complementary-Tools + - id: external-resources + title: External Resources +- title: Tools + items: + - id: debugging-tools + title: Debugging + - id: component-workbenches + title: Component Workbenches + - id: jsx-integrations + title: JSX Integrations + - id: starter-kits + title: Starter Kits + - id: routing + title: Routing + - id: model-management + title: Model Management + - id: data-fetching + title: Data Fetching + - id: testing + title: Testing + - id: ui-components + title: UI Components + - id: misc + title: Miscellaneous diff --git a/content/community/podcasts.md b/content/community/podcasts.md new file mode 100644 index 00000000..6478cdb7 --- /dev/null +++ b/content/community/podcasts.md @@ -0,0 +1,24 @@ +--- +id: podcasts +title: Podcasts +layout: community +sectionid: community +permalink: community/podcasts.html +--- + +Podcasts dedicated to React and individual podcast episodes with React discussions. + +## Podcasts + +- [JavaScript Air](https://javascriptair.com/) - All about JavaScript (currently not producing new episodes). + +- [React 30](https://react30.com/) - A weekly 30-minute podcast all about React (currently not producing new episodes). + +- [React Podcast](https://itunes.apple.com/us/podcast/react-podcast/id995869265?mt=2) - A podcast covering the ReactJS ecosystem (currently not producing new episodes). + +## Episodes + +- [CodeWinds Episode 4](http://codewinds.com/podcast/004.html) - Pete Hunt talks with Jeff Barczewski about React. + + +- [JavaScript Jabber 73](https://devchat.tv/js-jabber/073-jsj-react-with-pete-hunt-and-jordan-walke) - Pete Hunt and Jordan Walke talk about React. diff --git a/content/community/tools-comp-workbenches.md b/content/community/tools-comp-workbenches.md new file mode 100644 index 00000000..53733830 --- /dev/null +++ b/content/community/tools-comp-workbenches.md @@ -0,0 +1,13 @@ +--- +id: component-workbenches +title: Component Workbenches +layout: community +permalink: community/component-workbenches.html +--- + +* **[React Storybook](https://github.com/kadirahq/react-storybook):** UI component development environment for React. +* **[React Styleguidist](https://github.com/styleguidist/react-styleguidist):** Style guide generator & component workbench for React. +* **[React Showroom](https://github.com/OpusCapita/react-showroom-client):** React based components catalog which provides you with markdown documentation and live examples +* **[patternplate](https://github.com/sinnerschrader/patternplate)**: A platform for pattern and component library development using React. +* **[UiZoo.js](https://github.com/myheritage/UiZoo.js)**: Auto-generated component development environment by the JSDoc of React components. +* **[Neutrino React components preset](https://github.com/eliperelman/neutrino-preset-react-components/)**: Create generic React components and previewing them without the need to embed in an application. Plays nicely with other Neutrino middleware, so you can build, test, preview, and publish multiple React components from a single repository. diff --git a/content/community/tools-data-fetching.md b/content/community/tools-data-fetching.md new file mode 100644 index 00000000..56235637 --- /dev/null +++ b/content/community/tools-data-fetching.md @@ -0,0 +1,12 @@ +--- +id: data-fetching +title: Data Fetching +layout: community +permalink: community/data-fetching.html +--- + +* **[Apollo](http://dev.apollodata.com/react/):** Easy to set up and use GraphQL client. +* **[Axios](https://github.com/mzabriskie/axios):** Promise based HTTP client for the browser and node.js. +* **[Relay Modern](https://facebook.github.io/relay/docs/relay-modern.html)** - A JavaScript framework for building data-driven React applications. +* **[Request](https://github.com/request/request):** Simplified HTTP request client. +* **[Superagent](https://visionmedia.github.io/superagent/):** A lightweight "isomorphic" library for AJAX requests. diff --git a/content/community/tools-debugging.md b/content/community/tools-debugging.md new file mode 100644 index 00000000..5416f7eb --- /dev/null +++ b/content/community/tools-debugging.md @@ -0,0 +1,8 @@ +--- +id: debugging-tools +title: Debugging +layout: community +permalink: community/debugging-tools.html +--- + + * **[React Developer Tools](https://github.com/facebook/react-devtools):** an extension available for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox](https://addons.mozilla.org/firefox/addon/react-devtools/), and as a [standalone app](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) that allows you to inspect the React component hierarchy in the Chrome Developer Tools. diff --git a/content/community/tools-jsx.md b/content/community/tools-jsx.md new file mode 100644 index 00000000..3b7283f3 --- /dev/null +++ b/content/community/tools-jsx.md @@ -0,0 +1,53 @@ +--- +id: jsx-integrations +title: JSX Integrations +layout: community +permalink: community/jsx-integrations.html +--- + +## Editor Integrations +* **[Sublime Text: babel-sublime](https://github.com/babel/babel-sublime):** Snippets, syntax highlighting and optimized color schemes for Sublime Text +* **[Atom: language-babel](https://atom.io/packages/language-babel)** Support for es2016, JSX and Flow. +* **[Visual Studio Code](https://code.visualstudio.com/updates/vFebruary#_languages-javascript)** Visual Studio Code supports JSX directly. +* **[JetBrains WebStorm](http://www.jetbrains.com/webstorm/):** Syntax highlighting, code completion, error detection for JSX +* **[JetBrains IDE Live Templates](https://github.com/Minwe/jetbrains-react):** React live templates for JetBrains editors (e.g. WebStorm, PHPStorm, etc.) +* **[javascript-jsx.tmbundle](https://github.com/jjeising/javascript-jsx.tmbundle)** Syntax for TextMate +* **[web-mode.el](http://web-mode.org):** An autonomous emacs major mode that indents and highlights JSX. No support for Automatic Semicolon Insertion. +* **[vim-jsx](https://github.com/mxw/vim-jsx):** Syntax highlighting and indenting for JSX + +## Build Tools + +* **[Create React App](https://github.com/facebookincubator/create-react-app):** An **officially supported** way to create React apps with no configuration. +* **[nwb](https://github.com/insin/nwb)**: A toolkit for React, Preact & Inferno apps, React libraries and other npm modules for the web, with no configuration (until you need it) +* **[Neutrino](https://neutrino.js.org/)**: Create and build modern JavaScript applications with zero initial configuration. Neutrino combines the power of webpack with the simplicity of presets. +* **[ESLint](http://eslint.org):** A pluggable JavaScript linter that natively supports JSX syntax. Be sure to download [eslint-plugin-react](https://npmjs.com/package/eslint-plugin-react) for React-specific rules. +* **[Structor](https://www.npmjs.com/package/structor):** This tool is a user interface builder for node.js Web applications with React UI. Structor replaces the now deprecated React UI Builder. Watch [Structor Video Tutorials](https://youtu.be/z96xYa51EWI?list=PLAcaUOtEwjoR_U6eE2HQEXwkefeVESix1) +* **[react-jsx](https://github.com/bigpipe/react-jsx):** Compile and use JSX as stand-alone templates that can run server-side and client side! +* **[cjsx-codemod](https://github.com/jsdf/cjsx-codemod):** Write JSX code within Coffeescript! +* **[ReactScript](https://github.com/1j01/react-script):** Write React code within Coffeescript without JSX! +* **[jsxhint](https://npmjs.org/package/jsxhint):** [JSHint](http://jshint.com/) (linting) support. (JSX compilation doesn't affect line numbers so lint can also be run directly on the compiled JS.) +* **[reactify](https://npmjs.org/package/reactify):** [Browserify](http://browserify.org/) transform. +* **[Babel](https://babeljs.io/):** Standalone & [Browserify](http://browserify.org/) transform (formerly known as **6to5**). +* **[node-jsx](https://npmjs.org/package/node-jsx):** Native [Node](http://nodejs.org/) support. +* **[react-hot-loader](http://gaearon.github.io/react-hot-loader/):** Loader for [webpack](http://webpack.github.io/) that lets you edit JSX and have changes appear immediately in the browser without reloading the page. +* **[jsx-loader](https://npmjs.org/package/jsx-loader):** Loader for [webpack](http://webpack.github.io/). +* **[express-jsxtransform](https://www.npmjs.org/package/express-jsxtransform):** Middleware for [Express](https://www.npmjs.org/package/express). +* **[gradle-react-plugin](https://github.com/ehirsch/gradle-react-plugin):** Transform jsx sources during a gradle build. +* **[grunt-react](https://npmjs.org/package/grunt-react):** [GruntJS](http://gruntjs.com/) task. +* **[gulp-react](https://npmjs.org/package/gulp-react):** [GulpJS](http://gulpjs.com/) plugin. +* **[brunch-react](https://www.npmjs.org/package/react-brunch):** [Brunch](http://brunch.io/) plugin. +* **[jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin):** [RequireJS](http://requirejs.org/) plugin. +* **[react-meteor](https://github.com/benjamn/react-meteor):** [Meteor](http://www.meteor.com/) plugin. +* **[pyReact](https://github.com/facebook/react-python):** [Python](http://www.python.org/) bridge to JSX. +* **[react-rails](https://github.com/facebook/react-rails):** Ruby gem for using JSX with [Ruby on Rails](http://rubyonrails.org/). +* **[react-laravel](https://github.com/talyssonoc/react-laravel):** PHP package for using ReactJS with [Laravel](http://laravel.com/). +* **[ReactJS.NET](http://reactjs.net/):** .NET library for React and JSX. +* **[sbt-reactjs](https://github.com/ddispaltro/sbt-reactjs)** SBT/Play/Scala JSX compiler plugin +* **[mimosa-react](https://github.com/dbashford/mimosa-react):** [Mimosa](http://mimosa.io) plugin. +* **[react-grails-asset-pipeline](https://github.com/peh/react-grails-asset-pipeline):** Assets for react and precompilation of jsx files in [Grails](http://grails.org/). +* **[gore-gulp](https://github.com/goreutils/gore-gulp):** Wrapper around [webpack](https://webpack.github.io/), [eslint](http://eslint.org/), [mocha](https://mochajs.org/) for ease of use and zero configuration. +* **[webpack](https://github.com/webpack/webpack):** Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff. +* **[webpack-bbq](https://github.com/wenbing/webpack-bbq):** transform your src to lib, supports server rendering and static rendering. +* **[jsxtransformer](https://github.com/cronn-de/jsxtransformer):** Compile pipeline for jsx files in Java +* **[babylon-jsx](https://github.com/marionebl/babylon-jsx)**: Transform JSX to ES2015 with babylon sans babel +* **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** - A simple CLI to create and build Express server for your create-react-app projects, featuring Server-side rendering and Code-splitting. diff --git a/content/community/tools-misc.md b/content/community/tools-misc.md new file mode 100644 index 00000000..64e5a0f4 --- /dev/null +++ b/content/community/tools-misc.md @@ -0,0 +1,19 @@ +--- +id: misc +title: Miscellaneous +layout: community +permalink: community/misc.html +--- + +* **[react-localize-redux](https://github.com/ryandrewjohnson/react-localize-redux)** - Localization library for React/Redux. + +* **[react-inspector](https://github.com/xyc/react-inspector):** Use DevTools-like object inspectors inside your React app. +* **[jreact](https://github.com/KnisterPeter/jreact):** Rendering react server-side within a JVM (Java 7 or Java 8) +* **[react-jss](https://github.com/jsstyles/react-jss):** Inject and mount jss styles in React components. +* **[django-react](https://github.com/markfinger/django-react):** Server-side rendering of React components for django apps. +* **[react-engine](https://github.com/paypal/react-engine):** Composite render engine for isomorphic express apps to render both plain react views and react-router views. +* **[react-render-visualizer](https://github.com/redsunsoft/react-render-visualizer):** A visual way to see what is (re)rendering and why. +* **[javascript-monads](https://github.com/dschalk/javascript-monads):** As this project matures, the monads are becoming more than mere toys. React is used in unorthodox ways, so if you want to use React the way they do at Facebook, this is not for you. Transpiled code for the three monad classes can be downloaded by entering "npm install reactive-monads". +* **[ReactCSS](http://reactcss.com/):** Inline Styles in JS with support for React. +* **[ReactQuestionnaire](https://github.com/kouryuu/react-questionnaire):** Simple react components for building a questionnaire or survey. +* **[renderjs.io](http://renderjs.io):** SEO for Reactjs. Service for making reactjs application crawlable and shareable. diff --git a/content/community/tools-model-mgmt.md b/content/community/tools-model-mgmt.md new file mode 100644 index 00000000..af0827ec --- /dev/null +++ b/content/community/tools-model-mgmt.md @@ -0,0 +1,20 @@ +--- +id: model-management +title: Model Management +layout: community +permalink: community/model-management.html +--- + +* **[Alt](http://alt.js.org/):** Pure vanilla flux made isomorphic and without the boilerplate. +* **[astarisx](http://zuudo.github.io/astarisx/):** Highly Composable MVVM Framework for React with built-in pushState router. +* **[avers](https://github.com/wereHamster/avers):** A modern client-side model abstraction library. +* **[backbone-react-component](https://github.com/magalhas/backbone-react-component):** Use multiple Backbone models and collections with React components both on the client and server sides. +* **[Baobab](https://github.com/Yomguithereal/baobab):** Persistent data tree supporting cursors. +* **[cortex](https://github.com/mquan/cortex/):** A JavaScript library for centrally managing data with React. +* **[DeLorean](https://github.com/deloreanjs/delorean):** A completely agnostic JavaScript framework to apply Flux concepts into your interfaces easily. +* **[Elsa](https://github.com/JonAbrams/elsa):** A Babel plugin that makes your arrays and objects immutable by default… and gives them super powers! +* **[Immutable](https://github.com/facebook/immutable-js):** Immutable data structures designed to be more JavaScript-y than Mori. +* **[js-data](http://www.js-data.io/):** A framework-agnostic frontend datastore, that will also fetch your data. +* **[McFly](https://github.com/kenwheeler/mcfly):** A lightweight Flux library that adds factories for Stores & Actions. +* **[NuclearJS](https://github.com/optimizely/nuclear-js):** Immutable, reactive Flux architecture. UI Agnostic. +* **[Reflux](https://github.com/spoike/refluxjs):** An event-based implementation of the Flux architecture that integrates with React components. diff --git a/content/community/tools-routing.md b/content/community/tools-routing.md new file mode 100644 index 00000000..74459a76 --- /dev/null +++ b/content/community/tools-routing.md @@ -0,0 +1,16 @@ +--- +id: routing +title: Routing +layout: community +permalink: community/routing.html +--- + +* **[Aviator](https://github.com/swipely/aviator)** - Aviator is a front-end router built for modular single page applications. ([Example](https://gist.github.com/hojberg/9549330)). +* **[Backbone](http://backbonejs.org/)** - Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. +* **[component-router](https://github.com/in-flux/component-router):** Flux-based routing solution for components + * **[Director](https://github.com/flatiron/director)** - A tiny and isomorphic URL router for JavaScript. + * **[Finch](http://stoodder.github.io/finchjs/)** - A simple, yet powerful, javascript route handling library. + * **[mvc-router](https://github.com/rajeev-k/mvc-router)** Use the Model-View-Controller (MVC) pattern to build React applications. + * **[react-mini-router](https://github.com/larrymyers/react-mini-router)** A minimal URL router mixin. + * **[react-router](https://github.com/rackt/react-router)** - A popular declarative router for React + * **[react-router-component](https://github.com/andreypopp/react-router-component)** Declarative routing. diff --git a/content/community/tools-starter-kits.md b/content/community/tools-starter-kits.md new file mode 100644 index 00000000..c7dfddb0 --- /dev/null +++ b/content/community/tools-starter-kits.md @@ -0,0 +1,80 @@ +--- +id: starter-kits +title: Starter Kits +layout: community +permalink: community/starter-kits.html +--- + +## Client-side Kits + +* **[React CDK](https://github.com/kadirahq/react-cdk)** - Component Development Kit for React +* **[React Static Boilerplate](https://github.com/koistya/react-static-boilerplate):** Static site generator based on React.js, Gulp/Webpack, React Hot Loader, Babel, postCSS/cssnext. Best suited for deploying React.js site to GitHub Pages or Amazon S3. +* **[React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate):** React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build workflow out of the box. ( React, Redux, Reselect, Redux Actions, ES6, ESLint, Webpack with integrated environment config support ) +* **[React, TypeScript, JSPM starter-kit](https://github.com/piotrwitek/react-ts-jspm-starter-kit):** Unopinionated starter kit to build modular web apps with React & TypeScript powered by JSPM/SystemJS 0.17.X (ES2016, hot-reload, browser-sync, bundle for prod scripts) +* **[Subschema](https://subschema.github.io/subschema)** - Subschema is a Dependency Injection Library for React, included is a project starter, with webpack, karma and babel. +* **[React + Redux + Saga Boilerplate](https://github.com/gilbarbara/react-redux-saga-boilerplate)** - +Ready to grow boilerplate with react-router, redux, saga, webpack 2, jest w/ coverage and enzyme. +* **[generator-enigma](https://www.npmjs.com/package/generator-enigma)** a minimalist React application scaffolding tool that sets up a ready-to-deploy web app, complete with testing via Jest and optional `react-router` boilerplate. +* **[Component-Template](https://github.com/reactstrap/component-template)** - A create-react-app based starter kit for building, documenting, & publishing React Components. Includes React Router v4, Bootstrap 4 and Reactstrap. + +## Full-stack Kits + +* **[react-universally](https://github.com/ctrlplusb/react-universally)** A starter kit for universal react applications with React, Express, React Router (v4), ES2017, Flow, Jest, Service workers, Data-fetching and code-splitting. + * **[web-service-template](https://github.com/nandai/web-service-template)** Membership single-page application with React and TypeScript. + * **[starter-react-flux](https://github.com/SokichiFujita/starter-react-flux)** A generator for React and Flux project with Flux-Utils, Jest, Immutable.js, React Addons, Webpack, ESLint, Babel and ES2015. + * **[react-slingshot](https://github.com/coryhouse/react-slingshot):** React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app. + * **[react-async-starter](https://github.com/didierfranc/react-async-starter):** React + Redux + Fetch + ES7 Async with Webpack, Babel and hot reloading. + * **[spa-starter-kit](https://github.com/vutran/spa-starter-kit):** Full stack Docker node.js container with React, webpack, babel, sass, ESLint, React Hot Loader, Redux for a single-page application. + * **[react-flux-starter-kit](https://github.com/coryhouse/react-flux-starter-kit):** React, Flux, React Router with Browserify, Bootstrap, and ESLint, all wired up via Gulp. Includes link to associated course. + * **[exnext-quickstart](https://github.com/nkbt/esnext-quickstart):** Compilation, testing, code validation (ESLint) and hot reloading + * **[react-component-template](https://github.com/nkbt/react-component-template):** Base for npm-publisheable standalone React Components with tests, ES6 coverage + * **[Base](https://github.com/adeperio/base):** An open-source, security focused, web application starter kit. +Built with ReactJS, Flux, Express, and Postgres. + * **[Este](https://github.com/este/este):** Dev stack and starter kit for functional and universal (browser, server, mobile) React applications. Everything you need to start is included. + * **[essential-react](https://github.com/pheuter/essential-react):** A minimal skeleton for building testable React apps using ES6 + * **[jspm-react](https://github.com/capaj/jspm-react):** Lightweight boilerplate on JSPM/Systemjs with hot-reloading modules for the browser + * **[react-flux-coffeescript-browserify-gulp-demo](https://github.com/dqdinh/react-flux-coffeescript-browserify-gulp-demo):** React, Flux, Coffeescript, Browserify, Watchify, Gulp + * **[react-reflux-boilerplate-with-webpack](https://github.com/iroy2000/react-reflux-boilerplate-with-webpack):** React Reflux Workflow Boilerplate -- React, Reflux, Gulp, Webpack, Stylus and CoffeeScript. + * **[kontraktor-intrinsic-jsx](https://github.com/RuedigerMoeller/InstrinsicReactJSX):** Native Java-implementation of JSX Transpiler + Bundler + Server (no nashorn or node/babel required) + * **[React-Phonegap App](https://github.com/kjda/ReactJs-Phonegap):** Phonegap App built with react using Flux. + * **[Kriasoft React Starter Kit](https://github.com/kriasoft/react-starter-kit):** Gulp, Webpack, BrowserSync + [React Starter Kit for Visual Studio](http://visualstudiogallery.msdn.microsoft.com/d65d6b29-6dd7-4100-81b1-609e5afce356) + * **[react-express-template](https://github.com/khaled/react-express-template):** Web app starter template with React, React Router, ES6 (via Babel), CoffeeScript, Express/Node.js, Semantic-UI, Gulp, LiveReload, and more + * **[generator-react-webpack](https://github.com/newtriks/generator-react-webpack):** [Yeoman](http://yeoman.io/) generator for React and Webpack. + * **[generator-react-express](https://github.com/JedWatson/generator-react-express):** [Yeoman](http://yeoman.io/) generator for React and Express with browserify, react-router and bootstrap. + * **[generator-react-component](https://github.com/JedWatson/generator-react-component):** [Yeoman](http://yeoman.io/) generator React Component projects with Gulp, Browserify, Live Reload and publishing to GitHub Pages. + * **[Racket](https://github.com/mohebifar/racket):** [Yeoman](http://yeoman.io/) generator for creating a universal React Redux web application. + * **[Genesis Skeleton](http://genesis-skeleton.com/):** Modern, opinionated, full-stack starter kit for rapid, streamlined application development (supports React). + * **[react-starter-template](https://github.com/johnthethird/react-starter-template):** Starter template with Gulp, Webpack and Bootstrap. + * **[react-brunch](https://npmjs.org/package/react-brunch):** [Brunch](http://brunch.io/) plugin. + * **[react-browserify-template](https://github.com/petehunt/react-browserify-template):** Quick-start with Browserify. + * **[react-router-bootstrap-seed](https://github.com/okigan/react-router-bootstrap-seed):** Starter template with react-router, react-bootstrap and react-bootstrap-router (build with Gulp). + * **[React Phonegap Starter](https://github.com/stample/gulp-browserify-react-phonegap-starter)**: +Gulp, NPM, Browserify, React, Phonegap, Less, Recess, Underscore, JQuery... + * **[generator-react-gulp-browserify](https://github.com/randylien/generator-react-gulp-browserify)** [Yeoman](http://yeoman.io/) generator for React, Gulp, Browserify and Twitter Bootstrap Sass official. + * **[generator-react-boilerplate](https://github.com/mitchbox/generator-react-boilerplate)** [Yeoman](http://yeoman.io/) generator for React, Gulp, Browserify, Bootstrap and Fluxxor. + * **[react-starterify](https://github.com/Granze/react-starterify):** React JS application skeleton using Browserify and other awesome tools + * **[fluxury](https://github.com/jim-y/fluxury):** A React/Flux starter kit with NPM (build tool), Browserify, ImmutableJS, JSXHint and React-Router completely written in ES6 (Babelify transform). + * **[react-app-boilerplate](https://github.com/christianalfoni/react-app-boilerplate):** Browserify workflow with automatic JSX transformation, dependency handling for fast builds and jasmine test environment. + * **[nuts](https://github.com/micahlmartin/nuts):** A fully-featured starter kit that uses webpack, react, flux, backbone, mongo, and kue. Includes server-side and client-side rendering. + * **[generator-rc](https://github.com/react-component/generator-rc):** A scaffold to develop react component quickly. + * **[MimosaReactBackbone](https://github.com/dbashford/MimosaReactBackboneTodoList):** A TodoMVC React/Backbone app w/ Mimosa for tooling. + * **[TodoMVC - NestedReact](https://github.com/gaperton/todomvc-nestedreact):** TodoMVC React app built with [NestedTypes](https://github.com/Volicon/NestedTypes) and [NestedReact](https://github.com/Volicon/NestedReact). + * **[react-boilerplate](https://github.com/AbeEstrada/react-boilerplate):** It is a basic React project boilerplate, it uses JSX, React Router, Browserify, Reactify (ES6) and SASS. + * **[koa-react-full-example](https://github.com/dozoisch/koa-react-full-example)** Boilerplate of a Koa React integration. Also shows a way to integrate koa-passport, react-router and react-bootstrap and a few other common modules. Includes an authentication flow. + * **[generator-simple-react-browserify](https://github.com/luisrudge/generator-simple-react-browserify)** Really simple React + Browserify app generator for yeoman. Start here if you're trying to actually learn something. + * **[react-starterkit-with-reflux](https://github.com/maisnamraju/react-starterkit)** It's a fork of [react-starterkit](https://github.com/wbkd/react-starterkit) with React, Reflux, ES6 with Babel, Fontawesome, SASS, Bootstrap SASS(not react-bootstrap), and Browserify. + * **[react-jspm](https://github.com/chenxsan/react-jspm)** Boilerplate for developing React with jspm and SystemJS module loader. + * **[electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate)** A React + Flux Electron application boilerplate based on React, Flux, React Router, Webpack, React Hot Loader + * **[Coils](https://github.com/zubairq/coils):** React/SQL full stack realtime framework in Clojure + * **[isomorphic-flux-react-react-router](https://github.com/jahrlin/isomorphic-flux-react-react-router):** A clean, unbloated starter template without any unnecessary complexity for isomorphic web apps using React, Flux, react-router. Uses gulp and webpack for builds, jest for testing and SASS for CSS preprocessing. + * **[generator-sui-react](https://github.com/SUI-Components/generator-sui-react):** A [Yeoman](http://yeoman.io/) generator for Schibsted User Interface (sui) ReactJS components. The generator provides a basic structure to start developing a component, including coding standard rules, naming conventions and a unit testing suite. + * **[Universal-routed-flux-demo](https://github.com/pierreavizou/universal-routed-flux-demo)** Example app to get started building universal flux applications, with Reactjs, React Router and es6. + * **[react-starter](https://github.com/aliakakis/react-starter/)** React starter project with ES2015, Browserify, Babel, mobservable. + * **[react-flux-flow-webpack-jest-es6](https://github.com/msalia/react-flux-flow-webpack-jest-es6)** A complete React, Flux, Flow, Webpack, Jest and ES6 starter kit. + * **[react-boilerplate](https://github.com/mxstbr/react-boilerplate)** Quick setup for performance orientated, offline-first React.js applications featuring Redux, hot-reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha. + * **[vortigern](https://github.com/barbar/vortigern)** A universal boilerplate for building web applications w/ TypeScript, React, Redux and more. + * **[react-redux-starter-kit](https://github.com/davezuko/react-redux-starter-kit):** Terrific universal Redux + React Router starter kit with Babel, SASS, hot reloading, testing, linting. Unopinionated as possible. + * **[prax](https://github.com/mitranim/prax):** Sane functional programming style architecture for realtime apps, with single immutable state, event system, reactive views, support development through pure functions. + * **[react-redux-universal-boilerplate](https://github.com/kiki-le-singe/react-redux-universal-boilerplate):** +An Universal ReactJS/Redux Boilerplate with Babel, Webpack 2, Webpack backend bundling, React Hot Loader 3, sass or cssnext, testing, linting... + * **[FUJITSU K5 Playground](https://playground.cloud.global.fujitsu.com)** A SPA and BFF generator with React, Flux, Swagger, Node.js, Material-ui, Jest, Webpack, ESLint and Babel. diff --git a/content/community/tools-testing.md b/content/community/tools-testing.md new file mode 100644 index 00000000..0ce52104 --- /dev/null +++ b/content/community/tools-testing.md @@ -0,0 +1,13 @@ +--- +id: testing +title: Testing +layout: community +permalink: community/testing.html +--- + +* **[Enzyme](https://github.com/airbnb/enzyme/):** a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output. +* **[Expect-jsx](https://github.com/algolia/expect-jsx):** toEqualJSX for [expect.js](https://github.com/mjackson/expect) +* **[Jest](https://facebook.github.io/jest/):** Delightful JavaScript testing used by Facebook to test all JavaScript code including React applications. +* **[React-unit](https://github.com/pzavolinsky/react-unit):** a lightweight unit test library for ReactJS with very few (js-only) dependencies. +* **[Skin-deep](https://github.com/glenjamin/skin-deep):** Testing helpers for use with React's shallowRender test utils. +* **[Unexpected-react](https://github.com/bruderstein/unexpected-react/):** Plugin for the [unexpected](http://unexpected.js.org) assertion library that makes it easy to assert over your React Components and trigger events. diff --git a/content/community/tools-ui-components.md b/content/community/tools-ui-components.md new file mode 100644 index 00000000..d2cf6599 --- /dev/null +++ b/content/community/tools-ui-components.md @@ -0,0 +1,76 @@ +--- +id: ui-components +title: UI Componets +layout: community +permalink: community/ui-components.html +--- + +## Free Components +* **[Amaze UI React](https://github.com/amazeui/amazeui-react) (in Chinese):** [Amaze UI](https://github.com/allmobilize/amazeui) components built with React. +* **[Ant Design of React](http://github.com/ant-design/ant-design)** An enterprise-class UI design language and React-based implementation. +* **[Belle](https://github.com/nikgraf/belle/):** Configurable React Components with great UX. +* **[chartify](https://github.com/kirillstepkin/chartify)**: Ultra lightweight and customizable React.js chart component. +* **[Elemental UI](http://elemental-ui.com):** A UI toolkit for React websites and apps, themeable and composed of individually packaged components +* **[Grommet](http://grommet.io)** The most advanced open source UX framework for enterprise applications. +* **[Halogen](http://madscript.com/halogen):** A collection of highly customizable loading spinner animations with React. +* **[Khan Academy's component library](http://khan.github.io/react-components/)** +* **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)**: compiles markdown into safe React JSX without using dangerous escape hatches. +* **[material-ui](http://material-ui.com)** A set of React Components that implement Google's Material Design. +* **[Onsen UI React Components](https://onsen.io/v2/react.html):** UI components for hybrid mobile apps with both Material Design for Android and flat design for iOS. +* **[React Amazing Grid](https://github.com/Amazing-Space-Invader/react-amazing-grid)** Flex grid with inline styles. +* **[React Mdl](https://github.com/tleunen/react-mdl)** React Components for Material Design Lite. +* **[React Web](https://github.com/taobaofed/react-web)** A framework for building web apps with React. +* **[react-amiga-guru-meditation](https://github.com/gfazioli/react-amiga-guru-meditation):** React JS Class to display a Amiga Guru Meditation Tribute +* **[react-autosuggest](https://github.com/moroshko/react-autosuggest)** WAI-ARIA compliant React autosuggest component +* **[react-bootstrap](https://github.com/stevoland/react-bootstrap):** Bootstrap 3 components built with React. +* **[react-bootstrap-dialog](https://github.com/akiroom/react-bootstrap-dialog):** React Dialog component for react-bootstrap, instead of `window.alert` or `window.confirm` +* **[react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table):** It's a react table for Bootstrap. +* **[react-component](https://github.com/react-component/):** A collection of react components maintained by Alibaba/Alipay employee. +* **[react-data-menu](https://github.com/dkozar/react-data-menu):** Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other components or screen edges. +* **[react-date-picker](https://github.com/Hacker0x01/react-datepicker):** A simple and reusable datepicker component for React. +* **[react-dates](https://github.com/OpusCapita/react-dates):** Date-inputs + date-picker +* **[react-dnd](https://github.com/gaearon/react-dnd)** Flexible HTML5 drag-and-drop mixin for React with full DOM control +* **[react-document-title](https://github.com/gaearon/react-document-title)** Declarative, nested, stateful, isomorphic document.title for React +* **[react-dropzone](https://github.com/felixrieseberg/React-Dropzone):** React Dropzone for File-Uploads +* **[react-forms](http://prometheusresearch.github.io/react-forms/):** Form rendering and validation for React +* +* **[react-highlight](https://github.com/akiran/react-highlight):** React component for syntax highlighting +* **[react-image](https://github.com/yuanyan/react-image):** Like `` and Enhanced Image Component for React. +* **[react-input-autosize](https://github.com/JedWatson/react-input-autosize):** Like `` but resizes automatically to fit all its content. +* **[react-intense](https://github.com/brycedorn/react-intense):** A component for viewing large images up close +* **[react-joyride](https://github.com/gilbarbara/react-joyride):** Create walkthroughs and guided tours for your ReactJS apps. +* **[react-ladda](https://github.com/jsdir/react-ladda):** React wrapper for Ladda buttons. +* **[react-lorem-component](https://github.com/martinandert/react-lorem-component):** Lorem Ipsum placeholder component. +* **[react-notification](https://github.com/pburtchaell/react-notification):** Snackbar style notifications +* +* **[react-select](https://github.com/JedWatson/react-select):** Native React Select / Multiselect input field, similar to Selectize / Chosen / Select2 +* **[react-selectize](https://furqanzafar.github.io/react-selectize/):** A stateless & flexible Select component, designed as a drop in replacement for React.DOM.Select, inspired by Selectize +* **[react-sigma](https://www.npmjs.com/package/react-sigma)**: Lightweight but powerful library for drawing network graphs +* **[react-slick](https://github.com/akiran/react-slick):** Carousel component built with React +* **[react-sparklines](https://borisyankov.github.io/react-sparklines/):** Beautiful and expressive sparklines component +* **[react-spreadsheet](https://github.com/felixrieseberg/React-Spreadsheet-Component):** React Spreadsheets / Editable tables with Excel-Style keyboard input and navigation +* **[react-switch-button](https://github.com/gfazioli/react-switch-button):** Beautiful React Switch button component +* **[react-tappable](https://github.com/JedWatson/react-tappable)** A Tappable React Component that provides native-feeling onTap events for mobile React apps +* **[react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize):** Like `