React functions

Question 1

Какво е React?

Answer 1

React е ефективна, гъвкава библиотека с рамки на JavaScript с отворен код , която позволява на разработчиците да създават прости, бързи и мащабируеми уеб приложения
Полезен при изграждането на сложни и многократно използваеми компоненти на потребителския интерфейс (UI) на мобилни и уеб приложения, подхода е базиран на компоненти.
Важните характеристики на React са:
Поддържа изобразяване от страна на сървъра.
Той ще използва виртуалния DOM, а не реалния DOM (Data Object Model), тъй като манипулациите с RealDOM са скъпи.
Следва еднопосочно обвързване на данни или поток от данни.
Той използва многократно използвани или композируеми UI компоненти за разработване на изгледа.

Question 2

Какви са предимствата от използването на React?

Answer 2

MVC обикновено се съкращава като контролер за изглед на модел.
Използване на виртуален DOM за подобряване на ефективността: React използва виртуален DOM за изобразяване на изгледа. Както подсказва името, виртуалният DOM е виртуално представяне на реалния DOM. Всеки път, когато данните се променят в приложение за реакция, се създава нов виртуален DOM. Създаването на виртуален DOM е много по-бързо от изобразяването на потребителския интерфейс в браузъра. Следователно, с използването на виртуален DOM, ефективността на приложението се подобрява.
Лека крива на обучение: React има лека крива на обучение в сравнение с рамки като Angular. Всеки с малко познания по javascript може да започне да създава уеб приложения с помощта на React.
Удобен за SEO: React позволява на разработчиците да разработят ангажиращи потребителски интерфейси, които могат лесно да се навигират в различни търсачки. Той също така позволява изобразяване от страна на сървъра, което повишава SEO на приложението.
Компоненти за многократна употреба: React използва базирана на компоненти архитектура за разработване на приложения. Компонентите са независими и многократно използвани битове код. Тези компоненти могат да се споделят между различни приложения с подобна функционалност. Повторното използване на компоненти увеличава темпото на развитие.
Огромна екосистема от библиотеки, от които да избирате: React ви предоставя свободата да избирате инструментите, библиотеките и архитектурата за разработване на приложение въз основа на вашите изисквания.

Question 3

Какви са ограниченията на React?

Answer 3

Няколкото ограничения на React са посочени по-долу:
React не е пълноценна рамка, тъй като е само библиотека.
Компонентите на React са многобройни и ще отнеме време, за да разберете напълно предимствата на всички.
Може да е трудно за начинаещите програмисти да разберат React.
Кодирането може да стане сложно, тъй като ще използва вградени шаблони и JSX.

Question 4

Какво е useState() в React?

Answer 4

UseState() е вградена hook на React, която ви позволява да имате променливи на състоянието във функционални компоненти. Трябва да се използва, когато DOM има нещо, което динамично манипулира/контролира.
useState(0) ще върне кортеж tuple , където броячът е първият параметър, който представлява текущото състояние на брояча, а вторият параметър setCounter метод ще ни позволи да актуализираме състоянието на брояча.
useState(4) извиква всеки път 4 , което увеличава комплекситито
import ‘./App.css’;
import {useState} from ‘react’

function App() {
const [count, setCount] = useState(() => {
console.log(‘run function’);
return 4;

const decrementCount =() =_{
setCount(prevCount => prevCount - 1)
}

const incrementCount =() ={
setCount(prevCount => prevCount + 1)
}
return (
__
button onClick={decrementCount}-/button_
span{count}/span
button onClick={incrementCount}+/button
/
);
}

export default App;

Question 5

Какъв е правилния начин за използване на useState() /функция?

Answer 5

useState() за изобразяване на еднократно на функцията в началото :
function App() {
// work with objects

const [state, setState] = useState({ count: 5, theme: ‘blue’ });
const count = state.count;
const theme = state.theme;

const decrementCount = () =_ {
setState((prevState) =_ {
return {…prevState, count: prevState.count - 1 };
});
};

const incrementCount = () =_ {
setState((prevState) =_ {
return {…prevState, count: prevState.count - 1 };
});
};

return (
__
button onClick={decrementCount}-/button
span{count}/span
span{theme}/span
button onClick={incrementCount}+/button
/
);
}

Question 6

Какво представляват ключовете в React?

Answer 6

Ключът е специален низов атрибут, който трябва да бъде включен, когато използвате списъци с елементи
Use Array.map
Not for loop
Give each item unique key
Avoid using array index as the key

const ids = [1,2,3,4,5];
const listElements = ids.map((id)=>{
връщане(
li key={id.toString()}
{документ за самоличност}
/li
)
})

-Ключовете помагат при реакцията да се идентифицира кои елементи са добавени, променени или премахнати.
-Трябва да се дадат ключове на елементите на масива за осигуряване на уникална идентичност за всеки елемент.
-Без ключове React не разбира реда или уникалността на всеки елемент.
-С ключовете React има представа кой конкретен елемент е бил изтрит, редактиран и добавен.
-Ключовете обикновено се използват за показване на списък с данни, идващи от API.

Question 7

Какво е JSX?

Answer 7

JSX означава JavaScript XML. Това ни позволява да пишем HTML в JavaScript и да ги поставяме в DOM, без да използваме функции като appendChild() или createElement().

Without using JSX, we would have to create an element by the following process:
const text = React.createElement(‘p’, {}, ‘This is a text’);
const container = React.createElement(‘div’,’{}’,text );
ReactDOM.render(container,rootElement);
Using JSX, the above code can be simplified:
const container = (

<div>
<p>This is a text</p>
</div>

);
ReactDOM.render(container,rootElement);

Question 8

Какви са разликите между функционалните и класовите компоненти?

Answer 8

Functional components are nothing but JavaScript functions and can be declared using an arrow function or the function keyword:
function card(props){
return(
div className=”main-container”
h2Title of the card/h2
/div
)
}
const card = (props) =>{
return(
div className=”main-container”
h2Title of the card/h2
/div
)
}
Class components, on the other hand, are declared using the ES6 class:
class Card extends React.Component{
constructor(props){
super(props);
}
render(){
return(
div className=”main-container”
_h2Title of the card</h2
/div
)
}
}

Question 9

Handling props?

Answer 9

In functional components. Any prop provided as an argument to a functional component can be directly used inside HTML elements:
function StudentInfo(props){
return(
div className=”main”
h2{props.name}/h2
h4{props.rollNumber}/h4
/div
)
}
In the case of class component

class StudentInfo extends React.Component{
constructor(props){
super(props);
}
render(){
return(
div className=”main”
h2{this.props.name}/h2
h4{this.props.rollNumber}/h4
/div
)
}
}