С чего начать учить React?
Типа нужен сервер.
1) могу ли я просто закинуть все эти файлы просто на хостинг и все или я не правильно понял значение слова сервер применимо к этому?
2) С чего начать вообще учить реакт? Нормальное ли то руководство или можете посоветовать лучше?
- Вопрос задан более трёх лет назад
- 37802 просмотра
7 комментариев
Простой 7 комментариев
davidnum95 @davidnum95
то руководство очень устарело
А зачем его учить?
Максим @maxfarseer
davidnum95, пишу новое. Там устарела практика, но теория ок.
Максим @maxfarseer
> Немного знаю js, обычно писал на jquery но надо учить рекат.
начните с основ, хорошо подтяните основы и react зайдет как по маслу.
Дима Долготер
Максим @maxfarseer
Иван, подпишитесь в твиттер — там будет размещаться оперативная инфа в скором времени.
Максим, хорошо,спасибо
Решения вопроса 2
Егор Живагин @Krasnodar_etc
avito front
У них же просто охренительный официальный туториал
Ответ написан более трёх лет назад
Нравится 20 1 комментарий
ну и там же доки
Используйте Create React App
Все что надо для старта там есть. Ставьте и переписывайте начальный компонент на ваше смотрение
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Вот это плохой путь, уж лучше уделить пару вечерков и по изучать webpack.
Ответы на вопрос 9
CTO at hexlet.io
> Я не шарю в этих ваших пактеных менеджерах, сборщиках и тд.
Тогда вам не с реакта надо начинать, а с изучения экосистемы nodejs. Кратки экскурс можно получить пройдя наш бесплатный курс https://ru.hexlet.io/courses/js-setup-environment
Ответ написан более трёх лет назад
Нравится 12 3 комментария
Весьма интересно,даже не совсем для новичком,чтобы устранить некоторые пробелы,спасибо.
Проходил в своё время(начало 2017) ваш курс по реакту, долго ломал голову, почему мануалы отличаются от офф документации, а оказалось, что курс как пару лет устарел(((
Сергей Сунцев, Вероятно вы проходили старый курс. Буквально несколько месяцев назад у нас он полностью обновился + добавился курс по redux.
1) Сервер нужен, чтобы отдавать те данные (JSON), на основе которых React (лучше — не React) нарисует DOM. Обычно сервер генерит JSON из данных в БД. Но вы верно мыслите, в начале обучения можно положить статические файлы с JSON на любой доступный веб-сервер.
2) Можем посоветовать лучше: https://ru.vuejs.org/v2/guide/
Ответ написан более трёх лет назад
Нравится 5 11 комментариев
Почему лучше — не React? Вы имели в виду лучше Vue?
вкусовщина) по мне дак, что реакт, что вью. оба хороши)) а вот ангуляр мне не понравился)
но, наверное, потому что обзерваблы показались страшными)
kn1ght_t, интересно, по-вашему, в вопросе «посоветовать лучше» может означать в ответе «лучше» по каким-то объективным показателям?
И, кстати, реакт и Vue не одинаково хороши — во Vue нет этого уродства JSX, а в реакте нет простого, как гвоздь, Vuex.
Ну, какое слово к Ангуляру применить, все уже вроде знают из тех, кто хоть немного в теме.
Василий Назаров, JSX есть во Vue, вы можете поизвращаться и Vuex к реакту привинтить, но есть Redux или MobX
SimasikS,
видите ли..
Во Vue может быть JSX (для особых.. ценителей этого извращения), но никто в своём уме не будет юзать JSX во Vue, тогда как реакт без JSX уже не реакт.
В реакт можно ввинтить Vuex или MobX или Flux или Reflux или Redux или XYux. Именно потому реакт — немного не то.. Во Vue все просто используют Vuex.
Лично с моей колокольни кажется, что особой разницы нет, что-то, что-то для одних и тех же целей с одними и теми же архитектурными решениями. JSX это было в своё время революцией, я больше чем уверен, что вы не сможете назвать ни одной аддекватной причины против использования JSX. То что реакт позволяет самому выбирать источник данных — это же здорово и позволяет использовать инструменты в зависимости от контекста. Во Vue кстати тоже используют не только Vuex.
SimasikS, хорошо, JSX прекрасен, и здорово, когда каждый ламер тянет в проект любую хрень, которую захотелось.. попробовать, в зависимости от его, ламера.. контекста
Василий Назаров, вы всё равно не привели аргументы) а просто кукарекнули
SimasikS, снова согласен..
«кукарекнул со своей колокольни» — просто восхитительно подходящий эпитет к данной ситуации
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Дмитрий Pacification @dmitry_pacification
Хорошая книга. Сам начал читать чтобы пробелы закрыть
WEB-разработчик
> Я не шарю в этих ваших пактеных менеджерах, сборщиках и тд.
Советую вам для начала прочитать вот это, поможет разобраться зачем вообще нужны эти ноды и пакетные менеджеры.
А потом можно попробовать и REACT.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Junior Front-End
все это можно найти на торрентах
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Еще неплохое руководство по React -https://metanit.com/web/react/
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Дмитрий Pacification @dmitry_pacification
Трудности рождают прорыв
Я учил реакт на курсах. До того как я взялся за реат я уже знал как собирать фронтенд с помощью Gulp. Освойте сначала его. Как собирать стили и скрипты. Потом я сам по оф документации освоил webpack. Ну как освоил, могу подключить babel и настроить веб сервер (webpack-dev-server). Все вопросы и проблемы решаются путем гугления. How to build jsx with webpack. До работы с jsx я немного поковырял что такое ES6. Без этого сложно учить реакт.
TheMoth посоветовал хорошую книгу. Я соглсен с его ответом. Прочитайте её, разбиритесь как настраивать gulp и webpack (Можно конечно просто webpack, но для общего развития осилить оба не помешает)
https://webdesign-master.ru/blog/tools/2016-03-09-.
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Яжмаркетолог
В гугле при поиске «руководство реакт» почти сразу выходит ссылка на хороший источник metanit. Там по главам разбита вся информация, разберетесь.
Если сложновато идет самостоятельное обучение, пройдите курсы от GeekBrains, MCS, Loftscool или от других онлайн-школ kursfinder.ru/react/ (здесь проще выбрать)
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- React
- +1 ещё
Как правильно хранить стейт и загружать данные в Next.JS?
- 2 подписчика
- 8 часов назад
- 36 просмотров
Создаём новое React-приложение
These docs are old and won’t be updated. Go to react.dev for the new React docs.
See Start a New React Project for the recommended ways to create an app.
Используйте встроенный набор инструментов для лучшего взаимодействия пользователя и разработчика.
На этой странице описано несколько популярных наборов инструментов React, которые помогают в таких задачах как:
- Масштабирование до большого количества файлов и компонентов.
- Использование сторонних библиотек из npm.
- Раннее обнаружение распространённых ошибок.
- Отражение изменений CSS и JS на лету в процессе разработки.
- Оптимизация кода для продакшена.
Рекомендованные на этой странице инструменты не требуют дополнительной настройки для начала работы.
Возможно, вам не нужен дополнительный набор инструментов
Если у вас нет проблем, описанных выше, или пока не чувствуете себя уверенно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега на HTML-странице, при необходимости с JSX.
Также это самый простой способ добавить React в существующий веб-сайт. Вы всегда можете расширить набор инструментов, если посчитаете это нужным.
Рекомендуемый набор инструментов
Команда React в первую очередь рекомендует следующие решения:
- Если вы изучаете React или создаёте новое одностраничное приложение, используйте Create React App.
- Если вы создаёте серверный сайт с Node.js, попробуйте Next.js.
- Если вы создаёте статический контент-ориентированный сайт, попробуйте Gatsby.
- Если вы создаёте библиотеку компонентов или интегрируетесь с существующей кодовой базой, попробуйте более гибкие наборы инструментов.
Create React App
Create React App — удобная среда для изучения React и лучший способ начать создание нового одностраничного приложения на React.
Инструмент настраивает среду для использования новейших возможностей JavaScript, оптимизирует приложение для продакшена и обеспечивает комфорт во время разработки. Вам понадобятся Node.js не ниже версии 14.0.0 и npm не ниже версии 5.6 на вашем компьютере. Для создания проекта выполните команды:
npx create-react-app my-app cd my-app npm startCreate React App не обрабатывает бэкенд логику или базы данных, он только предоставляет команды для сборки фронтенда, поэтому вы можете использовать его с любым бэкэндом. «Под капотом» используются Babel и webpack, но вам не нужно ничего знать о них.
Когда ваше приложение готово к развёртыванию в продакшене, запуск команды npm run build создаст оптимизированную сборку вашего приложения в папке build . Вы можете узнать больше о Create React App из его README и его пользовательского руководства.
Next.js — это популярный легковесный фреймворк для статических и серверных приложений, использующих React. Он включает в себя готовые решения для стилизации и маршрутизации и предполагает, что вы используете Node.js в качестве серверной среды.
Gatsby — лучший способ для создания статических сайтов с помощью React. Он позволяет использовать React-компоненты, но выводит предварительно отрендеренный HTML и CSS, чтобы гарантировать минимальное время загрузки.
Более гибкие наборы инструментов
Следующие наборы инструментов предлагают больше гибкости и выбора. Мы рекомендуем их более опытным разработчикам:
- Neutrino сочетает в себе возможности webpack и простоту пресетов. Инструмент включает в себя пресеты для React-приложений и React-компонентов.
- Nx — набор инструментов для ведения фулстэк разработки в монорепозиториях, который обладает встроенной поддержкой React, Next.js, Express и так далее.
- Parcel — быстрый упаковщик веб-приложений с нулевой конфигурацией, который работает с React.
- Razzle — это фреймворк для серверного рендеринга, более гибкий чем Next.js, но не требующий обязательной настройки.
Создание набора инструментов с нуля
В набор инструментов для сборки JavaScript обычно входят:
- Менеджер пакетов, такой как Yarn или npm. Он позволяет вам использовать обширную экосистему сторонних пакетов и легко устанавливать или обновлять их.
- Сборщик, такой как webpack или Parcel. Он позволяет писать модульный код и объединять его в небольшие пакеты, чтобы оптимизировать время загрузки.
- Компилятор, такой как Babel. Он позволяет писать современный код JavaScript, который будет работать даже в старых браузерах.
Если вы предпочтёте создать свой собственный набор JavaScript-инструментов с нуля, ознакомьтесь с этим руководством, в котором воссоздаются некоторые функции Create React App.
Не забудьте убедиться, что ваш набор инструментов правильно настроен для продакшена.
Начало работы
These docs are old and won’t be updated. Go to react.dev for the new React docs.
The new Quick Start teaches modern React and includes live examples.
На этой странице мы сделаем небольшой обзор документации и других ресурсов, которые могут пригодиться при первом использовании React.
React — это JavaScript-библиотека для разработки пользовательского интерфейса. Чтобы составить первое впечатление о React, зайдите на главную страницу или во введение.
- Пробуем React
- Изучаем React
- Информация о релизах
- Документация на старые версии React
- Обратная связь
React изначально был спроектирован так, чтобы его можно было внедрять постепенно. Другими словами, вы можете начать с малого и использовать только ту функциональность React, которая необходима вам в данный момент. Информация в этом разделе будет полезна в любой ситуации: при первом знакомстве с React, при создании простой динамической HTML-страницы и даже при проектировании сложного React-приложения.
Если вы просто хотите немного поиграть с React, попробуйте онлайн-песочницу. Например, вот простейший шаблон на CodePen, CodeSandbox или Stackblitz.
Если вы предпочитаете работать в своём редакторе, скачайте тестовый HTML-файл, добавьте в него код и запустите на своём компьютере. При открытии тестового файла браузер преобразует JSX в обычный код на JavaScript. Такое преобразование достаточно медленно, поэтому мы рекомендуем использовать этот файл только для простых демонстрационных примеров.
Добавляем React на сайт
Вы можете добавить React на свой сайт буквально за одну минуту. После этого можно разместить на сайте несколько динамических виджетов и постепенно наращивать использование React в своём проекте.
Когда вы начинаете проект на React, то простая HTML-страница со script-тегами может быть лучшим вариантом. Её можно сделать за минуту.
Однако для разработки более развесистого приложения вам, скорее всего, придётся рассмотреть другие варианты настройки рабочего окружения, объединяющие в себе различные технологии. Вот несколько наборов JavaScript-инструментов, которые мы рекомендуем для создания приложения. Каждый из этих инструментов может работать практически без настройки и позволит раскрыть все возможности экосистемы React. Подробнее об инструментах.
Люди приходят к React с разным опытом и стилем обучения. Некоторые предпочитают учиться на ходу, а кому-то нравится сначала овладеть теорией. В любом случае мы надеемся, что этот раздел будет для вас полезен.
- Если вам больше нравится учиться на ходу, начните с введения.
- Если вы хотите сначала овладеть теорией, то начните с пошагового описания React.
React сначала может показаться сложным, но приложив усилие, вы обязательно его освоите. Терпение и труд все перетрут!
На главной странице есть несколько простых примеров использования React. Их можно отредактировать и запустить прямо на нашем сайте. Даже если вы пока ничего не знаете о React, попробуйте что-нибудь поменять в коде и посмотрите на результат.
React для новичков
Если документация кажется вам сложной и усваивается не так быстро, как хотелось, прочтите блог Тани Раша (Tania Rascia). Таня написала о том, как начала работать с React и доходчиво рассказала об его основных принципах. Попробуйте почитать этот пост, а потом вернуться к документации.
React для дизайнеров
Если вы в первую очередь занимаетесь дизайном, вам могут пригодиться ресурсы, собранные на этом сайте.
Ресурсы по JavaScript
Изучение React предполагает наличие некоторых знаний о программировании на языке JavaScript. Глубоких знаний не потребуется, но учить React и JavaScript одновременно может быть тяжело.
Чтобы освежить ваши знания, мы рекомендуем просмотреть обзор языка JavaScript на сайте mozilla.org. Для этого потребуется от 30 минут до часа. Надеемся, что теперь вы будете чувствовать себя более комфортно, изучая React.
Совет
Если всё-таки у вас есть пробелы в знаниях, то сайты MDN и learn.javascript.ru будут отличными источниками информации о JavaScript. Также всегда можно задать вопрос или попросить помощи на форумах нашего сообщества.
Если вы предпочитаете изучать технологии на практике, воспользуйтесь введением. В нём описан процесс разработки игры в крестики-нолики. Даже если вы не планируете программировать игры, всё равно уделите внимание этому разделу документации. Приёмы, которые вы освоите — фундамент для разработки любых приложений на React. Введение даст вам более глубокое понимание React.
Пошаговое описание React
Если вам больше нравится познавать предмет шаг за шагом, то лучше начать с пошагового описания React. Каждая последующая глава описания опирается на знания из предыдущей, поэтому вы ничего не упустите в процессе изучения материала.
Многие вспоминают, как чтение Философии React поставило всё на свои места. Пускай это и самое древнее руководство по React, но оно всё так же актуально.
Некоторым больше нравится учиться по книгам или видеокурсам от сторонних авторов, а не по официальной документации. Для них мы разместили список рекомендуемых ресурсов. Часть этих ресурсов бесплатны.
Углублённое изучение React
После того, как вы изучите основные принципы React и немного поиграетесь с ним, можно углубиться в более продвинутые темы документации. В этих главах описаны полезные, но не так часто используемые возможности React. Например, контекст и рефы.
Этот раздел документации описывает нюансы использования React API. Например, в главе React.Component API рассказывается о работе функции setState() и различных методах управления жизненным циклом компонентов.
Глоссарий и FAQ
Глоссарий содержит перечень наиболее употребляемых терминов, которые встречаются в документации. Также есть раздел FAQ. В нём короткие вопросы и ответы на самые животрепещущие темы, такие как использование AJAX, состояние компонентов или структура проекта.
Информация о релизах
В официальном блоге мы сообщаем о новых релизах React. Все самые важные новости, включая списки изменений и не рекомендуемых к использованию функций, публикуются в первую очередь здесь.
Также вы можете подписаться на наш аккаунт @reactjs в Twitter. Однако вы не пропустите ничего важного, если будете следить только за блогом.
В блоге мы пишем не о всех релизах React, но всегда есть возможность посмотреть полный список изменений в файле CHANGELOG.md в репозитории React, а также на странице Релизы.
Документация на старые версии React
Документация на сайте всегда соответствует последнему стабильному релизу. Начиная с 16 версии React, мы публикуем старые версии документации на отдельной странице. Учтите, что копии документации создаются в момент выхода релиза и больше не обновляются.
Если вы обнаружите в документации какие-нибудь неточности, ошибки или любые другие непонятки, пожалуйста, создайте ишью в репозитории документации с указанием способа решения проблемы или просто твитните в Twitter @reactjs. Мы всегда рады слышать вас!
Начало работы с React
В этой статье мы скажем привет React. Мы узнаем немного подробностей о его происхождении и сценариях использования, настроим базовый набор инструментов на нашем локальном компьютере, а также создадим и поиграем с простым приложением для начинающих, и в процессе узнаем немного о том, как React работает .
| Что нужно знать: | HTML, CSS, и JavaScript, быть знакомым с терминалом/командной строкой (en-US) .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:
const heading = h1>Mozilla Developer Network/h1>;
This heading constant is known as a JSX expression. React can use it to render that tag in our app.
const header = ( header> h1>Mozilla Developer Network/h1> /header> );
Примечание: 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:
const header = ( header> h1>Mozilla Developer Networkh1> header> );
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:
const header = React.createElement( "header", null, React.createElement("h1", null, "Mozilla Developer Network"), );
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.
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 (en-US) 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 (en-US) 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:
- «What is npm» on nodejs.org
- «Introducing npx» on the npm blog
- The create-react-app documentation
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:
Примечание: 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-npmwhen you run create-react-app:bash
Application structure
create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:
moz-todo-react ├── README.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.jsThe 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 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 (en-US) tutorial.
The package.json file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read What is the file package.json ? on NodeJS.org; we also talk about it in our Package management basics (en-US) tutorial.
Изучаем наш первый React компонент —
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:
import React from "react"; 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.jscode> 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;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.
import React from "react"; import logo from "./logo.svg"; import "./App.css";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.
function App() return ( div className="App"> header className="App-header"> img src=logo> className="App-logo" alt="logo" /> p> Edit code>src/App.jscode> and save to reload. p> a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer"> Learn React a> header> div> ); >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 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.
Your App component should now look like this:
function App() return ( div className="App"> header className="App-header"> img src=logo> className="App-logo" alt="logo" /> p>Hello, World!p> header> div> ); >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:
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; ReactDOM.render(App />, document.getElementById("root")); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();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, 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 element just inside the .
All of this tells React that we want to render our React application with the App component as the root, or first component.
Примечание: In JSX, React components and HTML elements must have closing slashes. Writing just or just
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:
import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; ReactDOM.render(App />, document.getElementById("root"));Переменные и свойства
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:
img src=logo> className="App-logo" alt="logo" />
Here, the 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:
function App() const subject = "React"; return ( div className="App"> header className="App-header"> img src=logo> className="App-logo" alt="logo" /> p>Hello, World!p> header> div> ); >Change line 8 to use our subject variable instead of the word "world", like this:
function App() const subject = "React"; return ( div className="App"> header className="App-header"> img src=logo> className="App-logo" alt="logo" /> p>Hello, subject>!p> header> div> ); >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 call its first prop.
Add a prop of subject to the component call, with a value of Clarice . When you are done, your code should look something like this:
.render(App subject="Clarice" />, document.getElementById("root"));Back in App.js , let's revisit the App function itself, which reads like this (with the return statement shortened for brevity):
function App() const subject = "React"; return ( // return statement ); >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:
function App(props) const subject = "React"; console.log(props); return ( // return statement ); >Save your file and check your browser's JavaScript console. You should see something like this logged:
subject: "Clarice" >The object property subject corresponds to the subject prop we added to our 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.
function App(props) const subject = props.subject; return ( // return statement ); >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.
- Components can import modules they need, and must export themselves at the bottom of their files.
- Component functions are named with PascalCase .
- You can read JSX variables by putting them between curly braces, like .
- Some JSX attributes are different to HTML attributes, so that they don't conflict with JavaScript reserved words. For example, class in HTML translates to className in JSX. Note that multi-word attributes are camel-cased.
- Props are written just like attributes inside component calls, and are passed into components.
- Назад (en-US)
- Обзор: Client-side JavaScript frameworks
- Далее (en-US)
В этом модуле
- Introduction to client-side frameworks (en-US)
- Framework main features (en-US)
- React
- Getting started with React
- Beginning our React todo list (en-US)
- Componentizing our React app (en-US)
- React interactivity: Events and state (en-US)
- React interactivity: Editing, filtering, conditional rendering (en-US)
- Accessibility in React (en-US)
- React resources (en-US)
- Getting started with Ember (en-US)
- Ember app structure and componentization (en-US)
- Ember interactivity: Events, classes and state (en-US)
- Ember Interactivity: Footer functionality, conditional rendering (en-US)
- Routing in Ember (en-US)
- Ember resources and troubleshooting (en-US)
- Getting started with Vue (en-US)
- Creating our first Vue component (en-US)
- Rendering a list of Vue components (en-US)
- Adding a new todo form: Vue events, methods, and models (en-US)
- Styling Vue components with CSS (en-US)
- Using Vue computed properties (en-US)
- Vue conditional rendering: editing existing todos (en-US)
- Focus management with Vue refs (en-US)
- Vue resources (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.