From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../react_getting_started/index.html | 42 +++++++++++----------- 1 file changed, 21 insertions(+), 21 deletions(-) (limited to 'files/ru/learn/tools_and_testing') diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html index e40dfd08dd..df7473673e 100644 --- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html +++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html @@ -53,13 +53,13 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв

React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:

-
const heading = <h1>Mozilla Developer Network</h1>;
+
const heading = <h1>Mozilla Developer Network</h1>;

This heading constant is known as a JSX expression. React can use it to render that <h1> tag in our app.

Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:

-
const header = (
+
const header = (
   <header>
     <h1>Mozilla Developer Network</h1>
   </header>
@@ -68,7 +68,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв
 

 
Note: The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:

 
-
const header = <header>
+
const header = <header>
     <h1>Mozilla Developer Network</h1>
 </header>

 
@@ -77,7 +77,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв
 
 
Of course, your browser can't read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:

 
-
const header = React.createElement("header", null,
+
const header = React.createElement("header", null,
   React.createElement("h1", null, "Mozilla Developer Network")
 );

 
@@ -115,7 +115,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв
 
 
create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you cd to the place you'd like your app to live on your hard drive, then run the following in your terminal:

 
-
npx create-react-app moz-todo-react

+
npx create-react-app moz-todo-react

 
 
This creates a moz-todo-react directory, and does several things inside it:

 
@@ -129,7 +129,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв
 

 
Note: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag --use-npm when you run create-react-app:

 
-
npx create-react-app moz-todo-react --use-npm

+
npx create-react-app moz-todo-react --use-npm

 

 
 
create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.

@@ -142,7 +142,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв
 
 
create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:

 
-
moz-todo-react
+
moz-todo-react
 ├── README.md
 ├── node_modules
 ├── package.json
@@ -175,7 +175,7 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв
 
 
Let's open src/App.js, since our browser is prompting us to edit it. This file contains our first component, App, and a few other lines of code:

 
-
import React from 'react';
+
import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
@@ -207,7 +207,7 @@ export default App;

 
 
The import statements at the top of the file allow App.js to use code that has been defined elsewhere. Let's look at these statements more closely.

 
-
import React from 'react';
+
import React from 'react';
 import logo from './logo.svg';
 import './App.css';

 
@@ -225,7 +225,7 @@ import './App.css';

 
 
Let's look at App more closely.

 
-
function App() {
+
function App() {
   return (
     <div className="App">
       <header className="App-header">
@@ -254,7 +254,7 @@ import './App.css';

 
 
Your App component should now look like this:

 
-
function App() {
+
function App() {
   return (
     <div className="App">
       <header className="App-header">
@@ -275,7 +275,7 @@ import './App.css';

 
 
Let’s open src/index.js, because that's where the App component is being used. This file is the entry point for our app, and it initially looks like this:

 
-
import React from 'react';
+
import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
@@ -307,7 +307,7 @@ serviceWorker.unregister();

 
 
Your final index.js file should look like this:

 
-
import React from 'react';
+
import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
@@ -322,13 +322,13 @@ ReactDOM.render(<App />, document.getElementById('root'));

 
 
Back in App.js, let’s focus on line 9:

 
-
<img src={logo} className="App-logo" alt="logo" />

+
<img src={logo} className="App-logo" alt="logo" />

 
 
Here, the <img /> tag's src attribute value is in curly braces. This is how JSX recognizes variables. React will see {logo}, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.

 
 
Let's try making a variable of our own. Before the return statement of App, add const subject = 'React';. Your App component should now look like this:

 
-
function App() {
+
function App() {
   const subject = "React";
   return (
     <div className="App">
@@ -344,7 +344,7 @@ ReactDOM.render(<App />, document.getElementById('root'));

 
 
Change line 8 to use our subject variable instead of the word "world", like this:

 
-
function App() {
+
function App() {
   const subject = "React";
   return (
     <div className="App">
@@ -368,11 +368,11 @@ ReactDOM.render(<App />, document.getElementById('root'));

 
 
Add a prop of subject to the <App/> component call, with a value of Clarice. When you are done, your code should look something like this:

 
-
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));

+
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));

 
 
Back in App.js, let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):

 
-
function App() {
+
function App() {
   const subject = "React";
   return (
     // return statement
@@ -381,7 +381,7 @@ ReactDOM.render(<App />, document.getElementById('root'));

 
 
Change the signature of the App function so that it accepts props as a parameter. Just like any other parameter, you can put props in a console.log() to read it out to your browser's console. Go ahead and do that after your subject constant but before the return statement, like so:

 
-
function App(props) {
+
function App(props) {
   const subject = "React";
   console.log(props);
   return (
@@ -391,13 +391,13 @@ ReactDOM.render(<App />, document.getElementById('root'));

 
 
Save your file and check your browser's JavaScript console. You should see something like this logged:

 
-
Object { subject: "Clarice" }

+
Object { subject: "Clarice" }

 
 
The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.

 
 
Now that subject is one of our props, let's utilize it in App.js. Change the subject constant so that, instead of defining it as the string React, you are reading the value of props.subject. You can also delete your console.log() if you want.

 
-
function App(props) {
+
function App(props) {
   const subject = props.subject;
   return (
     // return statement
-- 
cgit v1.2.3-54-g00ecf