В последних статьях 1 и 2 Мы настроили наш проект и сделали небольшой Chit-Chat о том, что на самом деле происходило. Но теперь давайте начнем писать код. В этом проекте мы будем делать счетчик с кнопкой для увеличения количества, а другой, чтобы уменьшить количество.
Давайте откроем любой редактор кода по вашему выбору и перейдем к нашему index.jsx Здесь будут происходить все действия. Пока давайте уйдем index.html и index.css один.
Давайте объясним этот код, который мы написали выше Анкет
import React from 'react'
В приведенном выше коде мы импортировали библиотеку React из нашего node_modules Папка ( Вы можете отправиться туда самостоятельно, и вы увидите папку с именем React ), это необходимо и будет импортировано на каждой странице, которую мы пишем некоторый код реагирования.
import ReactDOM from 'react-dom`
Используя этот код выше, мы импортировали React-Dom в файл, это необходимо только в нашем файле начального уровня ( в нашем случае, index.jsx ), и мы будем использовать его, чтобы отобразить нашу страницу.
Рендеринг – это просто акт показания того, что мы написали в нашем файле React в браузере.
Наконец, мы позвонили render () Функция, чтобы дать нам нашу веб -страницу. Этот метод принимает 2 параметра, первый – Что рендеринг, а второй – где чтобы представить. Мы решили отображать Привет, React и сделать это в Элемент с ID: корень .
ReactDOM.render('Hello React', document.getElementById('root'))
Давайте отредактируем наш код, мы можем написать наш код ниже строки 2 и просто отобразить его в конце, но что, если это сайт? Полный страниц и несколько ссылок? Наш код будет долгим, и это неудобно.
Вместо этого давайте разделим наш код на модули или в разные файлы и отобразим их в index.jsx Анкет Чтобы начать, давайте создадим новый файл с именем App.jsx
Это первое, теперь я хочу, чтобы вы импортировали «React» из его модуля ( Пока не отображаются, см. Выше для подсказки ). Давайте создадим компонент.
Что такое компонент? : Компонент может быть определен просто как функция JavaScript или класс, которая содержит некоторый код JSX (может быть простым заголовком на HTML -странице) и используется в другом месте. И это приводит нас к преимуществу реагировать на чистый HTML, и это повторная способность. Представьте, что у нас есть игра Tic-Tac-Toe. В HTML нам придется написать отдельный код для каждого из 9 квадратов, и что произойдет, если нажмет нажатие. В React мы можем просто написать код для квадрата и повторно использовать его 9 раз, следовательно, более короткий код и более высокий уровень производительности.
В нашем Приложение Компонент, давайте создадим функцию, называемую Приложение Анкет Может быть функцией стрелки или нормальной функцией, не имеет значения. Наша функция будет иметь метод возврата, давайте создадим Теги и напишите «Привет, мир». Не стесняйтесь добавлять тег в И напишите больше вещей. И это поднимает еще одно важное правило, ваша функция возврата может вернуть только одну вещь, в нашем случае, один Анкет
Мы можем сохранить наш код и запустить NPM запустить начало Но подождите, мы все еще можем увидеть «Привет, реагировать». Это потому, что index.jsx Наша точка входа, и, поскольку мы не связали ее с нашим App.jsx , мы все еще видим наш старый код.
Давайте импортируем App.jsx в нашем Индекс , сначала мы должны экспортировать нашу функцию Приложение Как экспорт по умолчанию, И это показано ниже
Теперь, когда мы это сделали, наш App.jsx можно увидеть любым файлом в нашем проекте. Мы все еще не увидим никаких изменений, потому что мы не изменили наши index.jsx , давайте импортируем Приложение от App.jsx в наш файл
Нам не нужно добавлять .js или .jsx В наш файл инструмент Snowpack автоматически обрабатывает это ( только для файлов JS, если CSS или другой, мы добавляем расширение ). В нашем первом параметре давайте установим наше приложение как визуализированную вещь. Сначала мы удаляем сообщение Hello React ‘, затем мы пишем то, что импортировали ( App ), как мы пишем HTML (между символом тега, <>). Как ниже
Позвольте мне добавить что -то здесь, и это тот факт, что любой тег без закрывающего тега, например, Тег должен иметь / в конце т.е. , просто печатать неправильно. Итак, у нас это есть, сохраните это и запустите.
Вуаля! У нас сейчас написано Hello World. В следующей статье мы начнем создавать приложение Counter и добавлять CSS. Не стесняйтесь добавлять, менять или делать что угодно. Если вам нужна большая задача, создайте новый компонент полностью и импортируйте его в App.jsx , покажите его оттуда, как мы это сделали в index.jsx И продолжай веселиться.
Оригинал: “https://dev.to/shafspecs/let-s-dive-into-react-pt-3-2647”