Skip to content

Commit

Permalink
Merge pull request #2 from reactjs/master
Browse files Browse the repository at this point in the history
Updated
  • Loading branch information
Ryan-LT authored May 6, 2019
2 parents 115ff84 + 7a2d9aa commit 452c116
Show file tree
Hide file tree
Showing 37 changed files with 366 additions and 197 deletions.
2 changes: 1 addition & 1 deletion content/blog/2014-09-24-testing-flux-applications.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ The first steps toward working with Jest are as follows:

1. Get the module dependencies for the application installed by running `npm install`.
2. Create a directory `__tests__/` with a test file, in this case TodoStore-test.js
3. Run `npm install jest-cli save-dev`
3. Run `npm install jest-cli --save-dev`
4. Add the following to your package.json

```javascript
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2018-10-01-create-react-app-v2.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Here's a short summary of what's new in this release:
* 🃏 We updated to [Jest 23](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing.html), which includes an [interactive mode](https://jestjs.io/blog/2018/05/29/jest-23-blazing-fast-delightful-testing#interactive-snapshot-mode) for reviewing snapshots.
* 💄 We added [PostCSS](https://preset-env.cssdb.org/features#stage-3) so you can use new CSS features in old browsers.
* 💎 You can use [Apollo](https://github.com/leoasis/graphql-tag.macro#usage), [Relay Modern](https://github.com/facebook/relay/pull/2171#issuecomment-411459604), [MDX](https://github.com/facebook/create-react-app/issues/5149#issuecomment-425396995), and other third-party [Babel Macros](https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros) transforms.
* 🌠 You can now [import an SVG as a React component](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-svgs), and use it in JSX.
* 🌠 You can now [import an SVG as a React component](https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs), and use it in JSX.
* 🐈 You can try the experimental [Yarn Plug'n'Play mode](https://github.com/yarnpkg/rfcs/pull/101) that removes `node_modules`.
* 🕸 You can now [plug your own proxy implementation](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#configuring-the-proxy-manually) in development to match your backend API.
* 🚀 You can now use [packages written for latest Node versions](https://github.com/sindresorhus/ama/issues/446#issuecomment-281014491) without breaking the build.
Expand Down
4 changes: 2 additions & 2 deletions content/blog/2019-02-06-react-v16.8.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,10 @@ Assuming you already have ESLint installed, run:

```sh
# npm
npm install eslint-plugin-react-hooks@next --save-dev
npm install eslint-plugin-react-hooks --save-dev

