Реагировать Начало
Чтобы использовать React в продакшене, вам понадобится npm , который включен в Node.js.
Чтобы получить представление о том, что такое React, вы можете написать код React непосредственно в HTML.
Но чтобы использовать React в продакшене, вам нужно установить npm и Node.js.
Реагировать напрямую в HTML
Самый быстрый способ начать изучение React — написать React прямо в ваших HTML-файлах.
W3Schools Пространства
Самый простой способ начать создавать HTML-файлы — это W3Schools Spaces!
Это идеальное место для создания, редактирования и обмена вашей работой с другими!
Начните с включения трех скриптов, первые два позволяют нам писать код React в наших JavaScript, а третий, Babel, позволяет нам писать синтаксис JSX и ES6 в старых браузерах.
Вы узнаете больше о JSX в главе React JSX .
Пример
Включите три CDN в свой HTML-файл:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/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 .
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Настройка среды 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>.
Посмотрите изменения в браузере, когда вы нажмете Сохранить.
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
файла, чтобы они выглядели как пример в инструменте «Show React» ниже:
Пример
Нажмите кнопку «Выполнить пример», чтобы увидеть результат.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));