|
1 |
| ---- |
2 |
| -title: Installation |
3 |
| ---- |
4 |
| - |
5 |
| -<Intro> |
6 |
| - |
7 |
| -React has been designed from the start for gradual adoption. You can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to an HTML page, or start a complex React-powered app, this section will help you get started. |
8 |
| - |
9 |
| -</Intro> |
10 |
| - |
11 |
| -<YouWillLearn isChapter={true}> |
12 |
| - |
13 |
| -* [How to start a new React project](/learn/start-a-new-react-project) |
14 |
| -* [How to add React to an existing project](/learn/add-react-to-an-existing-project) |
15 |
| -* [How to set up your editor](/learn/editor-setup) |
16 |
| -* [How to install React Developer Tools](/learn/react-developer-tools) |
17 |
| - |
18 |
| -</YouWillLearn> |
19 |
| - |
20 |
| -## Try React {/*try-react*/} |
21 |
| - |
22 |
| -You don't need to install anything to play with React. Try editing this sandbox! |
23 |
| - |
24 |
| -<Sandpack> |
25 |
| - |
26 |
| -```js |
27 |
| -function Greeting({ name }) { |
28 |
| - return <h1>Hello, {name}</h1>; |
29 |
| -} |
30 |
| - |
31 |
| -export default function App() { |
32 |
| - return <Greeting name="world" /> |
33 |
| -} |
34 |
| -``` |
35 |
| - |
36 |
| -</Sandpack> |
37 |
| - |
38 |
| -You can edit it directly or open it in a new tab by pressing the "Fork" button in the upper right corner. |
39 |
| - |
40 |
| -Most pages in the React documentation contain sandboxes like this. Outside of the React documentation, there are many online sandboxes that support React: for example, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), or [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) |
41 |
| - |
42 |
| -### Try React locally {/*try-react-locally*/} |
43 |
| - |
44 |
| -To try React locally on your computer, [download this HTML page.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Open it in your editor and in your browser! |
45 |
| - |
46 |
| -## Start a new React project {/*start-a-new-react-project*/} |
47 |
| - |
48 |
| -If you want to build an app or a website fully with React, [start a new React project.](/learn/start-a-new-react-project) |
49 |
| - |
50 |
| -## Add React to an existing project {/*add-react-to-an-existing-project*/} |
51 |
| - |
52 |
| -If want to try using React in your existing app or a website, [add React to an existing project.](/learn/add-react-to-an-existing-project) |
53 |
| - |
54 |
| -## Next steps {/*next-steps*/} |
55 |
| - |
56 |
| -Head to the [Quick Start](/learn) guide for a tour of the most important React concepts you will encounter every day. |
57 |
| - |
| 1 | +--- |
| 2 | +title: Установка |
| 3 | +--- |
| 4 | + |
| 5 | +<Intro> |
| 6 | + |
| 7 | +React изначально был спроектирован так, чтобы его можно было внедрять постепенно. Другими словами, вы можете начать с малого и использовать только ту функциональность React, которая необходима вам в данный момент. Информация в этом разделе будет полезна в любой ситуации: при первом знакомстве с React, при создании простой динамической HTML-страницы и даже при проектировании сложного React-приложения. |
| 8 | + |
| 9 | + |
| 10 | +</Intro> |
| 11 | + |
| 12 | +<YouWillLearn isChapter={true}> |
| 13 | + |
| 14 | +* [Как создать новый React проект](/learn/start-a-new-react-project) |
| 15 | +* [Как добавить React в уже существующий проект](/learn/add-react-to-an-existing-project) |
| 16 | +* [Как настроить редактор кода](/learn/editor-setup) |
| 17 | +* [Как установить React Developer Tools](/learn/react-developer-tools) |
| 18 | + |
| 19 | +</YouWillLearn> |
| 20 | + |
| 21 | +## Пробуем React {/*try-react*/} |
| 22 | + |
| 23 | +Чтобы попробовать React даже устанавливать ничего не нужно. Редактируйте прямо в песочнице! |
| 24 | + |
| 25 | +<Sandpack> |
| 26 | + |
| 27 | +```js |
| 28 | +function Greeting({ name }) { |
| 29 | + return <h1>Hello, {name}</h1>; |
| 30 | +} |
| 31 | + |
| 32 | +export default function App() { |
| 33 | + return <Greeting name="world" /> |
| 34 | +} |
| 35 | +``` |
| 36 | + |
| 37 | +</Sandpack> |
| 38 | + |
| 39 | +Вы можете редактировать прямо здесь или же открыть код в новой вкладке, нажав на кнопку "Форкнуть" в правом верхнем углу. |
| 40 | + |
| 41 | +Такие песочницы есть на большинстве страниц React документации. За пределами React документации тоже есть большое количество песочниц, поддерживающих React. Например: [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react) или [CodePen.](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb) |
| 42 | + |
| 43 | +### Поиграть с React локально {/*try-react-locally*/} |
| 44 | + |
| 45 | +Что бы поиграть с React локально на вашем компьютере, [скачайте эту HTML страницу.](https://gist.githubusercontent.com/gaearon/0275b1e1518599bbeafcde4722e79ed1/raw/db72dcbf3384ee1708c4a07d3be79860db04bff0/example.html) Откройте ее в своем текстовом редакторе и браузере! |
| 46 | + |
| 47 | +## Начать новый React проект {/*start-a-new-react-project*/} |
| 48 | + |
| 49 | +Если вы хотите создать приложение или сайт полностью на React — [создайте новый React проект.](/learn/start-a-new-react-project) |
| 50 | + |
| 51 | +## Добавить React в уже существующий проект {/*add-react-to-an-existing-project*/} |
| 52 | + |
| 53 | +Если вы хотите использовать React в уже существующем приложении или сайте — [добавьте React в уже существующий проект.](/learn/add-react-to-an-existing-project) |
| 54 | + |
| 55 | +## Дальнейшие шаги {/*next-steps*/} |
| 56 | + |
| 57 | +Перейдите к [Введению в React](/learn) для ознакомления с самыми важными его концепциями. |
| 58 | + |
0 commit comments