React СТАРТ
Щоб використовувати React у виробництві, вам потрібен npm, який входить до складу Node.js.
Щоб отримати загальне уявлення про те, що таке React, ви можете написати код React безпосередньо в HTML.
Але щоб використовувати React у виробництві, вам потрібно встановити npm і Node.js.
React безпосередньо в HTML
Найшвидший спосіб почати вивчати React — це написати React безпосередньо у своїх файлах HTML.
Почніть із додавання трьох скриптів: перші два дозволяють нам писати код React у наших JavaScript, а третій, Babel, дозволяє нам писати синтаксис JSX і ES6 у старіших браузерах.
Ви дізнаєтесь більше про JSX у розділі React JSX.
Приклад
Додайте три CDN у свій файл HTML:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
Цей спосіб використання React може підійти для тестування, але для виробництва вам потрібно буде налаштувати середовище React.
Налаштування середовища React
Якщо у вас встановлено npx і Node.js, ви можете створити додаток React за допомогою create-react-app.
Якщо ви раніше інсталювали create-react-app глобально, радимо видалити пакет, щоб гарантувати, що npx завжди використовує останню версію create-react-app.
Щоб видалити, виконайте цю команду: npm uninstall -g create-react-app.
Виконайте цю команду, щоб створити програму React під назвою my-react-app:
npx create-react-app my-react-app
create-react-app налаштує все, що вам потрібно для запуску програми React.
Запустити програму React
Тепер ви готові запустити свою першу справжню програму (застосунок) React!
Виконайте цю команду, щоб перейти до каталогу my-react-app:
cd my-react-app
Виконайте цю команду, щоб запустити програму React my-react-app:
npm start
З’явиться нове вікно браузера з новоствореною програмою React! Якщо ні, відкрийте браузер і в адресному рядку введіть localhost:3000.
Результат:
Змінити програму React
Поки все добре, але як змінити вміст?
Загляньте в каталог my-react-app, і ви знайдете папку src. У папці src є файл під назвою App.js, відкрийте його, і він виглядатиме так:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Спробуйте змінити вміст HTML і збережіть файл.
Зверніть увагу, що зміни видно відразу після збереження файлу, вам не потрібно перезавантажувати браузер!
Приклад
Замініть увесь вміст у <div className="App"> на <h1> елемент.
Перегляньте зміни у веббраузері, натиснувши Save (Зберегти).
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Зверніть увагу, що ми видалили імпорт, який нам не потрібен (logo.svg та App.css).
Результат:
Що далі?
Тепер у вас є середовище React на вашому комп’ютері, і ви готові дізнатися більше про React.
Далі у цьому підручнику ми будемо використовувати наш інструмент "Показати React" для пояснення різних аспектів React і того, як вони відображаються у веббраузері.
Якщо ви хочете виконати ті самі кроки на своєму комп’ютері, почніть із видалення папки src, щоб вона містила лише один файл: index.js. Ви також повинні видалити будь-які непотрібні рядки коду всередині файлу index.js, щоб вони виглядали як у прикладі в інструменті "Показати React" нижче:
Приклад
Натисніть кнопку "Виконати приклад", щоб побачити результат.
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
const myFirstElement = <h1>Hello React!</h1>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);
