Привет всем, мы можем изучать как 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.