Итак, давайте предположим, что вы кодируете весь интерфейс веб-сайта с полным набором VanillaJS. Вам пора перейти на React, так как с ним довольно легко работать с компонентами веб-сайта, а также он делает веб-сайт достаточно эффективным. Если вы новичок в JavaScript, я бы посоветовал какое-то время придерживаться VanillaJS, а не просто переходить на React.

Итак, давайте посмотрим, что у меня есть для вас в этой статье??

  1. Полное понимание всех основных концепций React
  2. Целый проект, который мы будем строить вместе с помощью React
  3. Несколько вопросов по подготовке к собеседованию

Есть какие-либо предварительные условия?

  1. Основы HTML, CSS и JavaScript.
  2. Менеджер пакетов NPM/YARN (мы будем использовать NPM)
  3. Node.JS , не обязательно, но хорошее знание этого поможет

Давайте начнем

Предположим, вы были на веб-сайте ReactJS.org, прежде чем перейти сюда, и если вы не были на этом веб-сайте, просто зайдите сейчас и посмотрите, и небольшой обзор будет достаточно для вас, чтобы начать, как после вы начнете работать самостоятельно, ответом на большинство ваших сомнений станет документация ReactJS

Как установить Реакт

npx create-react-app testing

тестирование — это название приложения, которое вы можете заменить на любое другое.

Возможно, вы слышали о npm, но что это за npx?

npx расшифровывается как Node Package Execute, он позволяет выполнять любой пакет локально, даже не устанавливая пакет, npx полезен при однократном использовании пакета.

Если вы собираетесь использовать npm в качестве менеджера пакетов, а не пряжу, вы можете запустить эту команду

npx create-react-app testing --use-npm

Установка всех пакетов может занять несколько минут, после правильной установки все будет выглядеть так:

И, как следует из последних нескольких строк ответа, мы сделаем это соответствующим образом.

cd testing
npm start

Если все прошло хорошо, вы увидите что-то вроде этого

Compiled successfully!
You can now view testing in the browser.
Local:            http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.

Теперь вы можете открыть браузер Chrome и ввести URL-адрес как http://localhost:3000,

Поздравляем, вы завершили создание своего первого приложения для реагирования, да, это так просто, но подождите, настоящее удовольствие еще впереди. Так что не теряйте надежды, просто потерпите меня, и к концу этого я сделаю вас полноценным разработчиком React.

Знакомство с файловой структурой

Теперь откройте приложение в редакторе кода, который вам нравится, я советую использовать VScode, так как в нем есть много расширений, которые могут уменьшить наши усилия по написанию одного и того же повторяющегося кода.

Увидев файловую структуру, пожалуйста, не пугайтесь, так как сначала я тоже боялся ее увидеть. Теперь сначала давайте очистим весь этот беспорядок, чтобы вы чувствовали себя комфортно и выглядели как среда, с которой вы работали раньше. Удалите все файлы в каталоге src. Теперь удалите все файлы в общем каталоге, кроме index.html.

Теперь файловая структура будет выглядеть так

Теперь это выглядит немного знакомым,

  1. node_modules имеют все зависимости npm, которые потребуются для реакции
  2. В общедоступной папке теперь только один файл index.html.
  3. Пустая папка src
  4. .gitignore, если вы не знакомы с git, проигнорируйте его, но не удаляйте. В нем есть список всех файлов, которые необходимо игнорировать Git.
  5. package-lock.json и package.json /////////////////
  6. В Readme.md уже будут присутствовать некоторые строки по умолчанию, если вы хотите, вы можете написать свой собственный Readme. Это файл, который не требует пояснений.

Откройте файл index.html и посмотрите, большая часть вещей будет известна вам как разработчику vanillaJS. Если вы хотите, вы можете удалить некоторые строки, которые не кажутся вам знакомыми, это необязательно, но я просто все проясню, чтобы иметь чистый вид файла.

Самое главное в этом файле

<div id="root"></div>

