Задачи для решения

На рендеринг

Сделайте так, чтобы метод render вывел на экран следующее:

<div>
	текст
</div>

Решение:

class App extends React.Component {
	render() {
		return <div>текст</div>;
	}
}

Пусть в методе render есть переменная text с текстом 'текст'. С ее помощью выведите следующее:

<div>
	текст
</div>

Решение:

class App extends React.Component {
	render() {
		const text = 'текст';
		return <div>{text}</div>;
	}
}

Пусть в методе render есть переменная text с текстом '<p>текст</p>'. С ее помощью выведите следующее:

<div>
	<p>текст</p>
</div>

Решение:

class App extends React.Component {
	render() {
		const text = <p>текст</p>;
		return <div>{text}</div>;
	}
}

Пусть в методе render есть переменная text1 с текстом '<p>текст1</p>' и переменная text2 с текстом '<p>текст2</p>'. С их помощью выведите следующее:

<div>
	<p>текст1</p>
	<p>!!!</p>
	<p>текст2</p>
</div>

Решение:

class App extends React.Component {
	render() {
		const text1 = <p>текст1</p>;
		const text2 = <p>текст2</p>;
		
		return <div>
			{text1}
			<p>!!!</p>
			{text2}
		</div>;
	}
}

На атрибуты

Пусть в методе render есть переменная attr с текстом 'block'. Сделайте так, чтобы метод render вывел на экран следующее (значение атрибута id должно вставится из переменной attr):

<div id="block">
	текст
</div>

Решение:

class App extends React.Component {
	render() {
		const attr = 'block';
		return <div id={attr}>текст</div>;
	}
}

Пусть в методе render есть переменная str с текстом 'block'. Сделайте так, чтобы метод render вывел на экран следующее (значение атрибута class должно вставится из переменной str):

<div class="block">
	текст
</div>

Решение:

class App extends React.Component {
	render() {
		const str = 'block';
		return <div className={str}>текст</div>;
	}
}

На работу с CSS

Дан див с текстом. Установите этому диву зеленый цвет, границу и border-radius в 30px.

Решение:

class App extends React.Component {
	render() {
		const css = {
			color: 'green',
			border: '1px solid red',
			borderRadius: '30px',
		};
		
		return <div style={css}>текст</div>;
	}
}

На условия

Пусть в методе render есть переменная show, которая может иметь значение true или false. Сделайте так, чтобы, если эта переменная равна true, метод render вывел на экран следующее:

<div>
	текст 1
</div>

А если эта переменная равна false, то следующее:

<div>
	текст 2
</div>

Решение:

class App extends React.Component {
	render() {
		const show = true;
		
		if (show) {
			var text = 'текст 1';
		} else {
			var text = 'текст 2';
		}
		
		return <div>{text}</div>;
	}
}

На циклы

Пусть в методе render есть переменная arr, в которой лежит массив с элементами ['a', 'b', 'c', 'd', 'e']. Сделайте так, чтобы метод render вывел на экран следующее (в каждую лишку запишется один из элементов массива):

<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
	<li>e</li>
</ul>

Решение:

class App extends React.Component {
	render() {
		const arr = ['a', 'b', 'c', 'd', 'e'];

		const list = arr.map(function(item, index) {
			return <li key={index}>{item}</li>;
		});

		return <ul>
			{list}
		</ul>
	}
}

На методы

Пусть класс App имеет метод getText(), который своим результатом возвращает '<p>текст</p>'. Используя метод getText() в методе render выведите на экран следующее:

<div>
	<p>текст</p>
</div>

Решение:

class App extends React.Component {
	getText() {
		return <p>текст</p>;
	}

	render() {
		const text = this.getText();
		return <div>
			{text}
		</div>
	}
}

Пусть класс App имеет метод getNum1(), который своим результатом возвращает число 1 и метод getNum2(), который своим результатом возвращает число 2. Используя эти методы в методе render выведите на экран сумму результатов этих методов (3 - результат сложения getNum1() и getNum2()):

<div>
	текст 3
</div>

Решение:

class App extends React.Component {
	getNum1() {
		return 1;
	}

	getNum2() {
		return 2;
	}

	render() {
		return <div>
			текст { this.getNum1() + this.getNum2() }
		</div>
	}
}