gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

docs: update Russian translation for the whole React guide (#23636)

Browse Source 
* docs: update translation for React guide in Russian

* fix: removed extra line before frontmatter block

* fix: removed extra line in frontmatter block

* fix: corrected frontmatter block

* fix: corrected localeTitle in frontmatter block

* Update index.md

* fix: corrected localeTitle for Installation

* Update index.md

* Update index.md
This commit is contained in:
Egor
2018-11-22 19:49:48 +01:00
committed by Gregory Gubarev
parent a489ac9df8
commit 346b0a7ce1
23 changed files with 698 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
guide/english/react/a-react-environment-using-a-remote-code-repository/index.md
View File

@@ -36,5 +36,7 @@ babel-polyfill is used for older browsers compatibility.
</html>
```
If this code is saved with the html file extension (helloReact.html), it can be opened in a web browser
it will run React and Babel.

154
guide/english/react/life-cycle-methods-of-a-component/index.md
View File

@@ -1,77 +1,77 @@
---
title: Life Cycle Methods Of A Component
---
## Life Cycle Methods Of A Component
When we start working with components, we need to perform several actions to update state or to perform some actions when something changes in that component. In this scenario, life-cycle methods of a component comes handy !! So let us dive into them in this article.
Broadly, we can divide the life cycle methods into **3** categories.
1. Mounting
2. Updating
3. Unmounting
As life cycle methods are self explanatory, I'm just going to mention the method names. Please feel free to contribute to this article, if necessary.
## Mounting:
a. `constructor()`
b. `componentWillMount()`
c. `render()`
d. `componentDidMount()`
## Updating:
a. `componentWillReceiveProps()`
b. `shouldComponentUpdate()`
c. `componentWillUpdate()`
d. `render()`
e. `componentDidUpdate()`
## Unmounting:
a. `componentWillUnmount()`
## Some interesting facts to notice:
- `constructor`, `componentWillMount`, `componentDidMount` and `componentWillUnmount` will be called only once during the lifecycle of a component.
- `componentWillUpdate`, and `componentDidUpdate` will only be executed if and only if `shouldComponentUpdate` returns true.
- `componentWillUnmount()`will be called just before unmounting any component and hence can be used to free up the used memory, close any connections to DB, etc.
Many things can be learned by diving into coding. So get your hands dirty by coding.
Note:
> "Deprecation warnings will be enabled with a future 16.x release, **but the legacy lifecycles will continue to work until version 17.**"<sup>1</sup>
> "Even in version 17, it will still be possible to use them, but they will be aliased with an “UNSAFE_” prefix to indicate that they might cause issues. We have also prepared an [automated script to rename them](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) in existing code."<sup>1</sup>
In other words, these previouse lifecycles methods will still be available as:
* `UNSAFE_componentWillMount`
* `UNSAFE_componentWillReceiveProps`
* `UNSAFE_componentWillUpdate`
## New Lifecycle Methods
New lifecycle methods will be introduced in React 17
* `getDerivedStateFromProps` will be a safer alternative to `componentWillReceiveProps`.
* `getSnapshotBeforeUpdate` will be added to support safely reading properties from the DOM updates are made
Many things can be learned by diving into coding. So get your hands dirty by coding.
### Sources
1. [Vaughn, Brian. "React v16.3.0: New lifecycles and context API". March 29, 2018. Accessed: May 22, 2018.](https://reactjs.org/blog/2018/03/29/react-v-16-3.html)
### Resources
[Update on Async Rendering](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
---
title: Life Cycle Methods Of A Component
---
## Life Cycle Methods Of A Component
When we start working with components, we need to perform several actions to update state or to perform some actions when something changes in that component. In this scenario, life-cycle methods of a component comes handy !! So let us dive into them in this article.
Broadly, we can divide the life cycle methods into **3** categories.
1. Mounting
2. Updating
3. Unmounting
As life cycle methods are self explanatory, I'm just going to mention the method names. Please feel free to contribute to this article, if necessary.
## Mounting:
a. `constructor()`
b. `componentWillMount()`
c. `render()`
d. `componentDidMount()`
## Updating:
a. `componentWillReceiveProps()`
b. `shouldComponentUpdate()`
c. `componentWillUpdate()`
d. `render()`
e. `componentDidUpdate()`
## Unmounting:
a. `componentWillUnmount()`
## Some interesting facts to notice:
- `constructor`, `componentWillMount`, `componentDidMount` and `componentWillUnmount` will be called only once during the lifecycle of a component.
- `componentWillUpdate`, and `componentDidUpdate` will only be executed if and only if `shouldComponentUpdate` returns true.
- `componentWillUnmount()`will be called just before unmounting any component and hence can be used to free up the used memory, close any connections to DB, etc.
Many things can be learned by diving into coding. So get your hands dirty by coding.
Note:
> "Deprecation warnings will be enabled with a future 16.x release, **but the legacy lifecycles will continue to work until version 17.**"<sup>1</sup>
> "Even in version 17, it will still be possible to use them, but they will be aliased with an “UNSAFE_” prefix to indicate that they might cause issues. We have also prepared an [automated script to rename them](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) in existing code."<sup>1</sup>
In other words, these previously lifecycle methods will still be available as:
* `UNSAFE_componentWillMount`
* `UNSAFE_componentWillReceiveProps`
* `UNSAFE_componentWillUpdate`
## New Lifecycle Methods
New lifecycle methods will be introduced in React 17
* `getDerivedStateFromProps` will be a safer alternative to `componentWillReceiveProps`.
* `getSnapshotBeforeUpdate` will be added to support safely reading properties from the DOM updates are made
Many things can be learned by diving into coding. So get your hands dirty by coding.
### Sources
1. [Vaughn, Brian. "React v16.3.0: New lifecycles and context API". March 29, 2018. Accessed: May 22, 2018.](https://reactjs.org/blog/2018/03/29/react-v-16-3.html)
### Resources
[Update on Async Rendering](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)

248
guide/english/react/what-are-react-props/index.md
View File

@@ -1,124 +1,124 @@
---
title: React TypeChecking with PropTypes
---
## React PropTypes
These serve as a method of typechecking as an application tends to grow, with this a very big base of bugs tends to be corrected with the use of this feature.
## How to get PropTypes
Starting with React version 15.5 this feature was moved to a separate package named prop-types.
In order to use it, it's required to be added to the project as a dependency by issuing the following command in a console.
```sh
npm install --save prop-types
```
After that, a whole range of validators can be used to make sure the data the developer recieves is actually valid.
When an invalid value is provided a warning will appear in the JavaScript console.
Note that for performance reasons the PropTypes defined are only checked while in development mode.
Also on the contrary of the component state, that can be manipulated as needed, these props are readonly.
It's value cannot be changed by the component.
## Proptypes available
Below is a code example with the different validators provided by the package, and how to inject them in the component.
```javascript
import PropTypes from 'prop-types';
class MyComponent extends Component{
constructor(props){
super(props);
}
render(){
return (
...
);
}
}
MyComponent.propTypes = {
// A prop that is a specific JS primitive. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
// A React element as a PropType
optionalElement: PropTypes.element,
// Declaring that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(AnotherComponent),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(AnotherComponent)
]),
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: PropTypes.func.isRequired,
// A value of any data type
requiredAny: PropTypes.any.isRequired,
};
```
## Setting default values
As a part of this feature it's also possible to define default values for any given component defined while developing.
These make sure that the prop will have a value even if not specified by the parent component.
The code below illustrates how to use this funcionality.
```javascript
import React,{Component} from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component{
constructor(props){
super(props);
}
render(){
return (
<h3>Hello, {this.props.name}</h3>
);
}
}
MyComponent.defaultProps = {
name: 'Stranger'
};
```
For more information about PropTypes and other docs on React.
Go to the [Official Site](https://reactjs.org/) and read the docs, or the [Github Repo](https://github.com/facebook/react/)
---
title: React TypeChecking with PropTypes
---
## React PropTypes
These serve as a method of typechecking as an application tends go grow, with this a very big base of bugs tends to be corrected with the use of this feature.
## How to get PropTypes
Starting with React version 15.5 this feature was moved to a separate package named prop-types.
In order to use it, it's required to be added to the project as a dependency by issuing the following command in a console.
```sh
npm install --save prop-types
```
After that a whole range of validators that can be used to make sure the data the developer is going to recieve is actually valid.
When an invalid value is provided there will be warning appearing in the JavaScript console.
Note that for performance reasons the PropTypes defined are only checked while in development mode.
Also on the contrary of the component state, that can be manipulated as needed, these props are readonly.
It's value cannot be changed by the component.
## PropTypes available
Bellow is a code example with the different validators provided by the package, and how to inject them in the component.
```javascript
import PropTypes from 'prop-types';
class MyComponent extends Component{
constructor(props){
super(props);
}
render(){
return (
...
);
}
}
MyComponent.propTypes = {
// A prop that is a specific JS primitive. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol,
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,
// A React element as a PropType
optionalElement: PropTypes.element,
// Declaring that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(AnotherComponent),
// You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
// An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(AnotherComponent)
]),
// An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
// An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
// An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}),
// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: PropTypes.func.isRequired,
// A value of any data type
requiredAny: PropTypes.any.isRequired,
};
```
## Setting default values
As a part of this feature it's also possible to define default values for any given component defined while developing.
These make sure that the prop will have a value even if not specified by the parent component.
The code bellow ilustrates how to use this funcionality.
```javascript
import React,{Component} from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component{
constructor(props){
super(props);
}
render(){
return (
<h3>Hello, {this.props.name}</h3>
);
}
}
MyComponent.defaultProps = {
name: 'Stranger'
};
```
For more information about PropTypes and other docs on React.
Go to the [Official Site](https://reactjs.org/) and read the docs, or the [Github Repo](https://github.com/facebook/react/)