позже в этом блоге вы узнаете, почему это наиболее важно, поэтому убедитесь, что вы не удалили это по ошибке.

Начнем кодирование

Я знаю, что вы с нетерпением ждали этого, так что давайте начнем.

Создайте имя файла index.js в папке src.

import React from 'react'
import ReactDom from 'react-dom'
ReactDom.render(
               <h1>Hello World</h1>,document.getElementById('root'))

Сохраните файл, перезагрузите браузер Chrome, и у вас будет

Итак, давайте посмотрим, что делает наш код. Прежде всего, мы импортируем две вещи: React и ReactDOM.

Чтобы использовать React API, нам нужно импортировать React, но на самом деле нам не нужно импортировать React здесь, поскольку мы не используем его в настоящее время, но это хорошая практика.

ReactDOM – это пакет, который устанавливается при создании приложения React с помощью команды create-react-app. Но зачем он нам нужен? ReactDOM – это пакет, предоставляющий специальные методы DOM (объектная модель документа), такие как render(), hydr() и т. д., которые позволяют эффективно управлять элементами DOM на веб-странице.

Здесь мы использовали один из методов ReactDOM, то есть render().

Метод render() может принимать 3 параметра, чтобы его было проще понять, давайте рассмотрим его таким образом.

1-й параметр: что отображать??

2-й параметр: где отображать ??

3-й параметр: что делать после его отображения, также известный как функция обратного вызова. Это необязательный параметр.

Итак, теперь попробуйте самостоятельно изменить то, что вы хотите видеть, например, первый параметр, перезагрузите страницу, и вы сможете это увидеть.

Далее, если вы заметили, что мы используем DOM во втором параметре и получили узел с идентификатором root, в файле index.html вы сможете найти div с таким же идентификатором.

На непрофессиональном языке вы можете сказать, что мы получаем этот пустой div с его идентификатором root и вставляем все, что мы передаем в первый параметр. Вы также можете найти то же самое, используя консоль в инструментах разработчика Chrome.

Чтобы поиграть со вторым параметром, вам нужно создать div в файле index.html, чтобы DOM мог получить к нему доступ. Надеюсь, теперь вы полностью разобрались с методом render().

Попробуй это

Теперь попробуйте добавить 2 строки с разными тегами для отображения на экране следующим образом.

ReactDOM.render(<h1>This is h1</h1><p>This is p tag</p>, document.getElementById('root')
)

Попробуйте, вы обязательно получите ошибку Failed to Compile, потому что

Нам не разрешено отображать 2 элемента/контейнер при одном рендеринге. Для этого есть решение, мы можем обернуть контейнер ‹div› вокруг всего, что вы хотите отобразить. Убедитесь, что вы этого не делаете. у t есть 2 div, так как возникнет та же проблема

ReactDOM.render(<div><h1>This is h1</h1><p>This is p tag</p></div>, document.getElementById('root')
)

Время познакомить вас с JSX

Создайте еще один файл в папке src, чтобы делать какие-то случайные вещи. Поскольку вы знаете основы JavaScript, давайте проверим ваши знания.

const a = 4;
const b = "<h1>Hello World</h1>"

Вы должны знать, что a и b являются переменными, хранящими целочисленный и строковый типы данных соответственно. Теперь что насчет этого

const c = <h1>Hello world(without quotes)</h1>

Я не думаю, что это строка или целое число. Тогда что это такое?

Это JSX, вы можете думать об этом как JavaScript + XML,но наш браузер не может понять JSX, так как это недействительный код JavaScript, поэтому нужно преобразовать его в понятный код JavaScript мы используем такой инструмент, как Babel, который является компилятором JavaScript.

Но вы можете спросить, что это учебник по ReactJS, зачем мы изучаем JSX. Вы когда-нибудь пробовали писать HTML-код на JavaScript? Это было бы глупо, потому что в конце концов это приведет нас к странице, полной ошибок. Но когда мы использовали ReactDOM.render(), мы написали HTML-код ‹h1›Hello World‹/h1›, но мы не столкнулись с какими-либо ошибками, потому что это никогда не был HTML-код, это был JSX ( расширенный синтаксис JavaScript). Давайте посмотрим сами, был ли это JSX или нет.

import React from 'react'
import ReactDom from 'react-dom'
const a = <h1>Hello World</h1>
ReactDom.render( a,document.getElementById('root'))

Вы получите тот же результат, что и выше,

Больше с JSX

давайте попробуем это с функциями

function first(){
      return 6
}

Вы, должно быть, писали или видели функцию, которая возвращает число, но функция также может возвращать JSX.

import React from 'react'
import ReactDom from 'react-dom'
function hello(){
    return(
         <h2>I am returned from a function</h2>
     )
}
ReactDom.render( hello() , document.getElementById('root'))

Вы также можете встроить выражение в JSX

import React from 'react'
import ReactDom from 'react-dom'
const name= "Guneet"
const expression = <h1>Hello my name is {name}</h1>

ReactDom.render( expression , document.getElementById('root'))

Мы также можем использовать атрибуты так же, как мы использовали в HTML.

const image= <img src ="image.png" />

Большинство вещей в JSX такие же, как и в HTML, Но есть отличия в JSX

  1. Чтобы присвоить класс тегу, мы не можем использовать class, так как это зарезервированное ключевое слово в JavaScript, мы используем className, аналогично атрибуту for, мы мы уже знаем о цикле for в JavaScript, поэтому мы используем htmlFor в качестве атрибута
  2. Поскольку JSX ближе к JavaScript, чем к HTML, React DOM использует соглашение об именах свойств camelCase вместо имен атрибутов HTML.
  3. В JSX каждый тег имеет самозакрывающийся тег, например ‹div /› ‹ol /› , у нас не может быть тега без закрывающего тега в JSX, такого как ‹img /›

Вот и вся основная разница между JSX и HTML.

Если вам кажется, что это немного скучно. Я знаю, что могу относиться к этому, так что теперь у меня есть один интересный материал, Теперь я могу начать работать над проектом

Делаем цифровые часы

  1. У меня есть основная задача для вас: создайте еще один проект реагирования, начните с удаления всех файлов самостоятельно, создайте файл index.js и импортируйте в него реакцию и реакцию-дом.
  2. После того, как вы закончите с задачей, нам нужно получить текущее время, чтобы мы могли использовать
const date = new Date()
const expression = date.toLocaleTimeString()

3. Теперь нам нужно отрендерить на этот раз в браузере, поэтому мы будем использовать render()

ReactDom.render(  expression, document.getElementById('root'))

4. Но наши часы просто придерживаются одного раза, похоже, батарея села, нет, мы не ошиблись.

5. Мы получили время от Date(), сохранили его в переменной и визуализировали/отрисовали в браузере, это все, что делает наш код, render() не будет повторно отображать страницу даже если время изменится, если мы не попросим его сделать это.

6. Сейчас мы создадим кнопку, и всякий раз, когда пользователь нажимает на кнопку, мы снова будем вызывать render(), чтобы браузер перерендерился.

const changeTime = () => {
   ReactDom.render(getTime(), document.getElementById('root'))
}
function getTime(){
   let date = new Date()
   return (
      <div>
        <h1>{date.toLocaleTimeString()}</h1>
        <button onClick={changeTime}>Change Time</button>
      </div>
    )
}
ReactDom.render(getTime(), document.getElementById('root'))

7. Надоело нажимать эту кнопку снова и снова, давайте автоматизируем ее, теперь мы будем вызывать функцию changeTime через каждую секунду с помощью setInterval,попробуйте сами один раз, мы удалим кнопка как сейчас бесполезна

setInterval(()=>{
   changeTime()
},1000)

8. Поздравляем с созданием вашего первого проекта с использованием ReactJS.Не волнуйтесь, это только начало, впереди еще долгий путь.