FE 2022-06-03 React Practice

[Nolra]

Код занятия: https://github.com/tel-ran-de/FE-24-m/tree/fe-06-03-react-intro-practice

Домашнее занятие: Практикуем верстку в React 1) Создайте новое приложение с помощью create-react-app, назовите проект homework 2) Удалите лишние, презентационные файлы из src, оставив только App.js и index.js 3) Создайте папку components и разместите в ней два компонента, которые будут получать props из App, и которые App будет импортировать и отображать.

• компонент <Knowledge /> (props = [ 'html', 'css', 'js native' ] ), который должен мапить (возвращать в переборе массива) jsx

  <section>
  <h1>Knowledge</h1>
  <ul>
  {/* мапим <li>I know: item</li> здесь */}
  </ul>
  </section>

• компонент <Users /> (props = [ 'Brad', 'Inna', 'John', 'Rocky', 'Rainer Werner Fassbinder', 'Ludwig Josef Johann Wittgenstein', 'Superman' ], который должен мапить (возвращать в переборе массива) jsx

  <section>
  <h1>Users</h1>
  <ul>
  {/* мапим <li>Hello, item</li> здесь */}
  </ul>
  </section>

4) Используйте несложные стили css через style.module.css

Дополнительная задача (повышение сложности): 5) Добавьте в App массив цветов - пусть цветов будет 5 - colors = [ 'red', 'blue', 'orange' ,'beige' ,'aquamarine' ] Пусть и <Users /> и <Knowledge /> получают в props этот массив и пока цветов хватает раскрашивает текст в соответственный цвет при маппинге jsx через style={{color:colors[index]}}, если же в массиве закончились цвета, то пусть он(массив цветов) начинается с начала.

Ссылки с домашним заданием, пожалуйста прикрепляйте в комментариях, вопросы задавайте в личке.

[mwalexandra]

https://github.com/mwalexandra/TelRan/tree/main/FE/22.06.04_homework/homework/src

[Ginta-maker]

https://github.com/Ginta-maker/homework_07_06

[eduard-lab-front-end]

https://github.com/Eduard-basic24-25/react-intro-07-06-2022