diff --git a/guide/english/react/a-react-environment-using-a-remote-code-repository/index.md b/guide/english/react/a-react-environment-using-a-remote-code-repository/index.md index 3cbe126f4a..d9af808623 100644 --- a/guide/english/react/a-react-environment-using-a-remote-code-repository/index.md +++ b/guide/english/react/a-react-environment-using-a-remote-code-repository/index.md @@ -36,5 +36,7 @@ babel-polyfill is used for older browsers compatibility. ``` + 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. diff --git a/guide/english/react/life-cycle-methods-of-a-component/index.md b/guide/english/react/life-cycle-methods-of-a-component/index.md index a3374eca23..ab3cd03724 100644 --- a/guide/english/react/life-cycle-methods-of-a-component/index.md +++ b/guide/english/react/life-cycle-methods-of-a-component/index.md @@ -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.**"1 - -> "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."1 - -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.**"1 + +> "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."1 + +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) diff --git a/guide/english/react/what-are-react-props/index.md b/guide/english/react/what-are-react-props/index.md index 0776d5aef5..f1c7178d80 100644 --- a/guide/english/react/what-are-react-props/index.md +++ b/guide/english/react/what-are-react-props/index.md @@ -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 ( -

Hello, {this.props.name}

- ); - } -} -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 ( +

Hello, {this.props.name}

+ ); + } +} +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/) diff --git a/guide/russian/react/a-react-environment-using-a-remote-code-repository/index.md b/guide/russian/react/a-react-environment-using-a-remote-code-repository/index.md index 046ba11825..8ae7292009 100644 --- a/guide/russian/react/a-react-environment-using-a-remote-code-repository/index.md +++ b/guide/russian/react/a-react-environment-using-a-remote-code-repository/index.md @@ -23,6 +23,7 @@ localeTitle: Среда разработки для React с использов +
... Time to React! - + ``` Вы можете использовать более обновленные версии этих библиотек по мере их выхода. Они не должны создавать никаких изменений для контента, который мы рассматриваем. -Что мы тут делаем? Элемент: HTML ` - + ``` -«Тип» скрипта, который мы используем, мы завершим в кавычки и установим его в `"text/babel"` . Нам понадобится эта возможность сразу использовать Babel, поскольку мы работаем с JSX. Во-первых, мы собираемся оказать React в DOM. Для этого мы будем использовать метод `ReactDOM.render()` . Это будет метод, и помните, что метод - это просто функция, привязанная к объекту. Этот метод будет принимать два аргумента. +«Тип» скрипта, который мы используем, мы заключим в кавычки и установим его в `"text/babel"`. +Нам понадобится эта возможность сразу использовать Babel, поскольку мы работаем с JSX. Во-первых, мы собираемся оказать React в DOM. +Для этого мы будем использовать метод `ReactDOM.render()`. Это будет метод, и помните, что метод - это просто функция, привязанная к объекту. +Этот метод будет принимать два аргумента. ```javascript @@ -159,10 +198,13 @@ html:5 - + ``` -Первый аргумент - это «что» рендерить. Второй аргумент - это «где» место (в DOM) в которое вы хотите это поместить. Начнем с вызова нашего метода ReactDOM.render(). Наш первый аргумент будет нашим JSX. + +Первый аргумент - это «что» реагировать. Второй аргумент - это «где» местоположения, которое вы хотите, чтобы оно было помещено в DOM. +Начнем с вызова нашего метода ReactDOM.render(). Наш первый аргумент будет нашим JSX. + ```javascript @@ -173,17 +215,25 @@ html:5 React Where ); - + ```](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) + [](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)[Официальная документация React гласит](https://reactjs.org/docs/introducing-jsx.html) : «Этот синтаксис смешного тега не является ни строкой, ни HTML. Он называется JSX, и это расширение синтаксиса JavaScript. Мы рекомендуем использовать его с React для описания того, как должен выглядеть пользовательский интерфейс. JSX может напомнить вам о языке шаблонов, но он поставляется с полной мощью JavaScript. JSX создает «элементы» для реагирования ». -Часто JSX удивляет людей, которые были разработчиками на некоторое время, потому что это выглядит как HTML. В очень раннем возрасте разработчики обучаются разграничению проблем. HTML имеет свое место, CSS имеет свое место, и JavaScript имеет свое место. Кажется, что JSX размывает линии. Вы используете то, что выглядит как HTML, но, как говорит Facebook, поставляется с полной мощью JavaScript. -Это может вызывать увлечение ветеранами, так что многие учебники по React начинаются без JSX, что может быть довольно сложным. Мы этого не сделаем. Поскольку этот курс направлен на тех, кто очень молод в своей карьере, вы можете не принести эти красные флаги, когда увидите этот синтаксис. +Часто JSX удивляет людей, которые были разработчиками на некоторое время, потому что это выглядит как HTML. +В очень раннем возрасте разработчики обучаются разграничению проблем. HTML имеет свое место, CSS имеет свое место, и JavaScript имеет свое место. +Кажется, что JSX размывает линии. Вы используете то, что выглядит как HTML, но, как говорит Facebook, поставляется с полной мощью JavaScript. -И JSX просто интуитивно понятен. Возможно, вы довольно легко прочитали этот код и увидите, что это будет самый большой тег заголовка, отображающий текст «Hello World». Никакой тайны и довольно простой. Теперь давайте посмотрим, каков будет наш второй аргумент. + +Это может вызывать увлечение ветеранами, так что многие учебники по React начинаются без JSX, что может быть довольно сложным. +Мы этого не делаем. Поскольку этот курс направлен на тех, кто очень молод в своей карьере, вы не восстаните, когда увидите этот синтаксис. + + +И JSX просто интуитивно понятен. Возможно, вы довольно легко прочитали этот код и увидите, что это будет самый большой тег заголовка, +отображающий текст «Hello World». Никакой тайны и довольно простой. Теперь давайте посмотрим, каков будет наш второй аргумент. ```javascript @@ -194,30 +244,40 @@ html:5 document.getElementById("app") ); - + ``` -Здесь мы хотим, чтобы наш обработанный контент был передан в дом. Вы, наверное, делали это несколько раз в прошлом. Мы просто наберем `document.getElementById()` . И мы перейдем к аргументу id приложения. И это все. Теперь мы настроим таргетинг на div с id приложения, чтобы вставить наш обработанный контент. +Здесь мы хотим, чтобы наш обработанный контент был передан в дом. Вы, наверное, делали это несколько раз в прошлом. +Мы просто наберем `document.getElementById()`. И мы перейдем к аргументу id приложения. И это все. +Теперь мы настроим таргетинг на div с id приложения, чтобы вставить наш обработанный контент. -Мы хотим, чтобы наш контент был сохранен. Идите вперед и откройте это в браузере, и вы увидите «Hello World». Как вы можете догадаться, использование React - это не самый быстрый или лучший способ создать приложение Hello World. Мы пока не видим преимуществ этого. Но теперь мы знаем, что все работает. +Мы хотим, чтобы наш контент был сохранен. Скорее откройте это в браузере, и вы увидите «Hello World». +Как вы можете догадаться, использование React - это не самый быстрый или лучший способ создать приложение Hello World. +Мы пока не видим преимуществ этого. Но теперь мы знаем, что все работает. -Идите вперед и откройте консоль и посмотрите на «элементы». Вы можете сделать это на mac с командой + shift + j или в Windows и Linux: Ctrl + Shift + J +Скорее откройте консоль и посмотрите на «элементы». +Вы можете сделать это на mac с командой + shift + j или в Windows и Linux: Ctrl + Shift + J -Если вы нажмете на тег заголовка, мы увидим наши библиотеки скриптов, которые мы включили. Тогда мы сможем перейти к тексту нашего документа. Давайте нажимаем на наш div с идентификатором «app». И когда мы это делаем, мы видим наш `

` с содержимым «Hello World». +Если мы нажмем на тег заголовка, мы увидим скрипты наших библиотек, которые мы подключили. +Тогда мы сможем перейти к тексту нашего документа. Давайте нажмем на наш div с идентификатором «app». +И когда мы это сделаем, мы увидим наш `

` с содержимым «Hello World». -[Просмотреть весь код здесь](https://github.com/robgmerrill/hello-react/blob/master/section-one/index.html) +[Весь код здесь](https://github.com/robgmerrill/hello-react/blob/master/section-one/index.html) или -[!["Смотреть](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) + -[ +### Итого -### резюмировать +Итак, давайте сделаем краткое описание. В нашем тесте head мы взяли теги скриптов для React, ReactDOM и Babel. +Эти инструменты, в которых наш браузер нуждается в метаданных для чтения нашего кода React и JSX. +Затем мы разместили позицию внутри DOM, которую мы хотели вставить в наш React, создав элемент div с идентификатором «app». +Затем мы создали тег скрипта для ввода нашего кода React. Мы использовали метод ReactDOM.render(), +который принимает два аргумента. «Что» из контента React, в данном случае нашего JSX и второго аргумента - это «где», +в который вы хотите вставить содержимое React в DOM. В этом случае это место с идентификатором «app». -Итак, давайте сделаем краткое описание. В нашем тесте head мы схватили теги скриптов для React, ReactDOM и Babel. Это инструменты, которые наш браузер нуждается в метаданных для чтения нашего кода React и JSX. Затем мы разместили позицию внутри DOM, которую мы хотели вставить в наш React, создав элемент div с идентификатором «app». Затем мы создали тег скрипта для ввода нашего кода React. Мы использовали метод ReactDOM.render (), который принимает два аргумента. «Что» из контента React, в данном случае нашего JSX и второго аргумента - это «где», в которое вы хотите вставить содержимое React в DOM. В этом случае это место с идентификатором «app». - -](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [В качестве альтернативы JSX вы можете использовать компилятор ES6 и Javascript, например, Babel.](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI) [https://babeljs.io/](https://babeljs.io/) @@ -225,8 +285,8 @@ html:5 * [Главная страница](https://reactjs.org/) * [Твиттер Дэн Абрамов](https://twitter.com/dan_abramov) -* [Реагировать на учебники на Egghead.io](https://egghead.io/browse/frameworks/react) +* [Учебники по React на Egghead.io](https://egghead.io/browse/frameworks/react) -### источники +### Источники 1. [«Результаты опроса разработчиков 2017.»](https://insights.stackoverflow.com/survey/2017#technology-most-loved-dreaded-and-wanted-frameworks-libraries-and-other-technologies) _Переполнение стека._ Доступ: 28 октября 2017 года. diff --git a/guide/russian/react/installation/index.md b/guide/russian/react/installation/index.md index 69b8b50303..580f16c8d6 100644 --- a/guide/russian/react/installation/index.md +++ b/guide/russian/react/installation/index.md @@ -6,15 +6,13 @@ localeTitle: Монтаж ### Создание нового проекта React -Вы можете просто вставить библиотеку React на свою веб-страницу так: 2 : +Вы можете просто встроить библиотеку React на свою веб-страницу так как в 2: ```html - ``` Умные программисты хотят использовать более практичный и продуктивный способ: [создать приложение React](https://github.com/facebookincubator/create-react-app) - ```bash npm install -g create-react-app create-react-app my-app @@ -23,16 +21,16 @@ npm install -g create-react-app npm start ``` -Это создаст среду разработки, чтобы вы могли использовать новейшие функции JavaScript, обеспечить хороший опыт разработчиков и оптимизировать свое приложение для производства. +Это создаст среду разработки, чтобы вы могли использовать новейшие функции JavaScript, обеспечит хороший опыт разработчиков и оптимизирует ваше приложение для производства. -`npm start` запустит сервер разработки, который позволяет осуществлять живую перезагрузку 3 . +`npm start` запустит сервер разработки, который позволяет осуществлять live reloading3. -После того, как вы закончите свой проект и готовы развернуть свое приложение на производство, вы можете просто использовать `npm run build` для создания оптимизированной сборки вашего приложения в папке `build` . +После того, как вы закончите свой проект и готовы развернуть свое приложение на production, вы можете просто использовать `npm run build` для создания оптимизированной сборки вашего приложения в папке `build` . #### Полезные ссылки -[Создать репозиторий приложений React](https://github.com/facebookincubator/create-react-app#create-react-app-) +[Создать репозиторий приложения React](https://github.com/facebookincubator/create-react-app#create-react-app-) -#### источники +#### Источники -[1\. Учебное пособие по установке](https://reactjs.org/docs/installation.html) [2\. Ссылка на минимальную библиотеку JavaScript React на cdnjs.org](https://cdnjs.com/libraries/react) [3\. Команда запуска npm](https://docs.npmjs.com/cli/start) \ No newline at end of file +[1\. Учебное пособие по установке](https://reactjs.org/docs/installation.html) [2\. Ссылка на минимизированную библиотеку JavaScript React на cdnjs.org](https://cdnjs.com/libraries/react) [3\. Команда запуска npm](https://docs.npmjs.com/cli/start) diff --git a/guide/russian/react/jsx/index.md b/guide/russian/react/jsx/index.md index fa0b70e295..e2ebc49d36 100644 --- a/guide/russian/react/jsx/index.md +++ b/guide/russian/react/jsx/index.md @@ -6,7 +6,7 @@ localeTitle: JSX > JSX является коротким для JavaScript XML. -JSX - это выражение, которое использует допустимые HTML-инструкции в JavaScript. Вы можете назначить это выражение переменной и использовать ее в другом месте. Вы можете комбинировать другие действующие выражения JavaScript и JSX в этих выражениях HTML, помещая их в фигурные скобки ( `{}` ). Babel далее компилирует JSX в объект типа `React.createElement()` . +JSX - это выражение, которое использует допустимые HTML-инструкции в JavaScript. Вы можете назначить это выражение переменной и использовать ее в другом месте. Вы можете комбинировать другие действующие выражения JavaScript и JSX в этих выражениях HTML, помещая их в фигурные скобки ( `{}` ). Babel, в дальнейшем, скомпилирует JSX в объект типа `React.createElement()` . ### Однострочные и многострочные выражения @@ -27,19 +27,19 @@ const two = ( ); ``` -### Использование только тегов HTML +### Использование только HTML тегов ```jsx const greet =

Hello World!

; ``` -### Объединение выражения JavaScript с тегами HTML +### Объединение выражения JavaScript с HTML тегами Мы можем использовать переменные JavaScript в фигурных скобках. ```jsx const who = "Quincy Larson"; - const greet =

Hello {who}!

; +const greet =

Hello {who}!

; ``` Мы также можем вызвать другие функции JavaScript в фигурных скобках. @@ -47,25 +47,25 @@ const who = "Quincy Larson"; ```jsx function who() { return "World"; - } - const greet =

Hello {who()}!

; +} +const greet =

Hello {who()}!

; ``` -### Разрешен только один родительский тег +### Только один родительский тег разрешен -Выражение JSX должно иметь только один родительский тег. Мы можем добавить несколько тегов, вложенных только в родительский элемент. +Выражение JSX должно иметь только один родительский тег. Мы можем добавить несколько тегов, обязательно вложенных в родительский элемент. ```jsx // This is valid. - const tags = ( +const tags = ( ); - // This is not valid. - const tags = ( +// This is not valid. +const tags = (

Hello World!

This is my special list: