diff --git a/.babelrc b/.babelrc old mode 100644 new mode 100755 diff --git a/.circleci/config.yml b/.circleci/config.yml old mode 100644 new mode 100755 diff --git a/.eslintignore b/.eslintignore old mode 100644 new mode 100755 diff --git a/.eslintrc b/.eslintrc old mode 100644 new mode 100755 diff --git a/.flowconfig b/.flowconfig old mode 100644 new mode 100755 diff --git a/.gitattributes b/.gitattributes old mode 100644 new mode 100755 diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md old mode 100644 new mode 100755 diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 diff --git a/.nvmrc b/.nvmrc old mode 100644 new mode 100755 diff --git a/.prettierrc b/.prettierrc old mode 100644 new mode 100755 diff --git a/.scripts/gatsby-deploy.sh b/.scripts/gatsby-deploy.sh index 6a349818f3..1c6c070c3b 100644 --- a/.scripts/gatsby-deploy.sh +++ b/.scripts/gatsby-deploy.sh @@ -4,10 +4,6 @@ cd ~/project cp -r public/ ../public git config --global user.email "$GH_EMAIL"> /dev/null 2>&1 git config --global user.name "$GH_NAME"> /dev/null 2>&1 - -git add -A -git commit -m "from circleci" - git checkout gh-pages rm -rf * cp -r ../public/* ./ diff --git a/README.md b/README.md index bc31db6083..dfeca8fb48 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,18 @@ -# React 中文文档翻译计划 +# React 中文文档翻译计划 ![CircleCI](https://circleci.com/gh/discountry/react.svg?&style=shield&circle-token=4fc9b6b97cb8d5d19ad88cdd40ba8d5f1ccdd2b0) ## Notice > This is not the official react repository. We've been working on translating the official react docs in Chinese. Because of the modification of original docs markdown files, this branch can not be merged to the [reactjs/reactjs.org](https://github.com/reactjs/reactjs.org) . -React 官方中文文档将基于此项目内容继续维护,请贡献者移步 [https://github.com/reactjs/zh-hans.reactjs.org](https://github.com/reactjs/zh-hans.reactjs.org) 参与翻译工作。 - -## 临时说明 - -本文档与 React 官方文档保持同步,请认准页脚**印记中文**的标识。不要被网络上一些盗用的过期文档误导。 - -**官网地址:**[https://react.docschina.org/](https://react.docschina.org/) - -如果你遇到网络问题,请移步: - -**备份网址:**[http://react.yubolun.com/](http://react.yubolun.com/) - ## 如何贡献 -目前还有个别文档内容待翻译,已翻译部分可能仍有少许字词错误或语句不通顺的地方,欢迎有能力的同学帮助纠正。 +目前文档的主要内容全部已翻译完成,可能仍有少许字词错误或语句不通顺的地方,欢迎有能力的同学帮助纠正。 ![check](https://github.com/discountry/react/raw/master/static/check.png) **本地构建** -请查阅官方 [README](https://github.com/discountry/react/blob/master/README_en.md)。 +请查阅官方 [README](https://github.com/discountry/react/blob/master/README_en.md). **翻译文档** @@ -34,6 +22,10 @@ React 官方中文文档将基于此项目内容继续维护,请贡献者移 React@16 的新版文档网站使用了 [Gatsby](https://github.com/gatsbyjs/gatsby) 静态站点生成器,站点对应文件均在 [`/src`](https://github.com/discountry/react/tree/master/src) 文件夹下,如果有对网站模板/样式/配置的改动,请直接编辑该目录下文件并提交 pr 即可。 +**为 React 官方贡献翻译** + +React 官网会在将来支持多语言功能,目前官方已经发起了翻译项目,你可以在 [React on Crowdin](https://crowdin.com/project/react) 贡献翻译。 + ## Contributors 感谢所有[参与翻译的同学](https://github.com/discountry/react/graphs/contributors)。是大家的开源精神和辛勤工作让文档的翻译得以如此顺利迅速进行。 diff --git a/README_en.md b/README_en.md old mode 100644 new mode 100755 diff --git a/content/404.md b/content/404.md old mode 100644 new mode 100755 diff --git a/content/acknowledgements.yml b/content/acknowledgements.yml old mode 100644 new mode 100755 diff --git a/content/authors.yml b/content/authors.yml old mode 100644 new mode 100755 index 3defa4f500..5fd72964ed --- a/content/authors.yml +++ b/content/authors.yml @@ -18,7 +18,7 @@ clemmy: url: https://twitter.com/c8hoang Daniel15: name: Daniel Lo Nigro - url: https://d.sb/ + url: http://dan.cx/ fisherwebdev: name: Bill Fisher url: https://twitter.com/fisherwebdev @@ -69,13 +69,10 @@ sebmarkbage: url: https://twitter.com/sebmarkbage sophiebits: name: Sophie Alpert - url: https://sophiebits.com/ + url: https://sophiealpert.com steveluscher: name: Steven Luscher url: https://twitter.com/steveluscher -timer: - name: Joe Haddad - url: https://twitter.com/timer150 vjeux: name: Vjeux url: https://twitter.com/vjeux @@ -85,6 +82,3 @@ wincent: zpao: name: Paul O’Shannessy url: https://twitter.com/zpao -tomocchino: - name: Tom Occhino - url: https://twitter.com/tomocchino diff --git a/content/blog/2013-06-02-jsfiddle-integration.md b/content/blog/2013-06-02-jsfiddle-integration.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-06-05-why-react.md b/content/blog/2013-06-05-why-react.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-06-12-community-roundup.md b/content/blog/2013-06-12-community-roundup.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-06-19-community-roundup-2.md b/content/blog/2013-06-19-community-roundup-2.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-06-21-react-v0-3-3.md b/content/blog/2013-06-21-react-v0-3-3.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-06-27-community-roundup-3.md b/content/blog/2013-06-27-community-roundup-3.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-07-02-react-v0-4-autobind-by-default.md b/content/blog/2013-07-02-react-v0-4-autobind-by-default.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-07-03-community-roundup-4.md b/content/blog/2013-07-03-community-roundup-4.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-07-11-react-v0-4-prop-validation-and-default-values.md b/content/blog/2013-07-11-react-v0-4-prop-validation-and-default-values.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-07-17-react-v0-4-0.md b/content/blog/2013-07-17-react-v0-4-0.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-07-23-community-roundup-5.md b/content/blog/2013-07-23-community-roundup-5.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-07-26-react-v0-4-1.md b/content/blog/2013-07-26-react-v0-4-1.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md b/content/blog/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-08-05-community-roundup-6.md b/content/blog/2013-08-05-community-roundup-6.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md b/content/blog/2013-08-19-use-react-and-jsx-in-python-applications.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-08-26-community-roundup-7.md b/content/blog/2013-08-26-community-roundup-7.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-09-24-community-roundup-8.md b/content/blog/2013-09-24-community-roundup-8.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-10-16-react-v0.5.0.md b/content/blog/2013-10-16-react-v0.5.0.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-10-29-react-v0-5-1.md b/content/blog/2013-10-29-react-v0-5-1.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-10-3-community-roundup-9.md b/content/blog/2013-10-3-community-roundup-9.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-11-06-community-roundup-10.md b/content/blog/2013-11-06-community-roundup-10.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-11-18-community-roundup-11.md b/content/blog/2013-11-18-community-roundup-11.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-12-18-react-v0.5.2-v0.4.2.md b/content/blog/2013-12-18-react-v0.5.2-v0.4.2.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-12-19-react-v0.8.0.md b/content/blog/2013-12-19-react-v0.8.0.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-12-23-community-roundup-12.md b/content/blog/2013-12-23-community-roundup-12.md old mode 100644 new mode 100755 diff --git a/content/blog/2013-12-30-community-roundup-13.md b/content/blog/2013-12-30-community-roundup-13.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-01-02-react-chrome-developer-tools.md b/content/blog/2014-01-02-react-chrome-developer-tools.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-01-06-community-roundup-14.md b/content/blog/2014-01-06-community-roundup-14.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-02-05-community-roundup-15.md b/content/blog/2014-02-05-community-roundup-15.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-02-15-community-roundup-16.md b/content/blog/2014-02-15-community-roundup-16.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-02-16-react-v0.9-rc1.md b/content/blog/2014-02-16-react-v0.9-rc1.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-02-20-react-v0.9.md b/content/blog/2014-02-20-react-v0.9.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-02-24-community-roundup-17.md b/content/blog/2014-02-24-community-roundup-17.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-03-14-community-roundup-18.md b/content/blog/2014-03-14-community-roundup-18.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-03-19-react-v0.10-rc1.md b/content/blog/2014-03-19-react-v0.10-rc1.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-03-21-react-v0.10.md b/content/blog/2014-03-21-react-v0.10.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-03-28-the-road-to-1.0.md b/content/blog/2014-03-28-the-road-to-1.0.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-04-04-reactnet.md b/content/blog/2014-04-04-reactnet.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-05-06-flux.md b/content/blog/2014-05-06-flux.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-05-29-one-year-of-open-source-react.md b/content/blog/2014-05-29-one-year-of-open-source-react.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-06-27-community-roundup-19.md b/content/blog/2014-06-27-community-roundup-19.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-07-13-react-v0.11-rc1.md b/content/blog/2014-07-13-react-v0.11-rc1.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-07-17-react-v0.11.md b/content/blog/2014-07-17-react-v0.11.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-07-25-react-v0.11.1.md b/content/blog/2014-07-25-react-v0.11.1.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-07-28-community-roundup-20.md b/content/blog/2014-07-28-community-roundup-20.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md b/content/blog/2014-07-30-flux-actions-and-the-dispatcher.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-08-03-community-roundup-21.md b/content/blog/2014-08-03-community-roundup-21.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-09-03-introducing-the-jsx-specification.md b/content/blog/2014-09-03-introducing-the-jsx-specification.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-09-12-community-round-up-22.md b/content/blog/2014-09-12-community-round-up-22.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-09-16-react-v0.11.2.md b/content/blog/2014-09-16-react-v0.11.2.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-09-24-testing-flux-applications.md b/content/blog/2014-09-24-testing-flux-applications.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-10-14-introducing-react-elements.md b/content/blog/2014-10-14-introducing-react-elements.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-10-16-react-v0.12-rc1.md b/content/blog/2014-10-16-react-v0.12-rc1.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-10-17-community-roundup-23.md b/content/blog/2014-10-17-community-roundup-23.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-10-27-react-js-conf.md b/content/blog/2014-10-27-react-js-conf.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-10-28-react-v0.12.md b/content/blog/2014-10-28-react-v0.12.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-11-24-react-js-conf-updates.md b/content/blog/2014-11-24-react-js-conf-updates.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-11-25-community-roundup-24.md b/content/blog/2014-11-25-community-roundup-24.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-12-18-react-v0.12.2.md b/content/blog/2014-12-18-react-v0.12.2.md old mode 100644 new mode 100755 diff --git a/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md b/content/blog/2014-12-19-react-js-conf-diversity-scholarship.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-01-27-react-v0.13.0-beta-1.md b/content/blog/2015-01-27-react-v0.13.0-beta-1.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-02-18-react-conf-roundup-2015.md b/content/blog/2015-02-18-react-conf-roundup-2015.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-02-20-introducing-relay-and-graphql.md b/content/blog/2015-02-20-introducing-relay-and-graphql.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-02-24-react-v0.13-rc1.md b/content/blog/2015-02-24-react-v0.13-rc1.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-02-24-streamlining-react-elements.md b/content/blog/2015-02-24-streamlining-react-elements.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-03-03-react-v0.13-rc2.md b/content/blog/2015-03-03-react-v0.13-rc2.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-03-04-community-roundup-25.md b/content/blog/2015-03-04-community-roundup-25.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-03-10-react-v0.13.md b/content/blog/2015-03-10-react-v0.13.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-03-16-react-v0.13.1.md b/content/blog/2015-03-16-react-v0.13.1.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-03-19-building-the-facebook-news-feed-with-relay.md b/content/blog/2015-03-19-building-the-facebook-news-feed-with-relay.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-03-26-introducing-react-native.md b/content/blog/2015-03-26-introducing-react-native.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-04-17-react-native-v0.4.md b/content/blog/2015-04-17-react-native-v0.4.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-04-18-react-v0.13.2.md b/content/blog/2015-04-18-react-v0.13.2.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-05-01-graphql-introduction.md b/content/blog/2015-05-01-graphql-introduction.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-05-08-react-v0.13.3.md b/content/blog/2015-05-08-react-v0.13.3.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-05-22-react-native-release-process.md b/content/blog/2015-05-22-react-native-release-process.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-06-12-deprecating-jstransform-and-react-tools.md b/content/blog/2015-06-12-deprecating-jstransform-and-react-tools.md old mode 100644 new mode 100755 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 old mode 100644 new mode 100755 diff --git a/content/blog/2015-08-03-new-react-devtools-beta.md b/content/blog/2015-08-03-new-react-devtools-beta.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-08-11-relay-technical-preview.md b/content/blog/2015-08-11-relay-technical-preview.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-08-13-reacteurope-roundup.md b/content/blog/2015-08-13-reacteurope-roundup.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-09-02-new-react-developer-tools.md b/content/blog/2015-09-02-new-react-developer-tools.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-09-10-react-v0.14-rc1.md b/content/blog/2015-09-10-react-v0.14-rc1.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-09-14-community-roundup-27.md b/content/blog/2015-09-14-community-roundup-27.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-10-01-react-render-and-top-level-api.md b/content/blog/2015-10-01-react-render-and-top-level-api.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-10-07-react-v0.14.md b/content/blog/2015-10-07-react-v0.14.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-10-19-reactiflux-is-moving-to-discord.md b/content/blog/2015-10-19-reactiflux-is-moving-to-discord.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-10-28-react-v0.14.1.md b/content/blog/2015-10-28-react-v0.14.1.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-11-02-react-v0.14.2.md b/content/blog/2015-11-02-react-v0.14.2.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-11-18-react-v0.14.3.md b/content/blog/2015-11-18-react-v0.14.3.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-12-04-react-js-conf-2016-diversity-scholarship.md b/content/blog/2015-12-04-react-js-conf-2016-diversity-scholarship.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-12-16-ismounted-antipattern.md b/content/blog/2015-12-16-ismounted-antipattern.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-12-18-react-components-elements-and-instances.md b/content/blog/2015-12-18-react-components-elements-and-instances.md old mode 100644 new mode 100755 diff --git a/content/blog/2015-12-29-react-v0.14.4.md b/content/blog/2015-12-29-react-v0.14.4.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-01-08-A-implies-B-does-not-imply-B-implies-A.md b/content/blog/2016-01-08-A-implies-B-does-not-imply-B-implies-A.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-01-12-discontinuing-ie8-support.md b/content/blog/2016-01-12-discontinuing-ie8-support.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-02-19-new-versioning-scheme.md b/content/blog/2016-02-19-new-versioning-scheme.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-03-07-react-v15-rc1.md b/content/blog/2016-03-07-react-v15-rc1.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-03-16-react-v15-rc2.md b/content/blog/2016-03-16-react-v15-rc2.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-03-29-react-v0.14.8.md b/content/blog/2016-03-29-react-v0.14.8.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-04-07-react-v15.md b/content/blog/2016-04-07-react-v15.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-04-08-react-v15.0.1.md b/content/blog/2016-04-08-react-v15.0.1.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-07-11-introducing-reacts-error-code-system.md b/content/blog/2016-07-11-introducing-reacts-error-code-system.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-07-13-mixins-considered-harmful.md b/content/blog/2016-07-13-mixins-considered-harmful.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-07-22-create-apps-with-no-configuration.md b/content/blog/2016-07-22-create-apps-with-no-configuration.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-08-05-relay-state-of-the-state.md b/content/blog/2016-08-05-relay-state-of-the-state.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-09-28-our-first-50000-stars.md b/content/blog/2016-09-28-our-first-50000-stars.md old mode 100644 new mode 100755 diff --git a/content/blog/2016-11-16-react-v15.4.0.md b/content/blog/2016-11-16-react-v15.4.0.md old mode 100644 new mode 100755 diff --git a/content/blog/2017-04-07-react-v15.5.0.md b/content/blog/2017-04-07-react-v15.5.0.md old mode 100644 new mode 100755 index 943e1b572c..f901fadae6 --- a/content/blog/2017-04-07-react-v15.5.0.md +++ b/content/blog/2017-04-07-react-v15.5.0.md @@ -7,7 +7,7 @@ author: [acdlite] 最后,我们发布了React 15.5.0。 -### 新的弃用警告 {#new-deprecation-warnings} +### 新的弃用警告 最大的改变是我们将`React.PropTypes`和`React.createClass` 移到他们的自己的包。二者仍然可以通过主要的`React`独享访问,但是在开发模式下,使用其中的一个将在控制台上打印一个过时的弃用警告。这将会让之后代码大小有所优化。 @@ -19,7 +19,7 @@ author: [acdlite] 关于每一项新的弃用,我们已经提供了一份代码修改(codemod)以自动迁移你的代码。它们已可以利用来作为 [react-codemod](https://github.com/reactjs/react-codemod)项目的部分。 -### 从 React.PropTypes 迁移 {#migrating-from-reactproptypes} +### 从React.PropTypes迁移 属性类型是用于在开发期间对属性进行运行时校验的一项特性。我们已将内建的属性类型提取到一个独立的包中以反映是否并非每个人都会使用的事实。 @@ -64,7 +64,7 @@ jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js 你也可能考虑使用 [Flow](https://flow.org/)来静态地检查你的JavaScript代码类型,包括[React 组件](https://flow.org/en/docs/frameworks/react/#setup-flow-with-react-a-classtoc-idtoc-setup-flow-with-react-hreftoc-setup-flow-with-reacta). -### 从 React.crateClass 迁移 {#migrating-from-reactcreateclass} +### 从React.crateClass迁移 当React首次发布时,在JavaScript中并没有通用的方式创建类,因此我们提供我们一个自定义方法:`React.createClass`。 @@ -105,7 +105,7 @@ var Component = createReactClass({ jscodeshift -t react-codemod/transforms/class.js path/to/components ``` -### 不再支持的 React 附件 {#discontinuing-support-for-react-addons} +### 不再支持的React附件 我们将停止维护React附件包。真实地,大多数包已经有很长时间没有维护了。它们仍将持续继续工作,但我们建议尽快迁移以防止将来的破坏。 @@ -120,7 +120,7 @@ jscodeshift -t react-codemod/transforms/class.js path/to/components 我们也放弃对于`react-with-addons`UMD构建的支持。其将在React 16中被移除。 -### React 测试套件 {#react-test-utils} +### React测试套件 当前,React 测试套件位于`react-addons-test-utils`内。在15.5中,我们将其从包中独立出去,并将它们迁移至`react-dom/test-utils`: @@ -146,7 +146,7 @@ import { createRenderer } from 'react-test-renderer/shallow'; --- -## 感谢 {#acknowledgements} +## 感谢 特别感谢这些人转让npm包名称的所有权: @@ -156,7 +156,7 @@ import { createRenderer } from 'react-test-renderer/shallow'; --- -## 安装 {#installation} +## 安装 我们推荐使用[Yarn](https://yarnpkg.com/)或[npm](https://www.npmjs.com/)来管理前端依赖。若你是初次接触包管理器,[Yarn documentation](https://yarnpkg.com/en/docs/getting-started)是一个不错的起点。 @@ -195,11 +195,11 @@ npm install --save react@^15.5.0 react-dom@^15.5.0 --- -## 修改日志 {#changelog} +## 修改日志 -## 15.5.0 (April 7, 2017) {#1550-april-7-2017} +## 15.5.0 (April 7, 2017) -### React {#react} +### React * 为`React.createClass`增加一个独立的警告。将用户指向create-react-class。([@acdlite](https://github.com/acdlite) 在 [d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e)的提交) * 为`React.PropTypes`增加一个独立的警告。将用户指向prop-types。([@acdlite](https://github.com/acdlite) 在 [043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28)的提交) @@ -208,17 +208,17 @@ npm install --save react@^15.5.0 react-dom@^15.5.0 * 另一个关于Closure Compiler的修复。([@Shastel](https://github.com/Shastel) 在 [#8882](https://github.com/facebook/react/pull/8882)提的PR) * 为无效的元素类型警告增加组件栈信息。([@n3tr](https://github.com/n3tr) 在 [#8495](https://github.com/facebook/react/pull/8495)提的PR) -### React DOM {#react-dom} +### React DOM * 修正当在数字输入中回退时的Chrome bug。([@nhunzaker](https://github.com/nhunzaker) 在 [#7359](https://github.com/facebook/react/pull/7359)提的PR) * 增加`react-dom/test-utils`,暴露React测试套件。([@bvaughn](https://github.com/bvaughn)) -### React Test Renderer {#react-test-renderer} +### React Test Renderer * 修复子组件不会调用`componentWillUnmount`。([@gre](https://github.com/gre) 在 [#8512](https://github.com/facebook/react/pull/8512]提的PR) * 增加 `react-test-renderer/shallow`,暴露浅渲染器。 -### React Addons {#react-addons} +### React Addons * 最后一次发布附件;他们将不再被维护 * 移除`peerDependencies`以让附件能够无限期继续工作。([@acdlite](https://github.com/acdlite) 和 [@bvaughn](https://github.com/bvaughn) 在 [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) 和 [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a)的提交) diff --git a/content/blog/2017-05-18-whats-new-in-create-react-app.md b/content/blog/2017-05-18-whats-new-in-create-react-app.md old mode 100644 new mode 100755 index bbbd39a4e2..c3e7971392 --- a/content/blog/2017-05-18-whats-new-in-create-react-app.md +++ b/content/blog/2017-05-18-whats-new-in-create-react-app.md @@ -3,104 +3,105 @@ title: "What's New in Create React App" author: [gaearon] --- -在不到一年前,我们介绍了 [Create React App](/blog/2016/07/22/create-apps-with-no-configuration.html) 作为一种官方支持的零配置方法来构建应用。此后,该项目取得了巨大的进展,250多名参与者提交了950多次提交。 +Less than a year ago, we introduced [Create React App](/blog/2016/07/22/create-apps-with-no-configuration.html) as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors. -今天,我们很兴奋地宣布,过去几个月中在进展中的许多新功能最终发布了。 +Today, we are excited to announce that many features that have been in the pipeline for the last few months are finally released. -像过去一样, 通过 `Create React App`,**你可以通过更新单个依赖项来在现有应用程序中享受这些改进只要你的项目并没有执行弹出操作,** 请参考我们的 [迁移说明](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0)。、 +As usual with Create React App, **you can enjoy these improvements in your existing non-ejected apps by updating a single dependency** and following our [migration instructions](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0). -新创建的项目会自动获得这些新的功能改进。 +Newly created apps will get these improvements automatically. -### webpack 2 {#webpack-2} +### webpack 2 ->*这个功能开发者是[@Timer](https://github.com/Timer) 在 [#1291](https://github.com/facebookincubator/create-react-app/pull/1291).* +>*This change was contributed by [@Timer](https://github.com/Timer) in [#1291](https://github.com/facebookincubator/create-react-app/pull/1291).* -我们已经升级到了几个月前[正式发布](https://medium.com/webpack/webpack-2-and-beyond-40520af9067f)的 `webpack2`。这对许多 bug 修复和整体改进都是一个巨大的升级。我们已经对它进行了一段时间的测试,并最终认为它已经足够稳定并鼓励大家都来尝试一下。 +We have upgraded to webpack 2 which has been [officially released](https://medium.com/webpack/webpack-2-and-beyond-40520af9067f) a few months ago. It is a big upgrade with many bugfixes and general improvements. We have been testing it for a while, and now consider it stable enough to recommend it to everyone. -`webpack` 的配置风格发生了改变,但是没有使用弹出操作的 `Create React App` 用户不需要担心,我们已经在我们内部做了对应的调整。 +While the Webpack configuration format has changed, Create React App users who didn't eject don't need to worry about it as we have updated the configuration on our side. -如果出于某种原因你必须要做弹出操作的话,可以参考 `webpack` 提供的 [升级指南](https://webpack.js.org/guides/migrating/) 对你的应用进行必要的升级。需要说明的是,Create React App 发布的每个版本,我们都努力去支持尽可能多的应用场景以便将来你不需要做弹出操作。 +If you had to eject your app for one reason or another, Webpack provides a [configuration migration guide](https://webpack.js.org/guides/migrating/) that you can follow to update your apps. Note that with each release of Create React App, we are working to support more use cases out of the box so that you don't have to eject in the future. -webpack 2 最引人注目的新特性就是其对 ES6 模块 的支持,可以直接创建和引入 [ES6 模块](http://2ality.com/2014/09/es6-modules-final.html)而不必把事先它们编译成 CommonJS 模块。虽然这不应该影响你如何写代码因为你可能已经在使用 `import` 和 `export` 语句了。但是它可以在编译阶段捕获更多的错误,比如exports 的变量undefined之类的: +The biggest notable webpack 2 feature is the ability to write and import [ES6 modules](http://2ality.com/2014/09/es6-modules-final.html) directly without compiling them to CommonJS. This shouldn’t affect how you write code since you likely already use `import` and `export` statements, but it will help catch more mistakes like missing named exports at compile time: ![Export validation](../img/blog/cra-update-exports.gif) -未来,随着 ES6 模块相关生态系统的成熟,webpack 2 还提供了 [tree shaking](https://webpack.js.org/guides/tree-shaking/) 特性,可以通过去除冗余代码,优化打包后脚本的尺寸。 +In the future, as the ecosystem around ES6 modules matures, you can expect more improvements to your app's bundle size thanks to [tree shaking](https://webpack.js.org/guides/tree-shaking/). -### Runtime Error Overlay {#error-overlay} +### Runtime Error Overlay ->*开发这个功能的是 [@Timer](https://github.com/Timer) 和 [@nicinabox](https://github.com/nicinabox) 在 [#1101](https://github.com/facebookincubator/create-react-app/pull/1101), [@bvaughn](https://github.com/bvaughn) 在 [#2201](https://github.com/facebookincubator/create-react-app/pull/2201).* +>*This change was contributed by [@Timer](https://github.com/Timer) and [@nicinabox](https://github.com/nicinabox) in [#1101](https://github.com/facebookincubator/create-react-app/pull/1101), [@bvaughn](https://github.com/bvaughn) in [#2201](https://github.com/facebookincubator/create-react-app/pull/2201).* -你有没有这种经历,代码中写错了一个地方,控制台里也报错了,但是死活找不到报错代码的位置?或者情况更糟,你允许应用上线了然后程序在生产环境下直接崩掉了,只是因为你漏掉了开发环境中的一个错误? +Have you ever made a mistake in code and only realized it after the console is flooded with cryptic errors? Or worse, have you ever shipped an app with crashes in production because you accidentally missed an error in development? -为了解决这个问题,我们引入了一个专门捕获错误的弹窗,当程序报错的时候会展示报错信息和引发错误的位置!当然,这只会出现在开发环境中,你也可以按 `ESC` 把它关闭。 +To address these issues, we are introducing an overlay that pops up whenever there is an uncaught error in your application. It only appears in development, and you can dismiss it by pressing Escape. -一图胜千言,有图,有真相: +A GIF is worth a thousand words: ![Runtime error overlay](../img/blog/cra-runtime-error.gif) -(没错,它还能跟你的编辑器结合到一起!) +(Yes, it integrates with your editor!) -未来 Creat React App 还准备支持更多错误捕获。比如在React 16 版本发布之后,Creat React App 计划支持 React 组件调用栈的展示。 +In the future, we plan to teach the runtime error overlay to understand more about your React app. For example, after React 16 we plan to show React component stacks in addition to the JavaScript stacks when an error is thrown. -### 默认支持渐进式 web 应用 {#progressive-web-apps-by-default} ->*这个功能的贡献者是 [@jeffposnick](https://github.com/jeffposnick) 在 [#1728](https://github.com/facebookincubator/create-react-app/pull/1728).* +### Progressive Web Apps by Default -使用新版本 Creat React App 创建的项目默认就会支持 [渐进式web应用](https://developers.google.com/web/progressive-web-apps/)。这意味着它们使用了 [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers), 通过 [离线优先缓存策略](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) 来优化用户再次访问应用的速度。当然,你也可以通过设置默认不开启这个特性,但是如果你在开发新的应用,我推荐你使用它,特别是在移动设备上运行的应用,体验会更好。 +>*This change was contributed by [@jeffposnick](https://github.com/jeffposnick) in [#1728](https://github.com/facebookincubator/create-react-app/pull/1728).* + +Newly created projects are built as [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) by default. This means that they employ [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) with an [offline-first caching strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) to minimize the time it takes to serve the app to the users who visit it again. You can opt out of this behavior, but we recommend it both for new and existing apps, especially if you target mobile devices. ![Loading assets from service worker](../img/blog/cra-pwa.png) -使用新版本 Creat React App 创建的项目默认就支持这些新特性,但是你可以很容易的对老项目进行升级,请参考[升级指南](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0)。 +New apps automatically have these features, but you can easily convert an existing project to a Progressive Web App by following [our migration guide](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0). -在未来的几周我们会为这个主题增加 [更多文档](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)。希望大家在答疑区畅所欲言,[积极提问](https://github.com/facebookincubator/create-react-app/issues/new) 。 +We will be adding [more documentation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) on this topic in the coming weeks. Please feel free to [ask any questions](https://github.com/facebookincubator/create-react-app/issues/new) on the issue tracker! -### Jest 20 {#jest-20} +### Jest 20 ->*这个功能的贡献者是 [@rogeliog](https://github.com/rogeliog) 在 [#1614](https://github.com/facebookincubator/create-react-app/pull/1614) 和 [@gaearon](https://github.com/gaearon) 在 [#2171](https://github.com/facebookincubator/create-react-app/pull/2171).* +>*This change was contributed by [@rogeliog](https://github.com/rogeliog) in [#1614](https://github.com/facebookincubator/create-react-app/pull/1614) and [@gaearon](https://github.com/gaearon) in [#2171](https://github.com/facebookincubator/create-react-app/pull/2171).* - 我们正在使用的是最新版的 Jest,包括了许多的 bug 修复和功能增强。更多信息请阅读博客 [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html) 和 [Jest 20](http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html)。 +We are now using the latest version of Jest that includes numerous bugfixes and improvements. You can read more about the changes in [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html) and [Jest 20](http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html) blog posts. -主要亮点包括 [immersive watch mode](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#immersive-watch-mode), [a better snapshot format](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#snapshot-updates), [improvements to printing skipped tests](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#improved-printing-of-skipped-tests),以及 [new testing APIs](https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#new-improved-testing-apis)。 +Highlights include a new [immersive watch mode](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#immersive-watch-mode), [a better snapshot format](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#snapshot-updates), [improvements to printing skipped tests](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#improved-printing-of-skipped-tests), and [new testing APIs](https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#new-improved-testing-apis). ![Immersive test watcher](../img/blog/cra-jest-search.gif) -现在 Create React App 只需要做少量 Jest 的配置就可以生成覆盖率报告了。 +Additionally, Create React App now support configuring a few Jest options related to coverage reporting. -### 动态 import() 代码分割 {#code-splitting-with-dynamic-import} +### Code Splitting with Dynamic import() ->*这个功能的贡献者是 [@Timer](https://github.com/Timer) 在 [#1538](https://github.com/facebookincubator/create-react-app/pull/1538) 和 [@tharakawj](https://github.com/tharakawj) 在 [#1801](https://github.com/facebookincubator/create-react-app/pull/1801).* +>*This change was contributed by [@Timer](https://github.com/Timer) in [#1538](https://github.com/facebookincubator/create-react-app/pull/1538) and [@tharakawj](https://github.com/tharakawj) in [#1801](https://github.com/facebookincubator/create-react-app/pull/1801).* - 对于 web 应用而言很重要的一点就是减轻页面初始化时的 JS 加载负担,并做到 [按需加载](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2)。虽然 Create React App 发布以后通过使用 `require.ensure()` 支持 [代码分割](https://webpack.js.org/guides/code-splitting-async/) , 它使用 webpack 规范的语法然而在 Jest 及其他环境下并不适用。 +It is important to keep the initial JavaScript payload of web apps down to the minimum, and [load the rest of the code on demand](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2). Although Create React App supported [code splitting](https://webpack.js.org/guides/code-splitting-async/) using `require.ensure()` since the first release, it used a webpack-specific syntax that did not work in Jest or other environments. -这个版本,我们增加了它对[动态 `import()` 代码分割](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand) 的支持,这与未来的 web 标准是一致的。 与 `require.ensure()` 不同的是, 它不会影响 Jest 的测试,并最终会成为 JavaScript 的一部分。我们建议你使用 `import()` 来对不必要的组件的代码做延迟加载。 +In this release, we are adding support for the [dynamic `import()` proposal](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand) which aligns with the future web standards. Unlike `require.ensure()`, it doesn't break Jest tests, and should eventually become a part of JavaScript. We encourage you to use `import()` to delay loading the code for non-critical component subtrees until you need to render them. ![Creating chunks with dynamic import](../img/blog/cra-dynamic-import.gif) -### 更好的控制台输出 {#better-console-output} +### Better Console Output ->*本功能开发者是 [@gaearon](https://github.com/gaearon) 于 [#2120](https://github.com/facebookincubator/create-react-app/pull/2120), [#2125](https://github.com/facebookincubator/create-react-app/pull/2125), 和 [#2161](https://github.com/facebookincubator/create-react-app/pull/2161)。* +>*This change was contributed by [@gaearon](https://github.com/gaearon) in [#2120](https://github.com/facebookincubator/create-react-app/pull/2120), [#2125](https://github.com/facebookincubator/create-react-app/pull/2125), and [#2161](https://github.com/facebookincubator/create-react-app/pull/2161).* -新版的 Create React App 改善了控制台的输出。 +We have improved the console output across the board. -举个例子,当你启动测试服务时,新版的 Create React App 除了会显示本地地址之外,还会显示局域网ip地址,这样你就能更快的用你的手机测试应用了: +For example, when you start the development server, we now display the LAN address in additional to the localhost address so that you can quickly access the app from a mobile device on the same network: ![Better console output](../img/blog/cra-better-output.png) -当代码错误报告出来了,我们将不再展示警告信息以便你集中注意力到更严重的问题上。错误和警告信息在生产环境下的展示也被优化了,而且构建错误的弹出字体跟浏览器字体匹配度更高了。 +When lint errors are reported, we no longer show the warnings so that you can concentrate on more critical issues. Errors and warnings in the production build output are better formatted, and the build error overlay font size now matches the browser font size more closely. -### 别急... 还有干货! {#but-wait-theres-more} +### But Wait... There's More! -虽然讲了很多,但是这个版本中还有许多未能介绍的新特性,比如 [environment-specific and local `.env` files](https://github.com/facebookincubator/create-react-app/pull/1344),[a lint rule against confusingly named globals](https://github.com/facebookincubator/create-react-app/pull/2130),[support for multiple proxies in development](https://github.com/facebookincubator/create-react-app/pull/1790), [a customizable browser launch script](https://github.com/facebookincubator/create-react-app/pull/1590)以及许多 bug 修复。 +You can only fit so much in a blog post, but there are other long-requested features in this release, such as [environment-specific and local `.env` files](https://github.com/facebookincubator/create-react-app/pull/1344), [a lint rule against confusingly named globals](https://github.com/facebookincubator/create-react-app/pull/2130), [support for multiple proxies in development](https://github.com/facebookincubator/create-react-app/pull/1790), [a customizable browser launch script](https://github.com/facebookincubator/create-react-app/pull/1590), and many bugfixes. -更多信息请参阅升级文档 [v1.0.0 发布详情](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0)。 +You can read the full changelog and the migration guide in the [v1.0.0 release notes](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0). -### 致谢 {#acknowledgements} +### Acknowledgements -这个发布版本是 React 社区的许多成员共同奋斗几个月的成果。我们旨在同时提升开发者的开发体验和用户的使用体验,因为我们坚信,这二者是互相补充携手并进的。 +This release is a result of months of work from many people in the React community. It is focused on improving both developer and end user experience, as we believe they are complementary and go hand in hand. -我们很感谢 [参与贡献的每个人](https://github.com/facebookincubator/create-react-app/graphs/contributors), 无论是贡献代码, 文档, 或者为他人提供帮助。我们尤其要感谢 [Joe Haddad](https://github.com/timer) 为了维护项目所付出的巨大努力。 +We are grateful to [everyone who has offered their contributions](https://github.com/facebookincubator/create-react-app/graphs/contributors), whether in code, documentation, or by helping other people. We would like to specifically thank [Joe Haddad](https://github.com/timer) for his invaluable help maintaining the project. -我们非常高兴为使用 Create React App 的开发者带来着这些改进,我们会继续期待着你们的反馈和贡献。 +We are excited to bring these improvements to everybody using Create React App, and we are looking forward to more of your feedback and contributions. diff --git a/content/blog/2017-06-13-react-v15.6.0.md b/content/blog/2017-06-13-react-v15.6.0.md old mode 100644 new mode 100755 index 5bd3c90945..0769fbd6f0 --- a/content/blog/2017-06-13-react-v15.6.0.md +++ b/content/blog/2017-06-13-react-v15.6.0.md @@ -5,7 +5,7 @@ author: [flarnie] 今天我们发布了 React 15.6.0。由于我们在准备React 16.0,因此我们修复和清理了许多东西。此次发布将继续为后续铺路。 -## 提升Inputs {#improving-inputs} +## 提升Inputs 在React 15.6.0,输入框的`onChange`事件稍微可靠了点并能够处理更多边界条件,涵盖以下: @@ -18,7 +18,7 @@ author: [flarnie] 感谢[Jason Quense](https://github.com/jquense)以及其他帮助解决上述问题和提出PR的各位。 -## 更少嘈杂的弃用警告 {#less-noisy-deprecation-warnings} +## 更少嘈杂的弃用警告 我们还为之后的弃用引入了一系列新的警告。这些并不会影响大多数用户,更多细节可以查看下面的修改日志。 @@ -26,7 +26,7 @@ author: [flarnie] --- -## 安装 {#installation} +## 安装 我们推荐使用 [Yarn](https://yarnpkg.com/) 或 [npm](https://www.npmjs.com/) 来管理前端依赖。若你是初次接触包管理器,[Yarn 文档](https://yarnpkg.com/en/docs/getting-started)是一个不错的起点。 @@ -65,18 +65,18 @@ npm install --save react@^15.6.0 react-dom@^15.6.0 ------------ -## 修改日志 {#changelog} +## 修改日志 -## 15.6.0 (June 13, 2017) {#1560-june-13-2017} +## 15.6.0 (June 13, 2017) -### React {#react} +### React * 采用`console.warn`而不是`console.error`来降级处理弃用警告。([@flarnie](https://github.com/flarnie) 在 [#9753](https://github.com/facebook/react/pull/9753) 的提交) * 为`React.createClass`增加弃用警告。将用户指向`create-react-class`。([@flarnie](https://github.com/flarnie) 在 [#9771](https://github.com/facebook/react/pull/9771) 的提交) * 增加弃用警告并为`React.DOM`工厂辅助方法分离为新模块。([@nhunzaker](https://github.com/nhunzaker) 在 [#8356](https://github.com/facebook/react/pull/8356) 的提交) * `React.createMixin`的弃用警告辅助方法将不再使用。([@aweary](https://github.com/aweary) 在 [#8853](https://github.com/facebook/react/pull/8853) 的提交) -### React DOM {#react-dom} +### React DOM * 在`style`属性中增加CSS变量支持。 ([@aweary](https://github.com/aweary) 在 [#9302](https://github.com/facebook/react/pull/9302) 的提交) * 增加CSS网格(Grid)样式属性支持。([@ericsakmar](https://github.com/ericsakmar) 在 [#9185](https://github.com/facebook/react/pull/9185) 的提交) @@ -84,12 +84,3 @@ npm install --save react@^15.6.0 react-dom@^15.6.0 * 修复在某些输入场景下`onChange`未触发的问题。([@jquense](https://github.com/jquense) 在 [#8575](https://github.com/facebook/react/pull/8575) 的提交) * 修复控制数字输入框错误允许期间的异常。([@nhunzaker](https://github.com/nhunzaker) 在 [#9584](https://github.com/facebook/react/pull/9584) 的提交) * 修复性能记录(performance entry)被清除的bug。([@chrisui](https://github.com/chrisui) 在 [#9451](https://github.com/facebook/react/pull/9451) 的提交) - -### React Addons {#react-addons} - -* Fix AMD support for addons depending on `react`. ([@flarnie](https://github.com/flarnie) in [#9919](https://github.com/facebook/react/issues/9919)) -* Fix `isMounted()` to return `true` in `componentWillUnmount`. ([@mridgway](https://github.com/mridgway) in [#9638](https://github.com/facebook/react/issues/9638)) -* Fix `react-addons-update` to not depend on native `Object.assign`. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937)) -* Remove broken Google Closure Compiler annotation from `create-react-class`. ([@gaearon](https://github.com/gaearon) in [#9933](https://github.com/facebook/react/pull/9933)) -* Remove unnecessary dependency from `react-linked-input`. ([@gaearon](https://github.com/gaearon) in [#9766](https://github.com/facebook/react/pull/9766)) -* Point `react-addons-(css-)transition-group` to the new package. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937)) diff --git a/content/blog/2017-07-26-error-handle-in-react-16.md b/content/blog/2017-07-26-error-handle-in-react-16.md new file mode 100755 index 0000000000..c742295bd3 --- /dev/null +++ b/content/blog/2017-07-26-error-handle-in-react-16.md @@ -0,0 +1,116 @@ +--- +title: "Error Handle in React 16" +author: [gaearon] +--- + +随着React 16发布在即,我们打算介绍一些在组件内部React如何处理JavaScript错误。这些改变包含在React 16的beta版本中,并将成为React 16的一部分。 + +**顺便一提,[你可以尝试我们刚发布了React 16的第一个测试版本!](https://github.com/facebook/react/issues/10294)** + +## React 15及之前的行为 + +过去,组件内部的JavaScript异常曾经常阻断了React内部状态并导致其在下一次渲染时[触发了隐藏的错误](https://github.com/facebook/react/issues/6895)。这些错误常常是由应用程序代码中的早期错误所引起的,但React并未提供一种在组件里优雅处理的方式,也不会从异常中回复。 + +## 错误边界介绍 + +UI部分的JavaScript异常不应阻断整个应用。为了为React用户解决这一问题,React 16引入了"错误边界(error boundary")"这一新概念。 + +错误边界作为React组件,用以**捕获在子组件树种任何地方的JavaScript异常,打印这些错误,并展示备用UI**而非让组件树崩溃。错误边界会捕获渲染期间,在生命周期方法中以及在其整个树的构造函数中的异常。 + +若定义一个称为`componentDidCatch(error, info)`的新生命周期方法,则类组件将成为错误边界: + +```javascript +class ErrorBoundary extends React.Component { + constructor(props) { + super(props); + this.state = { hasError: false }; + } + + componentDidCatch(error, info) { + // Display fallback UI + this.setState({ hasError: true }); + // You can also log the error to an error reporting service + logErrorToMyService(error, info); + } + + render() { + if (this.state.hasError) { + // You can render any custom fallback UI + return

Something went wrong.

; + } + return this.props.children; + } +} +``` + +而后可作为一个正常组件进行使用: + +```javascript + + + +``` + +`componentDidCatch()`方法的作用类似于JavaScript的`catch {}`,但仅针对组件。仅有类组件可以成为错误边界。实际上,大多数时间你会想仅声明一次错误边界组件并在整个应用中使用。 + +注意,**错误边界仅可以捕获树中后代的组件错误**。一个错误边界无法捕获其自身的错误。若错误边界尝试渲染错误信息失败,则该错误会传递至上方最接近的错误边界。而这也类似JavaScript中的`catch {}`块的工作方式。 + +## Live Demo + +查看[在React 16测试版](https://github.com/facebook/react/issues/10294)中[关于如何声明和使用错误边界的例子](https://codepen.io/gaearon/pen/wqvxGa?editors=0010)。 + +## 放置错误边界 + +错误边界的粒度完全取决于你。你可能将其包装在顶层路由组件中并为用户展示"内部异常(Something went wrong)"的信息,类似于服务端框架处理崩溃。你可能也会在错误边界包装一些内部组件用以保护不会让应用的余下部分不会崩溃。 + +## 未捕获错误的新行为 + +这一改变有一个重要的意义。**作为React 16中不是由错误边界引起的错误将会使得整个React组件树被卸载。** + +我们曾争论这一决定,但在我们的经验中,将损坏的UI留在那里要比完全移除它要糟糕得多。例如,在类似Messenger这样的产品中留下可见的损坏的UI可能会导致一些人将信息发送给错误的人。类似地,对于支付应用来说显示错误的金额要比什么都不显示糟糕得多。 + + +这一改变意味着随着迁移至React 16,你们将会发现之前未留意过的应用程序存在的崩溃。增加错误边界能够让你在发生异常时提供更好的用户体验。 + +例如,Facebook Messenger将边栏,信息面板,会话日志以及消息输入的内容包装到单独的错误边界中。若其中某一个组件的UI崩溃了,其余的仍能正常交互。 + +我们也鼓励你使用JS错误报告服务(或自己构建)以让你能够了解在产品中产生的未处理的异常,并修复它们。 + +## 组件栈追踪 + +React 16会打印所有在开发环节中发生在渲染过程的错误到控制台,即使应用程序意外地将他们吞了。除了错误信息和JavaScript堆栈,其还提供了组件栈追踪。闲杂你可以在组件树中精确地查看错误产生的地方: + +Component stack traces in error message + +你也可以在组件堆栈中查看文件名和行数。这一功能在[Create React App 项目](https://github.com/facebookincubator/create-react-app)中默认开启: + +Component stack traces with line numbers in error message + +若你不使用Create React App,你可以手动添加[该插件](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) 到你的Babel配置中。注意其仅能在开发环境中使用并**禁止在生产环境中使用。** + +## 为何不使用`try` / `catch`? + +`try` / `catch` 很好但其仅适用于命令式的代码: + +```javascript +try { + showButton(); +} catch (error) { + // ... +} +``` + +然而,React组件是声明式的,并指定了什么应该被渲染: + +```javascript + - - ); -} -``` - -Hooks [introduction](/docs/hooks-intro.html) and [overview](/docs/hooks-overview.html) are good places to start. Watch [these talks](https://www.youtube.com/watch?v=V-QO-KO90iQ) for a video introduction and a deep dive. The [FAQ](/docs/hooks-faq.html) should answer most of your further questions. To learn more about the motivation behind Hooks, you can read [this article](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889). Some of the rationale for the API design of Hooks is explained in [this RFC thread reply](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884). - -We have been dogfooding Hooks at Facebook since September. We don't expect major bugs in the implementation. Hooks are only available in the 16.7 alpha versions of React. Some of their API is expected to change in the final version (see the end of [this comment](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884) for details). It is possible that the minor release with Hooks might not be React 16.7. - -Hooks represent our vision for the future of React. They solve both problems that React users experience directly ("wrapper hell" of render props and higher-order components, duplication of logic in lifecycle methods), and the issues we've encountered optimizing React at scale (such as difficulties in inlining components with a compiler). Hooks don't deprecate classes. However, if Hooks are successful, it is possible that in a future *major* release class support might move to a separate package, reducing the default bundle size of React. - -**Status in React DOM:** The first version of `react` and `react-dom` supporting Hooks is `16.7.0-alpha.0`. We expect to publish more alphas over the next months (at the time of writing, the latest one is `16.7.0-alpha.2`). You can try them by installing `react@next` with `react-dom@next`. Don't forget to update `react-dom` -- otherwise Hooks won't work. - -**Status in React DOM Server:** The same 16.7 alpha versions of `react-dom` fully support Hooks with `react-dom/server`. - -**Status in React Native:** There is no officially supported way to try Hooks in React Native yet. If you're feeling adventurous, check out [this thread](https://github.com/facebook/react-native/issues/21967) for unofficial instructions. There is a known issue with `useEffect` firing too late which still needs to be solved. - -**Recommendation:** When you’re ready, we encourage you to start trying Hooks in new components you write. Make sure everyone on your team is on board with using them and familiar with this documentation. We don’t recommend rewriting your existing classes to Hooks unless you planned to rewrite them anyway (e.g. to fix bugs). Read more about the adoption strategy [here](/docs/hooks-faq.html#adoption-strategy). - -### React 16.x (~Q2 2019): The One with Concurrent Mode - -*Concurrent Mode* lets React apps be more responsive by rendering component trees without blocking the main thread. It is opt-in and allows React to interrupt a long-running render (for example, rendering a new feed story) to handle a high-priority event (for example, text input or hover). Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections. - ->Note -> ->You might have previously heard Concurrent Mode being referred to as ["async mode"](/blog/2018/03/27/update-on-async-rendering.html). We've changed the name to Concurrent Mode to highlight React's ability to perform work on different priority levels. This sets it apart from other approaches to async rendering. - -```js -// Two ways to opt in: - -// 1. Part of an app (not final API) - - - - -// 2. Whole app (not final API) -ReactDOM.unstable_createRoot(domNode).render(); -``` - -There is no documentation written for the Concurrent Mode yet. It is important to highlight that the conceptual model will likely be unfamiliar at first. Documenting its benefits, how to use it efficiently, and its pitfalls is a high priority for us, and will be a prerequisite for calling it stable. Until then, [Andrew's talk](https://www.youtube.com/watch?v=ByBPyMBTzM0) is the best introduction available. - -Concurrent Mode is *much* less polished than Hooks. Some APIs aren't properly "wired up" yet and don't do what they're expected to. At the time of writing this post, we don't recommend using it for anything except very early experimentation. We don't expect many bugs in Concurrent Mode itself, but note that components that produce warnings in [``](https://reactjs.org/docs/strict-mode.html) may not work correctly. On a separate note, we've seen that Concurrent Mode *surfaces* performance problems in other code which can sometimes be mistaken for performance issues in Concurrent Mode itself. For example, a stray `setInterval(fn, 1)` call that runs every millisecond would have a worse effect in Concurrent Mode. We plan to publish more guidance about diagnosing and fixing issues like this as part of this release's documentation. - -Concurrent Mode is a big part of our vision for React. For CPU-bound work, it allows non-blocking rendering and keeps your app responsive while rendering complex component trees. That's demoed in the first part of [our JSConf Iceland talk](/blog/2018/03/01/sneak-peek-beyond-react-16.html). Concurrent Mode also makes Suspense better. It lets you avoid flickering a loading indicator if the network is fast enough. It's hard to explain without seeing so [Andrew's talk](https://www.youtube.com/watch?v=ByBPyMBTzM0) is the best resource available today. Concurrent Mode relies on a cooperative main thread [scheduler](https://github.com/facebook/react/tree/master/packages/scheduler), and we are [collaborating with the Chrome team](https://www.youtube.com/watch?v=mDdgfyRB5kg) to eventually move this functionality into the browser itself. - -**Status in React DOM:** A *very* unstable version of Concurrent Mode is available behind an `unstable_` prefix in React 16.6 but we don't recommend trying it unless you're willing to often run into walls or missing features. The 16.7 alphas include `React.ConcurrentMode` and `ReactDOM.createRoot` without an `unstable_` prefix, but we'll likely keep the prefix in 16.7, and only document and mark Concurrent Mode as stable in this future minor release. - -**Status in React DOM Server:** Concurrent Mode doesn't directly affect server rendering. It will work with the existing server renderer. - -**Status in React Native:** The current plan is to delay enabling Concurrent Mode in React Native until [React Fabric](https://github.com/react-native-community/discussions-and-proposals/issues/4) project is near completion. - -**Recommendation:** If you wish to adopt Concurrent Mode in the future, wrapping some component subtrees in [``](https://reactjs.org/docs/strict-mode.html) and fixing the resulting warnings is a good first step. In general it's not expected that legacy code would immediately be compatible. For example, at Facebook we mostly intend to use the Concurrent Mode in the more recently developed codebases, and keep the legacy ones running in the synchronous mode for the near future. - -### React 16.x (~mid 2019): The One with Suspense for Data Fetching - -As mentioned earlier, *Suspense* refers to React's ability to "suspend" rendering while components are waiting for something, and display a loading indicator. In the already shipped React 16.6, the only supported use case for Suspense is code splitting. In this future minor release, we'd like to provide officially supported ways to use it for data fetching too. We'll provide a reference implementation of a basic "React Cache" that's compatible with Suspense, but you can also write your own. Data fetching libraries like Apollo and Relay will be able to integrate with Suspense by following a simple specification that we'll document. - -```js -// React Cache for simple data fetching (not final API) -import {unstable_createResource} from 'react-cache'; - -// Tell React Cache how to fetch your data -const TodoResource = unstable_createResource(fetchTodo); - -function Todo(props) { - // Suspends until the data is in the cache - const todo = TodoResource.read(props.id); - return
  • {todo.title}
    • ; -} - -function App() { - return ( - // Same Suspense component you already use for code splitting - // would be able to handle data fetching too. - }> -
      - {/* Siblings fetch in parallel */} - - -
    -     - ); -} - -// Other libraries like Apollo and Relay can also -// provide Suspense integrations with similar APIs. -``` - -There is no official documentation for how to fetch data with Suspense yet, but you can find some early information in [this talk](https://youtu.be/ByBPyMBTzM0?t=1312) and [this small demo](https://github.com/facebook/react/tree/master/fixtures/unstable-async/suspense). We'll write documentation for React Cache (and how to write your own Suspense-compatible library) closer to this React release, but if you're curious, you can find its very early source code [here](https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js). - -The low-level Suspense mechanism (suspending rendering and showing a fallback) is expected to be stable even in React 16.6. We've used it for code splitting in production for months. However, the higher-level APIs for data fetching are very unstable. React Cache is rapidly changing, and will change at least a few more times. There are some low-level APIs that are [missing](https://github.com/reactjs/rfcs/pull/89) for a good higher-level API to be possible. We don't recommend using React Cache anywhere except very early experiments. Note that React Cache itself isn't strictly tied to React releases, but the current alphas lack basic features as cache invalidation, and you'll run into a wall very soon. We expect to have something usable with this React release. - -Eventually we'd like most data fetching to happen through Suspense but it will take a long time until all integrations are ready. In practice we expect it to be adopted very incrementally, and often through layers like Apollo or Relay rather than directly. Missing higher level APIs aren't the only obstacle — there are also some important UI patterns we don't support yet such as [showing progress indicator outside of the loading view hierarchy](https://github.com/facebook/react/issues/14248). As always, we will communicate our progress in the release notes on this blog. - -**Status in React DOM and React Native:** Technically, a compatible cache would already work with `` in React 16.6. However, we don't expect to have a good cache implementation until this React minor release. If you're feeling adventurous, you can try to write your own cache by looking at the React Cache alphas. However, note that the mental model is sufficiently different that there's a high risk of misunderstanding it until the docs are ready. - -**Status in React DOM Server:** Suspense is not available in the server renderer yet. As we mentioned earlier, we've started work on a new asynchronous server renderer that will support Suspense, but it's a large project and will take a good chunk of 2019 to complete. - -**Recommendation:** Wait for this minor React release in order to use Suspense for data fetching. Don’t try to use Suspense features in 16.6 for it; it’s not supported. However, your existing `` components for code splitting will be able to show loading states for data too when Suspense for Data Fetching becomes officially supported. - -## Other Projects - -### Modernizing React DOM - -We started an investigation into [simplifying and modernizing](https://github.com/facebook/react/issues/13525) ReactDOM, with a goal of reduced bundle size and aligning closer with the browser behavior. It is still early to say which specific bullet points will "make it" because the project is in an exploratory phase. We will communicate our progress on that issue. - -### Suspense for Server Rendering - -We started designing a new server renderer that supports Suspense (including waiting for asynchronous data on the server without double rendering) and progressively loading and hydrating page content in chunks for best user experience. You can watch an overview of its early prototype in [this talk](https://www.youtube.com/watch?v=z-6JC0_cOns). The new server renderer is going to be our major focus in 2019, but it's too early to say anything about its release schedule. Its development, as always, [will happen on GitHub](https://github.com/facebook/react/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aopen+fizz). - ------ - -And that's about it! As you can see, there's a lot here to keep us busy but we expect much progress in the coming months. - -We hope this post gives you an idea of what we're working on, what you can use today, and what you can expect to use in the future. While there's a lot of discussion about new features on social media platforms, you won't miss anything important if you read this blog. - -We're always open to feedback, and love to hear from you in the [RFC repository](https://github.com/reactjs/rfcs), [the issue tracker](https://github.com/facebook/react/issues), and [on Twitter](https://mobile.twitter.com/reactjs). - - - - diff --git a/content/blog/2018-12-19-react-v-16-7.md b/content/blog/2018-12-19-react-v-16-7.md deleted file mode 100644 index 2f66cb743e..0000000000 --- a/content/blog/2018-12-19-react-v-16-7.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: "React v16.7: No, This Is Not the One With Hooks" -author: [acdlite] ---- - -Our latest release includes an important performance bugfix for `React.lazy`. Although there are no API changes, we're releasing it as a minor instead of a patch. - -## Why Is This Bugfix a Minor Instead of a Patch? - -React follows [semantic versioning](/docs/faq-versioning.html). Typically, this means that we use patch versions for bugfixes, and minors for new (non-breaking) features. However, we reserve the option to release minor versions even if they do not include new features. The motivation is to reserve patches for changes that have a very low chance of breaking. Patches are the most important type of release because they sometimes contain critical bugfixes. That means patch releases have a higher bar for reliability. It's unacceptable for a patch to introduce additional bugs, because if people come to distrust patches, it compromises our ability to fix critical bugs when they arise — for example, to fix a security vulnerability. - -We never intend to ship bugs. React has a hard-earned reputation for stability, and we intend to keep it that way. We thoroughly test every version of React before releasing. This includes unit tests, generative (fuzzy) tests, integration tests, and internal dogfooding across tens of thousands of components. However, sometimes we make mistakes. That's why, going forward, our policy will be that if a release contains non-trivial changes, we will bump the minor version, even if the external behavior is the same. We'll also bump the minor when changing `unstable_`-prefixed APIs. - -## Can I Use Hooks Yet? - -Not yet, but soon! - -At React Conf, we said that 16.7 would be the first release to include Hooks. This was a mistake. We shouldn't have attached a specific version number to an unreleased feature. We'll avoid this in the future. - -Although 16.7 does not include Hooks, please do not infer anything about the timeline of the Hooks launch. Our plans for Hooks are unchanged: - -- The [Hooks proposal](https://github.com/reactjs/rfcs/pull/68) was accepted ([with minor planned changes in response to feedback](https://github.com/reactjs/rfcs/pull/68#issuecomment-439314884)). -- The [implementation](https://github.com/facebook/react/commit/7bee9fbdd49aa5b9365a94b0ddf6db04bc1bf51c) was merged into the React repo (behind a feature flag). -- We're currently in the testing phase, and you can expect a public release within a few months. - -We've heard from many people who want to start using Hooks in their apps. We also can't wait to ship them! But because Hooks changes how we write React components, we are taking extra time to get the details right. We appreciate your patience as we prepare this exciting new feature for widespread, ahem, *use*. - -Learn more about [our roadmap](/blog/2018/11/27/react-16-roadmap.html) in our previous post. - - -## Installation - -React v16.7.0 is available on the npm registry. - -To install React 16 with Yarn, run: - -```bash -yarn add react@^16.7.0 react-dom@^16.7.0 -``` - -To install React 16 with npm, run: - -```bash -npm install --save react@^16.7.0 react-dom@^16.7.0 -``` - -We also provide UMD builds of React via a CDN: - -```html - - -``` - -Refer to the documentation for [detailed installation instructions](/docs/installation.html). - -## Changelog - -### React DOM - -* Fix performance of `React.lazy` for large numbers of lazily-loaded components. ([@acdlite](http://github.com/acdlite) in [#14429](https://github.com/facebook/react/pull/14429)) -* Clear fields on unmount to avoid memory leaks. ([@trueadm](http://github.com/trueadm) in [#14276](https://github.com/facebook/react/pull/14276)) -* Fix bug with SSR and context when mixing `react-dom/server@16.6` and `react@<16.6`. ([@gaearon](http://github.com/gaearon) in [#14291](https://github.com/facebook/react/pull/14291)) -* Fix a performance regression in profiling mode. ([@bvaughn](http://github.com/bvaughn) in [#14383](https://github.com/facebook/react/pull/14383)) - -### Scheduler (Experimental) - -* Post to MessageChannel instead of window. ([@acdlite](http://github.com/acdlite) in [#14234](https://github.com/facebook/react/pull/14234)) -* Reduce serialization overhead. ([@developit](http://github.com/developit) in [#14249](https://github.com/facebook/react/pull/14249)) -* Fix fallback to `setTimeout` in testing environments. ([@bvaughn](http://github.com/bvaughn) in [#14358](https://github.com/facebook/react/pull/14358)) -* Add methods for debugging. ([@mrkev](http://github.com/mrkev) in [#14053](https://github.com/facebook/react/pull/14053)) diff --git a/content/community/articles.md b/content/community/articles.md deleted file mode 100644 index 7ac99209e1..0000000000 --- a/content/community/articles.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -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/complementary-tools.it-IT.md b/content/community/complementary-tools.it-IT.md old mode 100644 new mode 100755 diff --git a/content/community/complementary-tools.ko-KR.md b/content/community/complementary-tools.ko-KR.md old mode 100644 new mode 100755 diff --git a/content/community/complementary-tools.md b/content/community/complementary-tools.md old mode 100644 new mode 100755 diff --git a/content/community/complementary-tools.zh-CN.md b/content/community/complementary-tools.zh-CN.md old mode 100644 new mode 100755 diff --git a/content/community/conferences.it-IT.md b/content/community/conferences.it-IT.md old mode 100644 new mode 100755 diff --git a/content/community/conferences.ko-KR.md b/content/community/conferences.ko-KR.md old mode 100644 new mode 100755 diff --git a/content/community/conferences.md b/content/community/conferences.md old mode 100644 new mode 100755 index 5591e65b41..fd93bb3997 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -4,73 +4,60 @@ title: Conferences layout: community sectionid: community permalink: community/conferences.html -redirect_from: - - "docs/conferences.html" +redirect_from: "docs/conferences.html" --- -Do you know of a local React.js conference? Add it here! (Please keep the list chronological) - ## Upcoming Conferences -### React Rally -August 16-17 in Salt Lake City, Utah USA - -[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally) - -### React DEV Conf China -August 18 in Guangzhou, China - -[Website](https://react.w3ctech.com) - -### ReactFoo Delhi -August 18 in Delhi, India +### ReactJS Day 2017 +October 6 in Verona, Italy -[Website](https://reactfoo.in/2018-delhi/) - [Twitter](https://twitter.com/reactfoo) - [Past talks](https://hasgeek.tv) +[Website](http://2017.reactjsday.it) - [Twitter](https://twitter.com/reactjsday) -### Byteconf React 2018 -August 31 streamed online, via Twitch +### React Conf Brasil 2017 +October 7 in Sao Paulo, Brazil -[Website](https://byteconf.com) - [Twitch](https://twitch.tv/byteconf) - [Twitter](https://twitter.com/byteconf) +[Website](http://reactconfbr.com.br) - [Twitter](https://twitter.com/reactconfbr) - [Facebook](https://www.facebook.com/reactconf/) -### React Native EU 2018 -September 5-6 in Wrocław, Poland +### State.js Conference 2017 +October 13 in Stockholm, Sweden -[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu) +[Website](https://statejs.com/) -### React Alicante 2018 -September 13-15 in Alicante, Spain +### React Summit 2017 +October 21 in Lagos, Nigeria -[Website](http://reactalicante.es) - [Twitter](https://twitter.com/ReactAlicante) +[Website](https://reactsummit2017.splashthat.com/) - [Twitter](https://twitter.com/DevCircleLagos/) - [Facebook](https://www.facebook.com/groups/DevCLagos/) -### React Boston 2018 -September 29-30 in Boston, Massachusetts USA +### ReactiveConf 2017 +October 25–27, Bratislava, Slovakia -[Website](http://www.reactboston.com/) - [Twitter](https://twitter.com/ReactBoston) +[Website](https://reactiveconf.com) -### ReactJS Day 2018 -October 5 in Verona, Italy +### React Seoul 2017 +November 4 in Seoul, South Korea -[Website](http://2018.reactjsday.it) - [Twitter](https://twitter.com/reactjsday) +[Website](http://seoul.reactjs.kr/en) -### React Conf Brasil 2018 -October 20 in Sao Paulo, Brazil +### React Day Berlin +December 2, Berlin, Germany -[Website](http://reactconfbr.com.br) - [Twitter](https://twitter.com/reactconfbr) - [Facebook](https://www.facebook.com/reactconf) +[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) -### React Conf 2018 -October 25-26 in Henderson, Nevada USA +### AgentConf 2018 +January 25-28 in Dornbirn, Austria -[Website](https://conf.reactjs.org/) +[Website](http://agent.sh/) -### ReactNext 2018 -November 4 in Tel Aviv, Israel +### React Amsterdam 2018 +April 13 in Amsterdam, The Netherlands -[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Facebook](https://facebook.com/ReactNext2016) +[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) -### React Day Berlin 2018 -November 30, Berlin, Germany +### ReactEurope 2018 +May 17-18 in Paris, France -[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/channel/UC1EYHmQYBUJjkmL6OtK4rlw) +[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) ## Past Conferences @@ -139,17 +126,17 @@ January 20-21 in Dornbirn, Austria ### React Conf 2017 March 13-14 in Santa Clara, CA -[Website](http://conf.reactjs.org/) - [Videos](https://www.youtube.com/watch?v=7HSd1sk07uU&list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0) +[Website](http://conf.reactjs.org/) ### React London 2017 March 28th at the [QEII Centre, London](http://qeiicentre.london/) -[Website](http://react.london/) - [Videos](https://www.youtube.com/watch?v=2j9rSur_mnk&list=PLW6ORi0XZU0CFjdoYeC0f5QReBG-NeNKJ) +[Website](http://react.london/) ### React Amsterdam 2017 April 21st in Amsterdam, The Netherlands -[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Videos](https://www.youtube.com/watch?v=NQyL-Dm7Kig&list=PLNBNS7NRGKMHxfm0CcYNuINLdRw7r4a9M) +[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) ### ReactEurope 2017 May 18th & 19th in Paris, France @@ -159,126 +146,34 @@ May 18th & 19th in Paris, France ### Chain React 2017 July 10-11 in Portland, Oregon USA -[Website](https://infinite.red/ChainReactConf) - [Twitter](https://twitter.com/chainreactconf) - [Videos](https://www.youtube.com/watch?v=cz5BzwgATpc&list=PLFHvL21g9bk3RxJ1Ut5nR_uTZFVOxu522) +[Website](https://infinite.red/ChainReactConf) - [Twitter](https://twitter.com/chainreactconf) -### React Rally 2017 +### React Rally August 24-25 in Salt Lake City, Utah USA -[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally) - [Videos](https://www.youtube.com/watch?v=f4KnHNCZcH4&list=PLUD4kD-wL_zZUhvAIHJjueJDPr6qHvkni) +[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally) ### React Native EU 2017 September 6-7 in Wroclaw, Poland -[Website](http://react-native.eu/) - [Videos](https://www.youtube.com/watch?v=453oKJAqfy0&list=PLzUKC1ci01h_hkn7_KoFA-Au0DXLAQZR7) +[Website](http://react-native.eu/) ### ReactNext 2017 September 8-10 in Tel Aviv, Israel -[Website](http://react-next.com/) - [Twitter](https://twitter.com/ReactNext) - [Videos (Hall A)](https://www.youtube.com/watch?v=eKXQw5kR86c&list=PLMYVq3z1QxSqq6D7jxVdqttOX7H_Brq8Z), [Videos (Hall B)](https://www.youtube.com/watch?v=1InokWxYGnE&list=PLMYVq3z1QxSqCZmaqgTXLsrcJ8mZmBF7T) +[Website](http://react-next.com/) - [Twitter](https://twitter.com/ReactNext) ### ReactFoo 2017 September 14 in Bangalore, India -[Website](https://reactfoo.in/2017/) - [Videos](https://www.youtube.com/watch?v=3G6tMg29Wnw&list=PL279M8GbNsespKKm1L0NAzYLO6gU5LvfH) +[Website](https://reactfoo.in/2017/) ### React Boston 2017 September 23-24 in Boston, Massachusetts USA -[Website](http://www.reactboston.com/) - [Twitter](https://twitter.com/ReactBoston) - [Videos](https://www.youtube.com/watch?v=2iPE5l3cl_s&list=PL-fCkV3wv4ub8zJMIhmrrLcQqSR5XPlIT) +[Website](http://www.reactboston.com/) - [Twitter](https://twitter.com/ReactBoston) ### React Alicante 2017 September 28-30 in Alicante, Spain -[Website](http://reactalicante.es) - [Twitter](https://twitter.com/ReactAlicante) - [Videos](https://www.youtube.com/watch?v=UMZvRCWo6Dw&list=PLd7nkr8mN0sWvBH_s0foCE6eZTX8BmLUM) - -### ReactJS Day 2017 -October 6 in Verona, Italy - -[Website](http://2017.reactjsday.it) - [Twitter](https://twitter.com/reactjsday) - [Videos](https://www.youtube.com/watch?v=bUqqJPIgjNU&list=PLWK9j6ps_unl293VhhN4RYMCISxye3xH9) - -### React Conf Brasil 2017 -October 7 in Sao Paulo, Brazil - -[Website](http://reactconfbr.com.br) - [Twitter](https://twitter.com/reactconfbr) - [Facebook](https://www.facebook.com/reactconf/) - -### State.js Conference 2017 -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) - [Videos](https://www.youtube.com/watch?v=BOKxSFB2hOE&list=PLa2ZZ09WYepMB-I7AiDjDYR8TjO8uoNjs) - -### React Seoul 2017 -November 4 in Seoul, South Korea - -[Website](http://seoul.reactjs.kr/en) - -### React Day Berlin 2017 -December 2, Berlin, Germany - -[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/watch?v=UnNLJvHKfSY&list=PL-3BrJ5CiIx5GoXci54-VsrO6GwLhSHEK) - -### ReactFoo Pune -January 19-20, Pune, India - -[Website](https://reactfoo.in/2018-pune/) - [Twitter](https://twitter.com/ReactFoo) - -### AgentConf 2018 -January 25-28 in Dornbirn, Austria - -[Website](http://agent.sh/) - -### ReactFest 2018 -March 8-9 in London, UK - -[Website](https://reactfest.uk/) - [Twitter](https://twitter.com/ReactFest) - [Videos](https://www.youtube.com/watch?v=YOCrJ5vRCnw&list=PLRgweB8YtNRt-Sf-A0y446wTJNUaAAmle) - -### Reactathon 2018 -March 20-22 in San Francisco, USA - -[Website](https://www.reactathon.com/) - [Twitter](https://twitter.com/reactathon) - [Videos (fundamentals)](https://www.youtube.com/watch?v=knn364bssQU&list=PLRvKvw42Rc7OWK5s-YGGFSmByDzzgC0HP), [Videos (advanced day1)](https://www.youtube.com/watch?v=57hmk4GvJpk&list=PLRvKvw42Rc7N0QpX2Rc5CdrqGuxzwD_0H), [Videos (advanced day2)](https://www.youtube.com/watch?v=1hvQ8p8q0a0&list=PLRvKvw42Rc7Ne46QAjWNWFo1Jf0mQdnIW) - -### React Native Camp UA 2018 -March 31 in Kiev, Ukraine - -[Website](http://reactnative.com.ua/) - [Twitter](https://twitter.com/reactnativecamp) - [Facebook](https://www.facebook.com/reactnativecamp/) - -### React Amsterdam 2018 -April 13 in Amsterdam, The Netherlands - -[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - -### React Finland 2018 -April 24-26 in Helsinki, Finland - -[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland) - -### 2018 -April 28 in Sofia, Bulgaria - -[Website](http://react-not-a-conf.com/) - [Twitter](https://twitter.com/reactnotaconf) - [Facebook](https://www.facebook.com/groups/1614950305478021/) - -### ReactEurope 2018 -May 17-18 in Paris, France - -[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - -### ReactFoo Mumbai -May 26 in Mumbai, India - -[Website](https://reactfoo.in/2018-mumbai/) - [Twitter](https://twitter.com/reactfoo) - [Past talks](https://hasgeek.tv) - -### Chain React 2018 -July 11-13 in Portland, Oregon USA - -[Website](https://infinite.red/ChainReactConf) - [Twitter](https://twitter.com/chainreactconf) - -## +[Website](http://reactalicante.es) - [Twitter](https://twitter.com/ReactAlicante) diff --git a/content/community/conferences.zh-CN.md b/content/community/conferences.zh-CN.md old mode 100644 new mode 100755 diff --git a/content/community/courses.md b/content/community/courses.md deleted file mode 100644 index 5da83fe511..0000000000 --- a/content/community/courses.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -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 Crash Course 2018](https://www.youtube.com/watch?v=Ke90Tje7VS0) - A beginner-friendly crash course through the most important React topics. - -- [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. - -- [Egghead.io: The Beginner's Guide to ReactJS](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) - Free course for React newbies and those looking to get a better understanding of React fundamentals. - -- [Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Recordings from three days of a free online React bootcamp. - -## 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 for Designers](https://designcode.io/react) - A 6-hour React course for designers, by designers. - -- [React Essentials for Designers](https://learnreact.design) - React courses tailored for designers: the fundamentals, capabilities, limitations and how they relate to design. - -- [Essential React](https://learnreact.com/lessons/2018-essential-react-1-overview) - A crash course for doers, moving fast from "Hello World" to advanced component composition. - -- [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". - -- [Mastering React](https://codewithmosh.com/p/mastering-react/) - Build professional interactive apps with React. diff --git a/content/community/examples.it-IT.md b/content/community/examples.it-IT.md old mode 100644 new mode 100755 diff --git a/content/community/examples.ko-KR.md b/content/community/examples.ko-KR.md old mode 100644 new mode 100755 diff --git a/content/community/examples.md b/content/community/examples.md old mode 100644 new mode 100755 index 09606a27da..bccc3287a4 --- a/content/community/examples.md +++ b/content/community/examples.md @@ -1,23 +1,5 @@ --- -id: examples -title: Example Projects -layout: community -sectionid: community -permalink: community/examples.html +permalink: docs/examples.html +layout: redirect +dest_url: https://github.com/facebook/react/wiki/Examples --- - -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. -* **[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 -* **[Shopping Cart](https://github.com/jeffersonRibeiro/react-shopping-cart)** Simple ecommerce cart application built using React -* **[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. -* **[Bitcoin Price Index](https://github.com/mrkjlchvz/bitcoin-price-index)** Simple bitcoin price index data from CoinDesk API. -* **[Builder Book](https://github.com/builderbook/builderbook)** Open source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB. -* **[GFonts Space](https://github.com/pankajladhar/GFontsSpace)** A space which allows user to play with Google fonts. Built with React, Redux and React-Router. diff --git a/content/community/examples.zh-CN.md b/content/community/examples.zh-CN.md old mode 100644 new mode 100755 diff --git a/content/community/external-resources.md b/content/community/external-resources.md deleted file mode 100644 index 656a4399cb..0000000000 --- a/content/community/external-resources.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -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 deleted file mode 100644 index f1b901fc7a..0000000000 --- a/content/community/meetups.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -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 -* [Montreal, QC - ReactJS](https://www.meetup.com/fr-FR/ReactMontreal/) -* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/) -* [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/) -* [Karlsruhe](http://www.meetup.com/react_ka/) -* [Munich](http://www.meetup.com/ReactJS-Meetup-Munich/) - -## Greece -* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/) - -## Hungary -* [Budapest](https://www.meetup.com/React-Budapest/) - -## India -* [Bangalore](https://www.meetup.com/ReactJS-Bangalore/) -* [Chennai](https://www.meetup.com/React-Chennai/) -* [Gurgaon](https://www.meetup.com/React-Gurgaon/) - -## 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/) - -## Scotland (UK) -* [Edinburgh](https://www.meetup.com/React-Scotland/) - -## 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/) -* [Columbus, OH - ReactJS](http://www.meetup.com/ReactJS-Columbus-meetup/) -* [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 old mode 100644 new mode 100755 index 50bab1e5e8..776730fb60 --- a/content/community/nav.yml +++ b/content/community/nav.yml @@ -1,42 +1,14 @@ -- title: 社区资源 +- title: Community Resources items: - id: support - title: 帮助 - - id: courses - title: 课程 - - id: examples - title: 示例 - - id: meetups - title: 线下交流 + title: Where To Get Support - id: conferences - title: 会议 - - id: articles - title: 文章 - - id: podcasts - title: Podcasts + title: Conferences - id: videos - title: 视频 - - id: external-resources - title: 其他 -- title: 工具 - items: - - id: debugging-tools - title: 调试 - - id: component-workbenches - title: 组件开发 - - id: jsx-integrations - title: JSX 集成 - - id: starter-kits - title: 脚手架 - - id: routing - title: 路由 - - id: model-management - title: 模型管理 - - id: data-fetching - title: 数据交互 - - id: testing - title: Testing - - id: ui-components - title: UI 组件 - - id: misc - title: 杂项 + title: Videos + - 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 diff --git a/content/community/podcasts.md b/content/community/podcasts.md deleted file mode 100644 index 0b91418b9a..0000000000 --- a/content/community/podcasts.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -id: podcasts -title: Podcasts -layout: community -sectionid: community -permalink: community/podcasts.html ---- - -Podcasts dedicated to React and individual podcast episodes with React discussions. - -## Podcasts - -- [The React Podcast](http://reactpodcast.com) - The podcast about everything React.js, hosted by [React Training](https://reacttraining.com) - -- [JavaScript Air](https://javascriptair.com/) - All about JavaScript (currently not producing new episodes) - -- [React 30](https://react30.com/) - A 30-minute podcast all about React (moved to [The React Podcast](http://reactpodcast.com)). - -- [React Native Radio](https://devchat.tv/react-native-radio) - -## 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/support.md b/content/community/support.md old mode 100644 new mode 100755 index 638f897d0a..5e42f82865 --- a/content/community/support.md +++ b/content/community/support.md @@ -4,31 +4,41 @@ title: Where To Get Support layout: community sectionid: community permalink: community/support.html -redirect_from: - - "support.html" +redirect_from: "support.html" --- -React has a community of millions of developers. - -On this page we've listed some React-related communities that you can be a part of; see the other pages in this section for additional online and in-person learning materials. +**React** is worked on full-time by Facebook's product infrastructure and Instagram's user interface engineering teams. They're often around and available for questions. ## Stack Overflow -Stack Overflow is a popular forum to ask code-level questions or if you're stuck with a specific error. Read through the [existing questions](http://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](http://stackoverflow.com/questions/ask?tags=reactjs)! +Many members of the community use Stack Overflow to ask questions. Read through the [existing questions](http://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](http://stackoverflow.com/questions/ask?tags=reactjs)! + +## Discussion Forum + +For longer-form conversations about React, we've set up a [discussion forum at **discuss.reactjs.org**](https://discuss.reactjs.org/). This forum is a great place for discussion about best practices and application architecture as well as the future of React. If you have an answerable code-level question, please post it to Stack Overflow instead. + +In the forum there's also a category for job posts and a category for discussion of our weekly meeting notes. + +## React Community on Hashnode + +[Hashnode's React node](https://hashnode.com/n/reactjs) is a great place to stay up-to-date with React discussion, news and stories. + +## Reactiflux Chat + +If you need an answer right away, check out the [Reactiflux Discord](https://discord.gg/0ZcbPKXt5bZjGY5n) community. There are usually a number of React experts there who can help out or point you to somewhere you might want to look. -## Popular Discussion Forums +## Freenode IRC -There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React. If you have an answerable code-level question, Stack Overflow is usually a better fit. +Some developers also hang out in [#reactjs on Freenode](http://irc.lc/freenode/reactjs). -Each community consists of many thousands of React users. +>Note: +> +>Our IRC channel is called **#reactjs**. It is *not* called **#react** or **#reactos**. +> +>The **#reactos** channel belongs to an unrelated [ReactOS](https://reactos.org/) operating system project. The **#react** channel is not affiliated with us either. To discuss the React JavaScript library on its official IRC channel, please make sure that you post in **#reactjs**. -* [DEV's React community](https://dev.to/t/react) -* [Hashnode's React community](https://hashnode.com/n/reactjs) -* [React Discuss](https://discuss.reactjs.org/) -* [Reactiflux online chat](https://discord.gg/0ZcbPKXt5bZjGY5n) -* [Reddit's React community](https://www.reddit.com/r/reactjs/) -* [Spectrum's React community](https://spectrum.chat/react) +## Facebook and Twitter -## News +For the latest news about React, [like us on Facebook](https://facebook.com/react) and [follow **@reactjs** on Twitter](https://twitter.com/reactjs). In addition, you can use the [#reactjs](https://twitter.com/hashtag/reactjs) hashtag to see what others are saying or add to the conversation. -For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs) and the [official React blog](/blog) on this website. +
    diff --git a/content/community/tools-comp-workbenches.md b/content/community/tools-comp-workbenches.md deleted file mode 100644 index 0c952b55e1..0000000000 --- a/content/community/tools-comp-workbenches.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -id: component-workbenches -title: Component Workbenches -layout: community -permalink: community/component-workbenches.html ---- - -* **[Storybook for React](https://github.com/storybooks/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. -* **[React Cosmos](https://github.com/react-cosmos/react-cosmos)**: Dev tool for creating reusable React components. It scans your project for components and enables you to: render components in different states, mock dependencies (API, localStorage, etc.), see app state evolve in real time. -* **[Bit](https://github.com/teambit/bit)**: Isolate and share components from existing projects to make them available to install in other projects while tracking changes across projects. It helps save the overhead of keeping components in separate repositories. diff --git a/content/community/tools-data-fetching.md b/content/community/tools-data-fetching.md deleted file mode 100644 index 85e1b0b0ad..0000000000 --- a/content/community/tools-data-fetching.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -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/en/new-in-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 deleted file mode 100644 index 5416f7eb88..0000000000 --- a/content/community/tools-debugging.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -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 deleted file mode 100644 index 3b7283f3d1..0000000000 --- a/content/community/tools-jsx.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -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 deleted file mode 100644 index 64e5a0f442..0000000000 --- a/content/community/tools-misc.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -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 deleted file mode 100644 index af0827ec50..0000000000 --- a/content/community/tools-model-mgmt.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -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 deleted file mode 100644 index 74459a76c3..0000000000 --- a/content/community/tools-routing.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -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 deleted file mode 100644 index bc418e84f3..0000000000 --- a/content/community/tools-starter-kits.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -id: starter-kits -title: Starter Kits -layout: community -permalink: community/starter-kits.html ---- - -## Recommended by the React Team - -* **[Create React App](https://github.com/facebook/create-react-app)** - An officially supported way to start a client-side React project with no configuration -* **[Next.js](https://learnnextjs.com/)** - Framework for server-rendered or statically-exported React apps -* **[Gatsby](https://www.gatsbyjs.org/)** - Blazing-fast static site generator for React -* **[nwb](https://github.com/insin/nwb)** - A toolkit for React apps, libraries and other npm modules for the web -* **[razzle](https://github.com/jaredpalmer/razzle)** - Create server-rendered universal JavaScript applications with no configuration -* **[Neutrino](https://neutrino.js.org/)** - Create and build modern JavaScript applications with zero initial configuration - -## Other Starter Kits - -* **[kyt](https://github.com/nytimes/kyt)** - The framework that the New York Times uses to develop and build their web properties. It's somewhat opinionated but configurable, and includes starter kits with options to build full-stack or static/client-side apps with the following tools: Express, React, static assets, latest ES, CSS/Sass Modules, Jest, code-splitting, ESLint/Prettier, StyleLint, PostCSS, and inline SVGs. -* **[React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate):** React Redux Boilerplate is a workflow boilerplate 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 + 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. -* **[Create React App + Redux + React Router](https://github.com/notrab/create-react-app-redux)**: Based on Create React App, this boilerplate comes with Redux, Redux Thunk and React Router all configured ready to go. -* **[react-slingshot](https://github.com/coryhouse/react-slingshot):** React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app. -* **[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. -* **[Rekit](https://github.com/supnate/rekit)** - Toolkit and boilerplates for building scalable web applications with React, Redux and React-router. -* **[webcube](https://github.com/dexteryy/Project-WebCube)** - A JS infrastructure for modern Universal JS web app/sites and static websites. Provides built-in support and simplification for Redux sub-app, reducer bundle, router, immutable, eslint + prettier, docker, monorepo and many other tools. - * **[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-async-starter](https://github.com/didierfranc/react-async-starter):** React + Redux + Fetch + ES7 Async with Webpack, Babel and hot reloading. - * **[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) - * **[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 - * **[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. - * **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** CLI to initialize universal create-react-app without ejecting. Supports Server-side rendering with Code-splitting, and Node Stream rendering. - * **[EDGE Platform](https://github.com/sebastian-software/edge)** Universal React/SSR + Apollo GraphQL + JS/CSS Code Splitting + Fine-Tuned Webpack + Localization/Internationalization. Most things are external dependencies. Boilerplate available. - * **[bae](https://github.com/siddharthkp/bae)** Zero config toolkit. SSR (with data fetching) + routing + streaming + styling (with styled-components) + HMR out of the box. - * **[breko-hub](https://github.com/tomatau/breko-hub)** A production ready boilerplate for universal react applications. Complete with code splitting, server render (using koa), redux, sagas, debugging, hot-reloading (live updates on the server), css-modules, scss, super fast integration tests and unit tests. There's also a big focus on clean code and smaller files. diff --git a/content/community/tools-testing.md b/content/community/tools-testing.md deleted file mode 100644 index 0ce5210491..0000000000 --- a/content/community/tools-testing.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -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 deleted file mode 100644 index d963602bfb..0000000000 --- a/content/community/tools-ui-components.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -id: ui-components -title: UI Components -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/mbrevda/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 `