Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Sync with reactjs.org @ 95e15d06 #235

Closed
wants to merge 12 commits into from
73 changes: 73 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<<<<<<< HEAD
<h1 dir="rtl">نسخه فارسی <a href="https://reactjs.org/">reactjs.org</a></h1>

<p dir="rtl">
Expand Down Expand Up @@ -140,3 +141,75 @@ yarn dev
<p dir="rtl">
محتوایی که در <a href="https://reactjs.org/">reactjs.org</a> قرار می‌گیرد، تخت مجوز CC-BY-4.0 منتشر می‌شود که جزئیات آن در <a href="https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md">LICENSE-DOCS.md</a> آمده‌است.
</p>
=======
# reactjs.org

This repo contains the source code and documentation powering [reactjs.org](https://reactjs.org/).

## Getting started

### Prerequisites

1. Git
1. Node: any 12.x version starting with v12.0.0 or greater
1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
1. A fork of the repo (for any contributions)
1. A clone of the [reactjs.org repo](https://github.com/reactjs/reactjs.org) on your local machine

### Installation

1. `cd reactjs.org` to go into the project root
1. `yarn` to install the website's npm dependencies

### Running locally

1. `yarn dev` to start the hot-reloading development server (powered by [Gatsby](https://www.gatsbyjs.org))
1. `open http://localhost:8000` to open the site in your favorite browser

## Contributing

### Guidelines

The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/reactjs.org/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections.

### Create a branch

1. `git checkout main` from any folder in your local `reactjs.org` repository
1. `git pull origin main` to ensure you have the latest main code
1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch

### Make the change

1. Follow the ["Running locally"](#running-locally) instructions
1. Save the files and check in the browser
1. Changes to React components in `src` will hot-reload
1. Changes to markdown files in `content` will hot-reload
1. If working with plugins, you may need to remove the `.cache` directory and restart the server

### Test the change

1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
1. Run `yarn check-all` from the project root. (This will run Prettier, ESLint, and Flow.)

### Push it

1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes
1. `git push my-fork-name the-name-of-my-branch`
1. Go to the [reactjs.org repo](https://github.com/reactjs/reactjs.org) and you should see recently pushed branches.
1. Follow GitHub's instructions.
1. If possible, include screenshots of visual changes. A [Netlify](https://www.netlify.com/) build will also be automatically created once you make your PR so other people can see your change.

## Translation

If you are interested in translating `reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).


If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#translating-reactjsorg).

## Troubleshooting

- `yarn reset` to clear the local cache

## License
Content submitted to [reactjs.org](https://reactjs.org/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/open-source-explorer/reactjs.org/blob/master/LICENSE-DOCS.md) file.
>>>>>>> 95e15d063b205007a92c52efb5311f76ad5a0b6c
2 changes: 1 addition & 1 deletion content/blog/2013-07-03-community-roundup-4.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,5 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun

[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.

> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/main/src/snake.js)
> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
> <figure><a href="https://tomocchino.github.io/react-snake/"><img src="../images/blog/snake.png"></a></figure>
2 changes: 1 addition & 1 deletion content/blog/2013-08-05-community-roundup-6.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.
]
```

[Check it out on GitHub...](https://github.com/steida/este-library/blob/main/este/demos/thirdparty/react/start.coffee)
[Check it out on GitHub...](https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee)


## React Stylus Boilerplate {#react-stylus-boilerplate}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,4 +52,4 @@ Alternatively, add it into your `requirements` file:

**Dependencies**: PyReact uses [PyExecJS](https://github.com/doloopwhile/PyExecJS) to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend [PyV8](https://code.google.com/p/pyv8/).

For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/main/CONTRIBUTING.md)!
For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md)!
4 changes: 2 additions & 2 deletions content/blog/2013-08-26-community-roundup-7.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ It's been three months since we open sourced React and it is going well. Some st

## Wolfenstein Rendering Engine Ported to React {#wolfenstein-rendering-engine-ported-to-react}

[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/main/js/renderer.js#L183) file for the implementation.
[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183) file for the implementation.
<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="../images/blog/wolfenstein_react.png"></a></figure>


## React & Meteor {#react--meteor}

[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/main/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.
[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.

> This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.
>
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2013-11-06-community-roundup-10.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ The best part is that no drastic changes have been required to support all those

## TodoMVC Benchmarks {#todomvc-benchmarks}

Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/main/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):
Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):

- **AngularJS:** 4043ms
- **AngularJSPerf:** 3227ms
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2014-02-05-community-roundup-15.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ Fredrik Dyrkell ([@lexicallyscoped](https://twitter.com/lexicallyscoped)) rewrot

In a separate post, Dyrkell breaks down [how to build a binary clock component](http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html) in Om.

[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/main/src/binclock/core.cljs)]
[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]

### Time Travel: Implementing undo in Om {#time-travel-implementing-undo-in-om}
David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2014-04-04-reactnet.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ ReactJS.NET is packaged in NuGet. Simply run `Install-Package React.Mvc4` in the
package manager console or search NuGet for "React" to install it.
[See the documentation](http://reactjs.net/docs) for more information. The
GitHub project contains
[a sample website](https://github.com/reactjs/React.NET/tree/main/src/React.Sample.Mvc4)
[a sample website](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4)
demonstrating all of the features.

Let us know what you think, and feel free to send through any feedback and
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2014-05-06-flux.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@ In Flux, the Dispatcher is a singleton that directs the flow of data and ensures

When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.

Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/main/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
2 changes: 1 addition & 1 deletion content/blog/2014-06-27-community-roundup-19.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The core concepts React themselves is something very valuable that the community

<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>

And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/main/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.

[![](../images/blog/wolfenstein_react.png)](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)

Expand Down
4 changes: 2 additions & 2 deletions content/blog/2014-07-30-flux-actions-and-the-dispatcher.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: "Flux: Actions and the Dispatcher"
author: [fisherwebdev]
---

Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/main/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).

Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](https://facebook.github.io/flux/), we've now open sourced the same [dispatcher](https://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.

Expand Down Expand Up @@ -41,6 +41,6 @@ Problems arise, however, if we have circular dependencies. That is, if Store A n
Example Chat App
----------------

Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/main/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.
Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/master/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.

We're hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!
6 changes: 3 additions & 3 deletions content/blog/2014-09-24-testing-flux-applications.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ author: [fisherwebdev]
Testing with Jest
-----------------

For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/main/examples/flux-todomvc).
For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/master/examples/flux-todomvc).

The first steps toward working with Jest are as follows:

Expand Down Expand Up @@ -154,7 +154,7 @@ describe('TodoStore', function() {
});
```

You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/main/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well.
You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well.


Mocking Data Derived from Other Stores
Expand All @@ -178,7 +178,7 @@ MyOtherStore.getState.mockReturnValue({

Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store's registered callback.

A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/main/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).

For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](https://facebook.github.io/jest/docs/mock-functions.html).

Expand Down
2 changes: 1 addition & 1 deletion content/blog/2015-09-10-react-v0.14-rc1.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ These builds are also available in the `react` package on bower.
ReactDOM.render(<MyComponent />, node);
```

We’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/main/README.md) we used at Facebook to help you with this transition.
We’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.

The add-ons have moved to separate packages as well: `react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.

Expand Down
Loading