Fixed several translations mistake. (#21606)
This commit is contained in:
Anton Boyko
committed by
Gregory Gubarev
Gregory Gubarev
parent
982799a97b
commit
71e672ee7d
@ -1,67 +1,67 @@
|
||||
---
|
||||
title: Hello World
|
||||
localeTitle: Привет мир
|
||||
---
|
||||
## Привет, мир !!
|
||||
|
||||
Каждое изучение языка начинается с традиционного примера Hello World. Здесь вы познакомитесь с React с той же программой HelloWorld.
|
||||
|
||||
Все в реактиве - это компонент.
|
||||
|
||||
Но перед этим нам нужно убедиться, что на компьютере установлены узлы.js и npm. По желанию мы можем использовать CRA (Create React App), который является инструментом, созданным разработчиками в Facebook, чтобы помочь вам создавать приложения React. Это избавит вас от длительной настройки и конфигурации. Вы просто запускаете одну команду и создаете приложение для реагирования, устанавливая инструменты, необходимые для запуска проекта React.
|
||||
|
||||
Мы можем установить его с помощью следующих команд:
|
||||
```
|
||||
npm install -g create-react-app
|
||||
|
||||
create-react-app my-app
|
||||
|
||||
cd my-app
|
||||
npm start
|
||||
```
|
||||
|
||||
Командная строка должна предоставить вам выход, где вы можете найти приложение в браузере. Значение по умолчанию должно быть localhost: 8080. Если вы используете только IE или Edge на своей машине Windows, я могу порекомендовать вам также установить Chrome, чтобы получить доступ к среде разработчика и инструментам разработки React, которые доступны в качестве расширения Chrome.
|
||||
|
||||
|
||||
|
||||
#### SRC / App.js
|
||||
|
||||
скопируйте приведенный ниже код и вставьте его в src / App.js
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
|
||||
class App extends React.Component{
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
<p>Hello World !!</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
Если мы проверим файл index.js в папке src, мы обнаружим, что вышеуказанный App.js вызывается в index.js, а затем отображается.
|
||||
|
||||
```javascript
|
||||
// Other code
|
||||
import App from './App'; // The App component is imported
|
||||
|
||||
// Other code
|
||||
ReactDOM.render(<App />,
|
||||
document.getElementById('root')); //The <App /> is the way components are called in react after importing them
|
||||
|
||||
// Other code
|
||||
```
|
||||
|
||||
В приведенном выше примере App.js называется компонентом. Обычно мы создаем несколько компонентов и складываем их в App.js, которые затем будут отображаться в index.js, который затем отображается в корневом div, который находится в index.html.
|
||||
|
||||
Поздравляю! Вы создали свое первое приложение React Hello world. Вы узнаете больше о Реактировании в следующих статьях.
|
||||
|
||||
---
|
||||
## Hello World!!
|
||||
|
||||
Каждое изучение языка начинается с традиционного примера Hello World. Здесь вы познакомитесь с React с той же программой HelloWorld.
|
||||
|
||||
Все в React - это компонент.
|
||||
|
||||
Но перед этим нам нужно убедиться, что на компьютере установлены node.js и npm. По желанию мы можем использовать CRA (Create React App), который является инструментом, созданным разработчиками в Facebook, чтобы помочь вам создавать React приложения. Это избавит вас от длительной настройки и конфигурации. Вы просто запускаете одну команду и create-react-app устанавливая инструменты, необходимые для запуска проекта React.
|
||||
|
||||
Мы можем установить его с помощью следующих команд:
|
||||
```
|
||||
npm install -g create-react-app
|
||||
|
||||
create-react-app my-app
|
||||
|
||||
cd my-app
|
||||
npm start
|
||||
```
|
||||
|
||||
Командная строка должна предоставить вам выход, где вы можете найти приложение в браузере. Значение по умолчанию должно быть localhost:8080. Если вы используете только IE или Edge на своей машине Windows, я могу порекомендовать вам также установить Chrome, чтобы получить доступ к среде разработчика и инструментам разработки React, которые доступны в качестве расширения Chrome.
|
||||
|
||||
|
||||
|
||||
#### SRC / App.js
|
||||
|
||||
скопируйте приведенный ниже код и вставьте его в src / App.js
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
|
||||
class App extends React.Component{
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div>
|
||||
<p>Hello World !!</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
Если мы проверим файл index.js в папке src, мы обнаружим, что вышеуказанный App.js вызывается в index.js, а затем отображается.
|
||||
|
||||
```javascript
|
||||
// Other code
|
||||
import App from './App'; // The App component is imported
|
||||
|
||||
// Other code
|
||||
ReactDOM.render(<App />,
|
||||
document.getElementById('root')); //The <App /> is the way components are called in react after importing them
|
||||
|
||||
// Other code
|
||||
```
|
||||
|
||||
В приведенном выше примере App.js называется компонентом. Обычно мы создаем несколько компонентов и складываем их в App.js, которые затем будут отображаться в index.js, который затем отображается в корневом div, который находится в index.html.
|
||||
|
||||
Поздравляю! Вы создали свое первое приложение React Hello world. Вы узнаете больше о React в следующих статьях.
|
||||
|
||||
Веселого кодинга!
|
||||
|
||||
Reference in New Issue
Block a user