Skip to content

Commit

Permalink
Merge pull request #332 from reactjs/sync-bc91fe41
Browse files Browse the repository at this point in the history
Sync with reactjs.org @ bc91fe4
  • Loading branch information
koba04 committed May 12, 2020
2 parents f9be699 + 3cd1b3f commit 514d157
Show file tree
Hide file tree
Showing 11 changed files with 91 additions and 50 deletions.
21 changes: 18 additions & 3 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ March 30 - 31, 2020 in San Francisco, CA

[Website](https://www.reactathon.com) - [Twitter](https://twitter.com/reactathon) - [Facebook](https://www.facebook.com/events/575942819854160/)

### React Summit Amsterdam 2020 {#react-summit-2020}
September 11, 2020 in Amsterdam, The Netherlands
### React Summit - Remote Edition 2020 {#react-summit-remote-2020}
3pm CEST time, April 17, 2020 - remote event

[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
[Website](https://remote.reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)

### React Day Bangalore 2020 {#react-day-bangalore-2020}
April 25, 2020 in Bangalore, India
Expand Down Expand Up @@ -82,11 +82,26 @@ September 5-6, 2020 in Wrocław, Poland

[Website](https://www.react-native.eu/) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu/) - [YouTube](https://www.youtube.com/watch?v=m0GfmlGFh3E&list=PLZ3MwD-soTTHy9_88QPLF8DEJkvoB5Tl-) - [Instagram](https://www.instagram.com/reactnative_eu/)

### React Summit Amsterdam 2020 {#react-summit-2020}
September 8-11, 2020 in Amsterdam, The Netherlands

[Website](https://reactsummit.com) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)

### React Advanced 2020 {#react-advanced-2020}
October 21-23, 2020 in London, UK

[Website](https://reactadvanced.com) - [Twitter](http://twitter.com/reactadvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://youtube.com/c/ReactConferences)

### React India 2020 {#react-india-2020}
November 6, 2020 in Mumbai, India

[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia/) - [LinkedIn](https://www.linkedin.com/showcase/14545585) - [YouTube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w/videos)

### React Day Berlin 2020 {#react-day-berlin-2020}
November 25-27, 2020 in Berlin, Germany

[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/reactdayberlin)

## Past Conferences {#past-conferences}

### React.js Conf 2015 {#reactjs-conf-2015}
Expand Down
2 changes: 1 addition & 1 deletion content/community/courses.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ permalink: community/courses.html

## Free Courses {#free-courses}

- [Glitch: React Starter Kit](https://glitch.com/culture/react-starter-kit/) - A free, 5-part video course with interactive code examples that will help you learn React.
- [Glitch: React Starter Kit](https://glitch.com/glimmer/post/react-starter-kit/) - A free, 5-part video course with interactive code examples that will help you learn React.

- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React.

Expand Down
31 changes: 14 additions & 17 deletions content/community/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,21 @@ sectionid: community
permalink: community/examples.html
---

There are many example projects created by the React community. Feel free to add your own project. If you add a project, please commit to keeping it up to date with the latest versions of React.
There are many example projects created by the React community. We're keeping this page focused on the ones that use React without third-party state management libraries.

If you add a project, please commit to keeping it up to date with the latest versions of React.

## Small Examples

* **[Zeldog](https://yannsainty.github.io/Zeldog/)** A Zelda like game with a dog fighting ducks and more to eat pizza !
* **[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
* **[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 e-commerce 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.
* **[Course Learn Page](https://github.com/ulearnpro/ulearn)** Open Source LMS script in Laravel 5.8 and ReactJS 16.9
* **[Speedy math](https://github.com/pankajladhar/speedy-math)** An application which allows kids to practice basic Mathematics i.e Addition, Subtraction, Multiply, Comparison. It is a PWA (Progressive web app) with offline support and install as App features.
* **[Unit Converter](https://github.com/KarthikeyanRanasthala/react-unit-converter)** Minimal Yet Responsive Unit Converter Built With React, Material-UI & Convert-Units.
* **[Emoji Search](https://github.com/ahfarmer/emoji-search)** React app for searching emoji
* **[Snap Shot](https://github.com/Yog9/SnapShot)** A photo gallery with search
* **[BMI Calculator](https://github.com/GermaVinsmoke/bmi-calculator)** A React Hooks app for calculating BMI
* **[ReactJS Hangman Game](https://github.com/vetrivelcsamy/reactjs-hangman)** ReactJS Hangman Game Find a Programming Language.
* **[Radix Converter](https://github.com/kumom/radix-converter)** A small tool that converts numbers in radix 2 to 36 with arbitrary precision.
* **[Image Compressor](https://github.com/RaulB-masai/react-image-compressor)** An offline image compressor built with React and browser-image-compression
* **[Counter App](https://github.com/arnab-datta/counter-app)** A small shopping cart example
* **[Tutorial Solutions](https://github.com/harman052/react-tutorial-solutions)** Solutions to challenges mentioned at the end of React tutorial

## Complete Apps

* **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL
* **[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
2 changes: 2 additions & 0 deletions content/community/external-resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,6 @@ React community には選定された多くの素晴らしいリソースがあ

- [Awesome React Talks](https://github.com/tiaanduplessis/awesome-react-talks) - React talks についての選定されたリストです。

- [Awesome React Videos](https://www.awesomereact.com) - すばらしい React 関連のビデオを集めたウェブサイトです。

- [Hero35 React Hub](https://hero35.com/topic/react) - React の*すべて*のカンファや講演がカテゴリ別に選定されて収録されているウェブサイトです。
20 changes: 3 additions & 17 deletions content/community/team.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,6 @@ Dominic is interested in travelling, drum and bass, stand-up comedy and spending

Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.

### Nicolas Gallagher {#nicolas-gallagher}

![Nicolas](../images/team/necolas.jpg)

[@necolas on GitHub](https://github.com/necolas) · [@necolas on Twitter](https://twitter.com/necolas)

Nicolas has majored in anthropology. He started in web development by building a website for a friend, and eventually found himself rebuilding the Twitter website with React. Nicolas describes himself as boring on paper, not much better in real life.

### Rachel Nabors {#rachel-nabors}

![Rachel](../images/team/rnabors.jpg)
Expand All @@ -78,14 +70,6 @@ Rachel wrote a [book about UI animation](https://abookapart.com/products/animati

Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.

### Sunil Pai {#sunil-pai}

![Sunil](../images/team/threepointone.jpg)

[@threepointone on GitHub](https://github.com/threepointone) · [@threepointone on Twitter](https://twitter.com/threepointone)

Sunil started writing JavaScript for IE6 and still has some regrets about it. He worked in consulting, design, and product firms, before joining the React team to help others do the same. Sunil plays a blue Les Paul guitar, loves London, and would appreciate a response to his last ping, please and thank you!

### Yuzhi Zheng {#yuzhi-zheng}

![Yuzhi](../images/team/yuzhi.jpg)
Expand Down Expand Up @@ -120,13 +104,15 @@ React was originally created by [Jordan Walke](https://github.com/jordwalke). To
* [Keyan Zhang](https://github.com/keyz)
* [Nat Alison](https://github.com/tesseralis)
* [Nathan Hunzaker](https://github.com/nhunzaker)
* [Nicolas Gallagher](https://github.com/necolas)
* [Paul O'Shannessy](https://github.com/zpao)
* [Pete Hunt](https://github.com/petehunt)
* [Philipp Spiess](https://github.com/philipp-spiess)
* [Sander Spies](https://github.com/sanderspies)
* [Sasha Aickin](https://github.com/aickin)
* [Sophia Shoemaker](https://github.com/mrscobbler)
* [Sophie Alpert](https://github.com/sophiebits)
* [Sasha Aickin](https://github.com/aickin)
* [Sunil Pai](https://github.com/threepointone)
* [Tim Yung](https://github.com/yungsters)

This list is not exhaustive.
Expand Down
2 changes: 1 addition & 1 deletion content/docs/cdn-links.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: cdn-links
title: CDN リンク
permalink: docs/cdn-links.html
prev: create-a-new-react-app.html
next: hello-world.html
next: release-channels.html
---

React および ReactDOM は CDN を介して利用することができます。
Expand Down
47 changes: 47 additions & 0 deletions content/docs/faq-ajax.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,3 +81,50 @@ class MyComponent extends React.Component {
}
}
```

Here is the equivalent with [Hooks](https://reactjs.org/docs/hooks-intro.html):

```js
function MyComponent() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);

// Note: the empty deps array [] means
// this useEffect will run once
// similar to componentDidMount()
useEffect(() => {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result.items);
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])

if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
```
8 changes: 1 addition & 7 deletions content/docs/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,7 @@ class NameForm extends React.Component {

フォーム要素の `value` 属性が設定されているので、表示される値は常に `this.state.value` となり、React の state が信頼できる情報源となります。`handleChange` はキーストロークごとに実行されて React の state を更新するので、表示される値はユーザがタイプするたびに更新されます。

制御されたコンポーネントを使うと、すべての state の変更には紐付けられたハンドラ関数が存在することになります。これによりユーザ入力の改変や検証が簡単になります。例えば、名前が全て大文字で書かれるように強制したいなら、`handleChange` を次のように書くことができます:

```javascript{2}
handleChange(event) {
this.setState({value: event.target.value.toUpperCase()});
}
```
制御されたコンポーネントを使うと、ユーザ入力の値は常に React の state によって制御されるようになります。これによりタイプするコード量は少し増えますが、その値を他の UI 要素に渡したり、他のイベントハンドラからリセットしたりできるようになります。

## textarea タグ {#the-textarea-tag}

Expand Down
4 changes: 2 additions & 2 deletions content/languages.yml
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
- name: Persian
translated_name: فارسی
code: fa
status: 0
status: 1
- name: French
translated_name: Français
code: fr
Expand All @@ -66,7 +66,7 @@
- name: Hungarian
translated_name: magyar
code: hu
status: 1
status: 2
- name: Armenian
translated_name: Հայերեն
code: hy
Expand Down
2 changes: 1 addition & 1 deletion examples/uncontrolled-components/input-type-file.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ class FileInput extends React.Component {
this.fileInput = React.createRef();
}
handleSubmit(event) {
// highlight-range{4}
// highlight-range{3}
event.preventDefault();
alert(
`Selected file - ${this.fileInput.current.files[0].name}`
Expand Down
2 changes: 1 addition & 1 deletion src/components/LayoutFooter/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
},
}}>
<a
href="https://code.facebook.com/projects/"
href="https://opensource.facebook.com/projects/"
target="_blank"
rel="noopener">
<img
Expand Down

0 comments on commit 514d157

Please sign in to comment.