Тест 4 Основы React

Ваша фамилия? *

Что из нижеперечисленного можно назвать основными преимуществами использования JS фреймворка React? *

API для создания компонуемых пользовательских интерфейсов

автоматическое управление состоянием пользовательского интерфейса

возможность использовать готовые функции для обращения к объектам DOM

быстрое манипулирование DOM

Что такое Virtual DOM? *

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

это DOM-дерева, которое не включает в себя все тяжеловесные части реального DOM

это DOM, с которым мы взаимодействуем напрямую. Мы можем вносить изменения в него, исходя из наших потребностей, React сразу применяет изменения к DOM.

Отметьте верные утверждения о компонентном подходе? *

Выберите все верные утверждения

.

Компонент - это независимый блок кода со своей логикой, который возможно использовать множество раз

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

Компонентный подход - это подход в разработке в основе использования отдельных и переиспользуемых компонентов

Компонентный подход - это однонаправленный поток данных

Что такое модель SPA *

одностраничные приложения

модель легкого написания кода

модель, в основе которой функционал SPA-салона

Какой компилятор помогает браузеру обрабатывать JSX? *

Gogol

JavaScript

Baby

Babel

От какого класса идет наследование всех компонентов? *

ReactJS.Component

Component

ReactComponent

React.Component

ComponentReact

Какой метод отвечает за вывод информации через React JS компонент? *

print

ReactDOM

console

render

react

Где правильно создан компонент? *

class App extends React.Component ({})

class App {}

class App extends React.Component {}

class App extends Component {}

React.Component {}

Сколько родительских HTML тегов может быть выведено в React JS компоненте? *

Не более 3

Не более 5

Неограниченное количество

Всегда 1

Не более 10

Где правильно выведен компонент через рендер? *

* представим что компонент называется Test
.

</Test>

<Test >

<Test>

</ Test>

Куда можно встроить готовый код из метода render()? *

В div или же в span

Только в тег, у которого есть id

Только в div

В любой тег

Как обратится к свойству weight? *

{props.weight}

{this.weight}

{this.props.weight}

{prop.weight}

{this.prop.weight}

Где правильно задана функция компонента в качестве свойства? *

argument={this.someFunction {}}

argument={this.someFunction ()}

argument=(this.someFunction)

argument={this.someFunction}

argument={someFunction}

Как много компонентов может быть на сайте? *

Не более 50

Неограниченное количество

Не более 10

Не более 100

Не более 300

В виде чего создается стиль компонента в компоненте? *

строки

переменной

объекта

массива

Как будет определено свойство цвета заливки компонента в стиле компонента? *

background-Color

BackgroundColor

background_Color

backgroundColor

background-color

С помощью чего задается состояние компонента? *

объекта state

свойства props

объекта style

объекта props

переменной state

Сколько компонентов создано в этом коде? *

class Counter extends React.Component {
render() {
var textStyle = {
fontSize: 72,
fontFamily: "sans-serif",
color: "#333",
fontWeight: "bold"
};
return (
<div style={textStyle}>
{this.props.display}
</div>
);
}
}
class CounterParent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
var backgroundStyle = {
padding: 50,
backgroundColor: "#FFC53A",
width: 250,
height: 100,
borderRadius: 10,
textAlign: "center"
};
var buttonStyle = {
fontSize: "1em",
width: 30,
height: 30,
fontFamily: "sans-serif",
color: "#333",
fontWeight: "bold",
lineHeight: "3px"
};
return (
<div style={backgroundStyle}>
<Counter display={this.state.count} />
<button style={buttonStyle}>+</button>
</div>
);
}
}
ReactDOM.render(
<div>
<CounterParent />
</div>,
document.querySelector("#container")
);

Что будет выведено на экран в этом коде? *

<body>
<div id="container"></div>
<script type="text/babel">
class LightningCounter extends React.Component {
render() {
return (
<h1>LightningCounterDisplay</h1>
);
}
}
class LightningCounterDisplay extends React.Component {
render() {

return (
<div>
<LightningCounter />
</div>
);
}
}
ReactDOM.render(
<LightningCounterDisplay />,
document.querySelector("#container")
);
</script>
</body>

LightningCounter /

Привет

LightningCounter

ошибка

LightningCounterDisplay

Какой метод вызывается сразу после того, как компонент визуализируется (рендерится)? *

setState

this.state

render

componentDidMount