# yarn
yarn add eslint-plugin-react-hooks@next --dev
yarn add eslint-plugin-react-hooks --dev
```

Then add it to your ESLint configuration:
Expand Down
2 changes: 1 addition & 1 deletion content/community/articles.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ permalink: community/articles.html
- [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.
- [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's recommended 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.
61 changes: 43 additions & 18 deletions content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,21 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

## Upcoming Conferences {#upcoming-conferences}

### Reactathon 2019 {#reactathon-2019}
March 30-31, 2019 in San Francisco, USA

[Website](https://www.reactathon.com/) - [Twitter](https://twitter.com/reactathon)

### App.js Conf 2019 {#appjs-conf-2019}
April 4-5, 2019 in Kraków, Poland

[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)

### React Amsterdam 2019 {#react-amsterdam-2019}
April 12, 2019 in Amsterdam, The Netherlands
### React Finland 2019 {#react-finland-2019}
April 24-26 in Helsinki, Finland

[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam)
[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)

### ReactJS Girls Conference
### ReactJS Girls Conference {#reactjs-girls-conference}
May 3, 2019 in London, UK

[Website](https://reactjsgirls.com/) - [Twitter](https://twitter.com/reactjsgirls)

### <React.NotAConf /> 2019 {#reactnotaconf--2019}
May 11 in Sofia, Bulgaria

[Website](http://react-not-a-conf.com/) - [Twitter](https://twitter.com/reactnotaconf) - [Facebook](https://www.facebook.com/events/780891358936156)

### ReactEurope 2019 {#reacteurope-2019}
May 23-24, 2019 in Paris, France

Expand All @@ -52,12 +47,12 @@ June 21, 2019 Chicago, Illinois USA

[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)

### Chain React 2019
### Chain React 2019 {#chain-react-2019}
July 11-12, 2019. Portland, OR, USA.

[Website](https://infinite.red/ChainReactConf)

### React Rally 2019
### React Rally 2019 {#react-rally-2019}
August 22-23, 2019. Salt Lake City, USA.

[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
Expand All @@ -77,6 +72,11 @@ September 13th, 2019. New York, USA

[Website](https://reactnewyork.com/) - [Twitter](https://twitter.com/reactnewyork)

### React Boston 2019 {#react-boston-2019}
September 21-22, 2019 in Boston, Massachusetts USA

[Website](https://www.reactboston.com/) - [Twitter](https://twitter.com/reactboston)

### React India 2019 {#react-india-2019}
September 26-28, 2019 in Goa, India

Expand All @@ -87,6 +87,16 @@ September 26-28, 2019 in Alicante, Spain

[Website](http://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) - [Facebook](https://www.facebook.com/ReactAlicante)

### React Advanced 2019 {#react-advanced-2019}
October 25, 2019 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 Day Berlin 2019 {#react-day-berlin-2019}
December 6, 2019 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 Expand Up @@ -114,7 +124,7 @@ February 22 & 23 in San Francisco, CA
### React Amsterdam 2016 {#react-amsterdam-2016}
April 16 in Amsterdam, The Netherlands

[Website](https://react.amsterdam/2016) - [Videos](https://youtu.be/sXDZBxbRRag?list=PLNBNS7NRGKMG3uLrm5fgY02hJ87Wzb4IU)
[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)

### ReactEurope 2016 {#reacteurope-2016}
June 2 & 3 in Paris, France
Expand Down Expand Up @@ -164,7 +174,7 @@ March 28th at the [QEII Centre, London](http://qeiicentre.london/)
### React Amsterdam 2017 {#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) - [Videos](https://youtube.com/c/ReactConferences)

### ReactEurope 2017 {#reacteurope-2017}
May 18th & 19th in Paris, France
Expand Down Expand Up @@ -360,3 +370,18 @@ November 30, Berlin, Germany
January 31, 2019 in Tehran, Iran

[Website](http://reactiran.com) - [Instagram](https://www.instagram.com/reactiran/)

### Reactathon 2019 {#reactathon-2019}
March 30-31, 2019 in San Francisco, USA

[Website](https://www.reactathon.com/) - [Twitter](https://twitter.com/reactathon)

### App.js Conf 2019 {#appjs-conf-2019}
April 4-5, 2019 in Kraków, Poland

[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)

### React Amsterdam 2019 {#react-amsterdam-2019}
April 12, 2019 in Amsterdam, The Netherlands

[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://youtube.com/c/ReactConferences)
4 changes: 2 additions & 2 deletions content/community/nav.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
- title: Community Resources
- title: Nguồn cộng đồng
items:
- id: support
title: Support
Expand All @@ -18,7 +18,7 @@
title: Videos
- id: external-resources
title: External Resources
- title: Tools
- title: Công cụ
items:
- id: debugging-tools
title: Debugging
Expand Down
2 changes: 1 addition & 1 deletion content/docs/add-react-to-a-website.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ return (

These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries.

You can play with JSX using [this online converter](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
You can play with JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3).

### Quickly Try JSX {#quickly-try-jsx}

Expand Down
2 changes: 1 addition & 1 deletion content/docs/addons-shallow-compare.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ category: Reference

> Note:
>
> `shallowCompare` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
> `shallowCompare` is a legacy add-on. Use [`React.memo`](/docs/react-api.html#reactmemo) or [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
**Importing**

Expand Down
4 changes: 2 additions & 2 deletions content/docs/create-a-new-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ npm start
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.

When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app--) and the [User Guide](https://facebook.github.io/create-react-app/).

### Next.js {#nextjs}

Expand All @@ -69,7 +69,7 @@ Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [ga

### More Flexible Toolchains {#more-flexible-toolchains}

The following toolchains offer more flexiblity and choice. We recommend them to more experienced users:
The following toolchains offer more flexibility and choice. We recommend them to more experienced users:

- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/).

Expand Down
18 changes: 9 additions & 9 deletions content/docs/faq-ajax.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
id: faq-ajax
title: AJAX and APIs
title: AJAX APIs
permalink: docs/faq-ajax.html
layout: docs
category: FAQ
---

### How can I make an AJAX call? {#how-can-i-make-an-ajax-call}
### Làm như nào để gọi AJAX ? {#how-can-i-make-an-ajax-call}

You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
Bạn có thể sử dụng bất kỳ thư viện AJAX nào bạn thích với React. Một số thư viện phổ biến như [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), và trình duyệt tích hợp sẵn [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

### Where in the component lifecycle should I make an AJAX call? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
### Nên gọi AJAX ở đâu trong vòng đời component ? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}

You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved.
Bạn nên gọi AJAX ở componentDidMount của các phương thức vòng đời [`componentDidMount`](/docs/react-component.html#mounting). Điều này để bạn có thể sử dụng `setState` để cập nhật component khi có dữ liệu được lấy.
<!-- ### Ví dụ: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state} -->
### Ví dụ: Sử dụng dữ liệu của AJAX xét vào state {#example-using-ajax-results-to-set-local-state}

### Example: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state}
Component dưới đây thể hiện cách thực hiện gọi AJAX trong `componentDidMount` để xét dữ liệu vào state.

The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state.

The example API returns a JSON object like this:
Ví dụ API trả về một object JSON như sau:

```
{
Expand Down
18 changes: 9 additions & 9 deletions content/docs/faq-build.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
---
id: faq-build
title: Babel, JSX, and Build Steps
title: Babel, JSX, và từng bước xây dựng
permalink: docs/faq-build.html
layout: docs
category: FAQ
---

### Do I need to use JSX with React? {#do-i-need-to-use-jsx-with-react}
### Tôi có cần phải sử dụng JSX với React không? {#do-i-need-to-use-jsx-with-react}

No! Check out ["React Without JSX"](/docs/react-without-jsx.html) to learn more.
Không! Hãy xem thử ["React không dùng JSX"](/docs/react-without-jsx.html) để hiểu thêm.

### Do I need to use ES6 (+) with React? {#do-i-need-to-use-es6--with-react}
### Tôi có cần phải sử dụng ES6 (+) với React? {#do-i-need-to-use-es6--with-react}

No! Check out ["React Without ES6"](/docs/react-without-es6.html) to learn more.
Không! Hãy xem thử ["React không dùng ES6"](/docs/react-without-es6.html) để hiểu thêm.

### How can I write comments in JSX? {#how-can-i-write-comments-in-jsx}
### Làm như nào để tôi viết comment trong JSX ? {#how-can-i-write-comments-in-jsx}

```jsx
<div>
{/* Comment goes here */}
{/* Comment ở đây */}
Hello, {name}!
</div>
```

```jsx
<div>
{/* It also works
for multi-line comments. */}
{/* Nó cũng hoạt động
cho nhiều dòng comments. */}
Hello, {name}!
</div>
```
20 changes: 10 additions & 10 deletions content/docs/faq-styling.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
id: faq-styling
title: Styling and CSS
title: Styling CSS
permalink: docs/faq-styling.html
layout: docs
category: FAQ
---

### How do I add CSS classes to components? {#how-do-i-add-css-classes-to-components}
### Làm thế nào tôi chèn class CSS cho components? {#how-do-i-add-css-classes-to-components}

Pass a string as the `className` prop:
Truyền tên của class cho prop là `className`:

```jsx
render() {
Expand All @@ -32,20 +32,20 @@ render() {
>
>If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames#usage-with-reactjs) package can simplify it.
### Can I use inline styles? {#can-i-use-inline-styles}
### Tôi có dùng được inline styles? {#can-i-use-inline-styles}

Yes, see the docs on styling [here](/docs/dom-elements.html#style).
Có, xem tài liệu styling tại [đây](/docs/dom-elements.html#style).

### Are inline styles bad? {#are-inline-styles-bad}
### Viết inline styles xấu? {#are-inline-styles-bad}

CSS classes are generally better for performance than inline styles.
Các class CSS thường sẽ có hiệu xuất tốt hơn là inline styles.

### What is CSS-in-JS? {#what-is-css-in-js}
### CSS-in-JS là gì? {#what-is-css-in-js}

"CSS-in-JS" refers to a pattern where CSS is composed using JavaScript instead of defined in external files. Read a comparison of CSS-in-JS libraries [here](https://github.com/MicheleBertoli/css-in-js).

_Note that this functionality is not a part of React, but provided by third-party libraries._ React does not have an opinion about how styles are defined; if in doubt, a good starting point is to define your styles in a separate `*.css` file as usual and refer to them using [`className`](/docs/dom-elements.html#classname).

### Can I do animations in React? {#can-i-do-animations-in-react}
### Tôi có thể dùng animations trong React? {#can-i-do-animations-in-react}

React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example.
React có thể sử dụng animations rất tốt. Xem ví dụ [React Transition Group](https://reactcommunity.org/react-transition-group/) [React Motion](https://github.com/chenglou/react-motion).
4 changes: 2 additions & 2 deletions content/docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ Sometimes people find third-party books and video courses more helpful than the

### Advanced Concepts {#advanced-concepts}

Once you're comfortable with the [main concepts](#main-concepts) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html).
Once you're comfortable with the [main concepts](/docs/hello-world.html) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html).

### API Reference {#api-reference}

Expand All @@ -115,7 +115,7 @@ The [React blog](/blog/) is the official source for the updates from the React t

You can also follow the [@reactjs account](https://twitter.com/reactjs) on Twitter, but you won't miss anything essential if you only read the blog.

Not every React release deserves its own blog post, but you can find a detailed changelog for every release [in the `CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react) page.
Not every React release deserves its own blog post, but you can find a detailed changelog for every release [in the `CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react/releases) page.

## Versioned Documentation {#versioned-documentation}

Expand Down
Loading

0 comments on commit 452c116

Please sign in to comment.