React.js російською мовою. Частина перша

image
Мені дуже подобається концепція і підхід React.js що вирішив зробити переклад офіційної документації React.js на російську мову. В одному пості всі звичайно не поміститися, так що це буде цикл постів.

Для чого я це зробив? Хочеться внести свій внесок в цю бібліотеку і швидше за все цей переклад буде корисний, хто сильно хоче вчити і розвиватися в даному напрямку, але має проблеми з англійською мовою.

Установка
React являє собою багатофункціональну бібліотеку, якою можна користуватися при створенні різних проектів, нових додатків, а також, бібліотеку можна впроваджувати у створені раніше проекти.

Знайомство з React
Якщо ви хочете просто ознайомитися з бібліотекою, ви можете використовувати онлайн-інструмент CodePen. Спробуйте почати з легкого приклад коду «Hello World». При цьому, не потрібно нічого встановлювати, ви можете просто модифікувати код і спостерігати, як працює програма.

Створення односторінкового програми
Create React App – це найкращий інструмент для створення нового односторінкового програми.

Він забезпечує вас необхідною середовищем для розробки додатків, це означає, що ви будете мати доступ до новітніх функцій JavaScript, отримаєте хороший досвід розробника і зможете оптимізувати свої програми.

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Create React App не прив'язаний до програмної логіки або сховищ інформації, він просто створює фронтенд, з яким ви можете працювати з будь-якого сервера. У процесі складання він використовує такі розширення, як Webpack, Babel ESLint, однак, ви можете налаштувати їх.

Як додати React до додатка
Використовуючи npm. Ми рекомендуємо використовувати React з пакетним менеджером npm c таким пакувальником, як Browserify або webpack. Якщо ви використовуєте npm для управління клієнтськими пакетами, ви можете встановити React наступним чином:

npm install --save react react-dom

І імпортуємо його в наш проект:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

Цей код перетворюється в HTML елемент з ID root, тому, в HTML файлі потрібно встановити. Коли ви використовуєте React таким чином, ви повинні перетворити код JavaScript, використовуючи Babel, вказати es2015 і react, і попередні установки.

Щоб використовувати React в режимі розробника, змініть наступні значення NODE_ENV на «production».

Впровадження ES6 і JSX
Ми рекомендуємо використовувати React з Babel щоб мати можливість використовувати ES6 у вашому JavaScript коді. ES6 це набір сучасних інструментів JavaScript який спрощує процес розробки, а JSX це розширення мови JavaScript, який відмінно працює з React.

Інструкції з встановлення Babel показують, як конфігурувати Babel у безліч різних середовищ розробки. Переконайтеся, що ви встановили babel-preset-react і babel-preset-es2015 і підключили їх до вашому .babelrc, і тоді продовжуйте працювати.

Використання CDN (ery)
Якщо ви не хочете керувати клієнтським пакетом через npm, react і react-dom пакети також дозволяють використовувати UMD розподілу в dist папках, які розміщені в CDN:

< script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Hello World
Щоб почати роботу з React, просто використовуйте цей приклад коду «Hello World» на CodePen. Вам не потрібно нічого встановлювати, ви можете просто відкрити його в іншій вкладці і виконувати дії, дотримуючись наших прикладів. Якщо ви віддаєте перевагу використовувати локальну середовище розробки, зверніться до сторінки встановлення.

Невеликий приклад React коду виглядає так:

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

Він відображає заголовок «Hello World» на сторінці. Наступні кілька розділів будуть поступово знайомити вас із використанням React. Ми вивчимо блоки розробки додатків React: їх елементи і компоненти. Після того, як ви опануєте інструментом React, ви зможете створювати складні додатки з невеликих повторно застосовуваних частин.

Примітка JavaScript
React являє собою бібліотеку JavaScript і тому її використання передбачає наявність базових знань і понять про мові JavaScript. Якщо ви відчуваєте себе невпевнено в цій області, рекомендуємо вам освіжити знання JavaScript, щоб не відчувати труднощів у наступному матеріалі.

Також, в деяких прикладах ми використовуємо позначення ES6. Ми намагаємося вживати їх нечасто, оскільки вони є відносно новими, але ми також хочемо, щоб ви трохи познайомилися з такими формулюваннями, як стрілкова функція (arrow functions), класи (classes), шаблонні рядка (template literals), і змінні let і const. Ви можете використовувати Babel REPL, щоб переконатися, що ES6 код компілюється.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.