React подключить js файл
Обновлено: 07.07.2024
В этой статье мы скажем привет React. Мы узнаем немного подробностей о его происхождении и сценариях использования, настроим базовый набор инструментов на нашем локальном компьютере, а также создадим и поиграем с простым приложением для начинающих, и в процессе узнаем немного о том, как React работает .
React использует синтаксис HTML-in-JavaScript под названием JSX (JavaScript и XML). Знание HTML и JavaScript поможет вам изучить JSX и лучше определить, связаны ли ошибки в вашем приложении с JavaScript или с более специфической областью React.
Настроить локальную среду разработки React, создать стартовое приложение и понять основы его работы.
Привет React
Как гласит официальный слоган, React - это библиотека для создания пользовательских интерфейсов. React не является фреймворком – он даже не рассчитан исключительно для web. Он используется для визуализации и в связке с другими библиотеками. Например, React Native можно использовать для создания мобильных приложений; React 360 можно использовать для создания приложений виртуальной реальности; помимо того есть и другие варианты.
Для создания веб-приложений разработчики используют React в тандеме с ReactDOM. React and ReactDOM часто обсуждаются в том же пространстве и используются для решения тех же проблем, что и другие настоящие фреймворки для веб-разработки. Когда мы ссылаемся на React как на «фреймворк», мы подразумеваем это разговорное понимание.
Основная цель React - минимизировать ошибки, возникающие при разработке пользовательских интерфейсов. Это достигается за счёт использования компонентов - автономных логических фрагментов кода, которые описывают часть пользовательского интерфейса. А уже эти компоненты объединяются для создания полноценного пользовательского интерфейса. React абстрагирует большую часть работы по визуализации, оставляя вам возможность сосредоточиться на дизайне.
Когда использовать
В отличие от других платформ, рассматриваемых в этом модуле, React не обязывает к строгим правилам в отношении соглашений о коде или организации файлов. Это позволяет командам договариваться, что для них более подходит, и структурировать React проект соответствующим образом. React может отвечать за одну кнопку, несколько частей или же весь пользовательский интерфейс приложения.
Хотя React можно использовать для небольших частей интерфейса, «зайти» в него не так просто, как, к примеру, в jQuery, или даже во Vue. Куда легче это сделать создав всё приложение с помощью React.
Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьёзные требования к инструментарию, но его можно освоить.
В этой статье основное внимание будет уделено использованию React для создания всего пользовательского интерфейса с помощью create-react-app, предоставляемого Facebook.
Как React использует JavaScript?
React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:
This heading constant is known as a JSX expression. React can use it to render that <h1> tag in our app.
Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:
Note: The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
However, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag.
Of course, your browser can't read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:
It's possible to skip the compilation step and use React.createElement() to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don't have to configure compilation yourself unless you want to.
Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.
To read more about JSX, check out the React team's JSX In Depth article.
Настройка вашего первого React приложения
There are many ways to use React, but we're going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.
It's possible to add React to a website without create-react-app by copying some <script> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.
Requirements
In order to use create-react-app, you need to have Node.js installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).
You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See Package management basics for more information on npm and yarn.
If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are both suitable. See Command line crash course for more information on these, and on terminal commands in general.
Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Safari, or Chrome when working through these tutorials.
Also see the following for more information:
Initializing your app
create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you cd to the place you'd like your app to live on your hard drive, then run the following in your terminal:
This creates a moz-todo-react directory, and does several things inside it:
- Installs some npm packages essential to the functionality of the app.
- Writes scripts for starting and serving the application.
- Creates a structure of files and directories that define the basic app architecture.
- Initializes the directory as a git repository, if you have git installed on your computer.
Note: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag --use-npm when you run create-react-app:
create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.
When the process is complete, cd into the moz-todo-react directory and run the command npm start . The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:
Application structure
create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:
The src directory is where we'll spend most of our time, as it's where the source code for our application lives.
The public directory contains files that will be read by your browser while you're developing the app; the most important of these is index.html . React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <title> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!
The public directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our Deploying our app tutorial.
Изучаем наш первый React компонент — <App/>
In React, a component is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.
Let's open src/App.js , since our browser is prompting us to edit it. This file contains our first component, App , and a few other lines of code:
The App.js file consists of three main parts: some import statements at the top, the App component in the middle, and an export statement at the bottom. Most React components follow this pattern.
Import statements
The import statements at the top of the file allow App.js to use code that has been defined elsewhere. Let's look at these statements more closely.
The first statement imports the React library itself. Because React turns the JSX we write into React.createElement() , all React components must import the React module. If you skip this step, your application will produce an error.
The second statement imports a logo from './logo.svg' . Note the ./ at the beginning of the path, and the .svg extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the logo.svg file lives in our source directory.
We don't write a path or extension when importing the React module — this is not a local file; instead, it is listed as a dependency in our package.json file. Be careful of this distinction as you work through this lesson!
The third statement imports the CSS related to our App component. Note that there is no variable name and no from directive. This particular import syntax is not native to JavaScript module syntax – it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.
The App component
After the imports, we have a function named App . Whereas most of the JavaScript community prefers camel-case names like helloWorld , React components use pascal-case variable names, like HelloWorld , to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the App function to app , your browser would show you an error.
Let's look at App more closely.
The App function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.
Some elements in the expression have attributes, which are written just like in HTML, following a pattern of attribute="value" . On line 3, the opening <div> tag has a className attribute. This the same as the class attribute in HTML, but because JSX is JavaScript, we can't use the word class – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.
Take a moment to change the <p> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Now delete the <a> tag and save; the "Learn React" link will be gone.
Your App component should now look like this:
Export statements
At the very bottom of the App.js file, the statement export default App makes our App component available to other modules.
Interrogating the index
Let’s open src/index.js , because that's where the App component is being used. This file is the entry point for our app, and it initially looks like this:
As with App.js , the file starts by importing all the JS modules and other assets it needs to run. src/index.css holds global styles that are applied to our whole app. We can also see our App component imported here; it is made available for import thanks to the export statement at the bottom of App.js .
Line 7 calls React’s ReactDOM.render() function with two arguments:
- The component we want to render, <App /> in this case.
- The DOM element inside which we want the component to be rendered, in this case the element with an ID of root . If you look inside public/index.html , you'll see that this is a <div> element just inside the <body> .
All of this tells React that we want to render our React application with the App component as the root, or first component.
Note: In JSX, React components and HTML elements must have closing slashes. Writing just <App> or just <img> will cause an error.
Service workers are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.
Your final index.js file should look like this:
Переменные и свойства
Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).
Variables in JSX
Back in App.js , let’s focus on line 9:
Here, the <img /> tag's src attribute value is in curly braces. This is how JSX recognizes variables. React will see , know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.
Let's try making a variable of our own. Before the return statement of App , add const subject = 'React'; . Your App component should now look like this:
Change line 8 to use our subject variable instead of the word "world", like this:
When you save, your browser should display "Hello, React!" instead of "Hello, world!"
Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.
Component props
A prop is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — prop="value" . Let’s open index.js and give our <App/> call its first prop.
Add a prop of subject to the <App/> component call, with a value of Clarice . When you are done, your code should look something like this:
Back in App.js , let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):
Change the signature of the App function so that it accepts props as a parameter. Just like any other parameter, you can put props in a console.log() to read it out to your browser's console. Go ahead and do that after your subject constant but before the return statement, like so:
Save your file and check your browser's JavaScript console. You should see something like this logged:
The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.
Now that subject is one of our props, let's utilize it in App.js . Change the subject constant so that, instead of defining it as the string React , you are reading the value of props.subject . You can also delete your console.log() if you want.
When you save, the the app should now greet you with "Hello, Clarice!". If you return to index.js , edit the value of subject , and save, your text will change.
Резюме
This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.
Это JSX — расширение языка JavaScript. Мы рекомендуем использовать его, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.
JSX производит «элементы» React. То, как элементы рендерятся в DOM, мы изучим в следующей главе, а ниже мы рассмотрим основы JSX, которые нужно знать начинающему.
React исходит из принципа, что логика рендеринга неразрывно связана с прочей логикой UI: с тем, как обрабатываются события, как состояние изменяется во времени и как данные готовятся к отображению.
Вместо того, чтобы искусственно разделить технологии, помещая разметку и логику в разные файлы, React разделяет ответственность с помощью слабо связанных единиц, называемых «компоненты», которые содержат и разметку, и логику. Мы ещё вернёмся к теме компонентов в следующей главе, но если идея держать разметку в JavaScript-коде всё ещё вызывает у вас дискомфорт, этот доклад может переубедить вас.
С этим разобрались. Поехали дальше!
Встраивание выражений в JSX
В следующем примере мы объявляем переменную name и затем используем её внутри JSX, обрамляя фигурными скобками:
JSX допускает использование любых корректных JavaScript-выражений внутри фигурных скобок. Например, 2 + 2 , user.firstName и formatName(user) являются допустимыми выражениями.
В примере ниже мы встраиваем результат вызова JavaScript-функции formatName(user) в элемент <h1> :
Чтобы улучшить читаемость, мы разбили JSX на несколько строк. В таких случаях, хотя это и не обязательно, мы советуем заключать всё выражение целиком в круглые скобки, чтобы избежать проблем, связанных с автоматической вставкой точек с запятой.
JSX это тоже выражение
После компиляции каждое JSX-выражение становится обычным вызовом JavaScript-функции, результат которого — объект JavaScript.
Из этого следует, что JSX можно использовать внутри инструкций if и циклов for , присваивать переменным, передавать функции в качестве аргумента и возвращать из функции.
Использование атрибутов JSX
Чтобы использовать строковый литерал в качестве значения атрибута, используются кавычки:
Если же в значении атрибута требуется указать JavaScript-выражение, то на помощь приходят фигурные скобки:
Не ставьте кавычек вокруг фигурных скобок, когда используете JavaScript-выражение в значении атрибута. Следует либо применить кавычки (для строковых литералов), либо фигурные скобки (для выражений), но не то и другое вместе.
Предупреждение:
Поскольку JSX ближе к JavaScript чем к HTML, React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов.
Например, class становится className в JSX, а tabindex становится tabIndex .
Использование дочерних элементов в JSX
Если тег пуст, то его можно сразу же закрыть с помощью /> точно так же, как и в XML:
Но JSX-теги могут и содержать дочерние элементы:
JSX предотвращает атаки, основанные на инъекции кода
Данные, введённые пользователем, можно безопасно использовать в JSX:
По умолчанию React DOM экранирует все значения, включённые в JSX перед тем как отрендерить их. Это гарантирует, что вы никогда не внедрите чего-либо, что не было явно написано в вашем приложении. Всё преобразуется в строчки, перед тем как быть отрендеренным. Это помогает предотвращать атаки межсайтовым скриптингом (XSS).
JSX представляет собой объекты
Babel компилирует JSX в вызовы React.createElement() .
Следующие два примера кода эквивалентны между собой:
React.createElement() проводит некоторые проверки с целью выявить баги в коде, но главное — создаёт объект похожий на такой:
Эти объекты называются React-элементами. Можно сказать, что они описывают результат, который мы хотим увидеть на экране. React читает эти объекты и использует их, чтобы конструировать и поддерживать DOM.
В следующей главе мы углубимся в то, как React-элементы рендерятся в DOM.
Совет:
Мы рекомендуем настроить ваш редактор кода для использования Babel, чтобы и ES6, и JSX-код были подсвечены должным образом.
Создавать интерактивные пользовательские интерфейсы на React — приятно и просто. Вам достаточно описать, как части интерфейса приложения выглядят в разных состояниях. React будет своевременно их обновлять, когда данные изменяются.
Декларативные представления сделают код более предсказуемым и упростят отладку.
Основан на компонентах
Создавайте инкапсулированные компоненты с собственным состоянием, а затем объединяйте их в сложные пользовательские интерфейсы.
Поскольку логика компонента написана на JavaScript, а не содержится в шаблонах, можно с лёгкостью передавать самые разные данные по всему приложению и держать состояние вне DOM.
Научитесь однажды — пишите где угодно
Нам не нужно ничего знать про остальную часть вашего технологического стека, поэтому вы можете разрабатывать новую функциональность на React, не изменяя существующий код.
React также может работать на сервере, используя Node.js и на мобильных платформах, используя React Native.
Простой компонент
JSX необязателен для работы с React. Попробуйте Babel REPL, чтобы увидеть JavaScript-код, полученный на этапе компиляции JSX.
Загрузка примера с кодом.
Компонент с состоянием
Помимо входных данных (доступных через this.props ), компонент поддерживает внутренние данные состояния (доступные через this.state ). Когда данные состояния компонента изменятся, React ещё раз вызовет render() и обновит отрендеренную разметку.
Загрузка примера с кодом.
Приложение
Используя props и state , можно создать небольшое приложение списка дел. В этом примере используется state для отслеживания текущего списка элементов, а также текста, введённого пользователем. Хотя обработчики событий встроены в разметку, они собираются и реализуются с помощью делегирования событий.
Загрузка примера с кодом.
Компонент с использованием внешних плагинов
React позволяет работать с другими библиотеками и фреймворками. В этом примере используется внешняя библиотека remarkable, чтобы в режиме реального времени преобразовать Markdown-синтаксис, введённый в элемент <textarea> .
Используйте React в том объёме, в котором вам хочется.
Для внедрения React не надо ничего переписывать. Его можно использовать как для маленькой кнопки, так и для целого приложения. Возможно, вы захотите немного «оживить» вашу страницу. React-компоненты подходят для этого как нельзя лучше.
Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить на него React, написав всего несколько строк кода без каких-либо инструментов сборки. В зависимости от целей, можно постепенно перенести на React весь сайт или переписать всего несколько виджетов.
Добавляем React за одну минуту
В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML-файл.
Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. Всё, что вам нужно — это доступ к Интернету и минута свободного времени.
Шаг 1: Добавляем DOM-контейнер в HTML
Для начала, откройте HTML-файл страницы, которую хотите отредактировать. Добавьте пустой тег <div> в месте, где вы хотите отобразить что-нибудь с помощью React. Например:
Затем назначьте созданному <div> уникальный атрибут id . Это позволит впоследствии найти тег из JavaScript-кода и отобразить React-компоненты внутри него.
Совет
«Контейнер» <div> можно поместить где угодно внутри тега <body> . Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.
Шаг 2: Добавляем script-теги
Теперь добавьте три <script> -тега перед закрывающим тегом </body> :
Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.
Шаг 3: Создаём React-компонент
Создайте файл с именем like_button.js рядом с вашим HTML-файлом.
Возьмите этот стартовый код и вставьте его в созданный ранее файл.
Совет
В данном коде создаётся React-компонент с именем LikeButton . Не беспокойтесь, если что-то кажется вам непонятным — мы подробно разберём принципы разработки на React позже, в нашем практическом руководстве и во введении в основные понятия. Пока же мы просто посмотрим, как это выглядит на экране.
Добавьте ещё 2 строки в конец файла like_button.js , после стартового кода:
Эти две строки кода ищут элемент <div> , который мы добавили на первом шаге, а затем отображают React-компонент с кнопкой «Нравится» внутри него.
Вот и всё! Вы только что добавили свой первый React-компонент на страницу.
Перейдите к следующим разделам, если хотите узнать о других способах добавить React.
Совет: Повторное использование компонентов
Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Нравится» с разными данными:
Примечание
Этот способ лучше всего подходит для страниц, содержащих несколько изолированных участков кода, написанных на React. Внутри чистого React-кода проще использовать композицию компонентов.
Совет: Минификация JavaScript для продакшена
Публикуя ваш сайт на продакшен, имейте в виду, что несжатый JavaScript значительно замедляет страницу для ваших пользователей.
Если вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на React на production.min.js :
Если же вы не настроили минификацию для ваших скриптов, то вот один из вариантов, как это сделать.
Необязательно: Используем React с JSX
В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:
Однако, React позволяет использовать специальный синтаксис, называющийся JSX:
Эти два примера делают одно и то же. Несмотря на то, что JSX является совершенно необязательным, многие разработчики считают его удобным для разработки UI — как с React, так и с другими библиотеками.
Вы можете попробовать JSX в этом онлайн-конвертере.
Быстрый старт с JSX
Чтобы быстро попробовать JSX, добавьте такой <script> -тег на страницу:
Теперь синтаксис JSX доступен внутри каждого <script> -тега, у которого есть атрибут type="text/babel" . Скачайте пример HTML-кода с JSX, чтобы поэкспериментировать.
Такой подход удобен для обучения или создания быстрых демо, но следует помнить, что работа сайта при этом сильно замедляется. Поэтому для продакшена JSX лучше добавить по-другому. Если вам интересно попробовать, удалите добавленный ранее <script> -тег и все атрибуты type="text/babel" . Вместо них мы будем пользоваться препроцессором JSX, который автоматически трансформирует весь код внутри <script> -тегов.
Добавляем JSX в проект
JSX можно добавить в существующий проект и без разных сложных инструментов вроде бандлера или сервера для разработки. По сути, добавление JSX напоминает добавление препроцессора CSS. Необходимо лишь убедиться, что на вашем компьютере установлен Node.js.
С помощью терминала перейдите в директорию вашего проекта и запустите следующие команды:
- Шаг 1: Запустите команду npm init -y (если появляются ошибки, попробуйте этот способ)
- Шаг 2: Запустите команду npm install babel-cli@6 babel-preset-react-app@3
Совет
Мы используем npm только для установки препроцессора JSX. React и код приложения всё ещё остаются в <script> -тегах.
Поздравляем! Вы только что добавили в ваш проект поддержку JSX, готовую к продакшену.
Запускаем препроцессор JSX
Создайте директорию с названием src и наберите в терминале следующую команду:
Дожидаться завершения работы команды не нужно — она работает в режиме наблюдения за изменениями в JSX-коде.
Попробуйте создать файл с названием src/like_button.js и вставить в него этот стартовый JSX-код. Препроцессор автоматически трансформирует новый код в чистый JavaScript, пригодный для выполнения в браузере, и сохранит его в новый файл like_button.js . При редактировании JSX-кода в существующих файлах трансформация также происходит автоматически.
Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из его документации.
Если вы неплохо разбираетесь в инструментах сборки и хотите создавать приложения на React с их помощью, обратитесь к следующему разделу, где описаны некоторые из наиболее популярных способов. Если нет — не беспокойтесь, уже знакомые нам script-теги ничуть не хуже!
Читайте также: