Привет всем, мы можем изучать как React, так и JavaScript бок о бок, нам не нужно иметь глубокие знания JavaScript для запуска React.

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

Начнем с Hello World

Начиная с CodeSandBox

Самый простой способ начать работу с React — это CodeSandbox.

  • Google codesandbox React
  • Нажмите на первую ссылку

Мы увидим игровую площадку с некоторым кодом по умолчанию.

Замените код следующим кодом, чтобы отобразить Hello World

import React from 'react'

const App = () => {
  return <div>Hello World</div>
}

export default App

Авария

Давайте разберем код и разберемся

Мы можем разбить код на 3 части

  • Заявление об импорте
  • Функция, которая возвращает что-то вроде HTML
  • Заявление об экспорте

Что такое функция

Функция JavaScript — это набор операторов, заключенных в блок. Эти операторы выполняются при вызове функции.

Функции могут что-то возвращать, а могут и не возвращать. Функции, которые ничего не возвращают, называются пустыми функциями.

Пример

// Function for adding two numbers
const addTwoNumbers = (num1, num2) => {
    return num1 + num2;
}

// Calling the function
addTwoNumbers(5, 10);

Возвращаясь к функции во фрагменте кода

Всякий раз, когда мы хотим отобразить что-то в React, мы используем компоненты.

Компоненты React — это функции, которые возвращают некоторый JSX. HTML-подобная вещь, которую возвращает функция приложения, на самом деле является JSX, а не HTML.

Компоненты React по соглашению имеют имена функций с заглавной буквы

Таким образом, приложение на самом деле является компонентом React.

Мы подробнее расскажем о JSX и о том, как React анализирует его, в следующих статьях.

Где вызывается компонент приложения?

В codeandbox найдите файл с именем index.js. Внутри этого файла есть фрагмент кода

root.render(
  <StrictMode>
    <App />    // App is used here
  </StrictMode>
);

Итак, компоненты React, хотя функции и не вызываются, а скорее используются как элемент HTML. Наряду с этим компоненты React также могут быть возвращены как часть JSX, что в основном означает, что компонент React может иметь внутри себя другие компоненты React.

Это все в первой части React 1O1.

Ресурсы

Первоначально опубликовано на https://www.linkedin.com.