React

Why React?

  • Declarative

    • How? What?

    We describe the final state of the desired UI.

  • Component-Based

    • We build encapsulated components that manage their own state.

Installation

npx create-react-app my-app

Runs the app in the development mode

npm run start
  • The page will reload if you make edits.
  • You will also see any lint errors in the console.

Creates a production build of the app in the build/ folder 

npm run build

JSX

						const element = 
Hello, I'm a JSX element!
  • A syntax extension to JavaScript.
  • JSX produces React “elements” - the smallest building blocks of React apps.

Components and Props

						function FirstComponent(props) {
							return 
 My first component {props.name} 

            }
  • Function component accepts a single "props" object argument with data and returns a React element.

App.js


function App() {
  return (
    

      
Animal riddles

    

  );
}

App.css


						.App {
							padding: 30px;
						}

Riddle.js


import React from 'react';
import './Riddle.css';

function Riddle() {
  return (
    

      

        {`A lot of spots. \nA long, long neck \nA funny scarf \nIt's a...`}
        
      


      

        
Giraffe!

        giraffe
      

    

  );
}

export default Riddle;

Riddle.css


.Riddle {
  display: flex;
  justify-content: space-between;

  width: 320px;
  margin-bottom: 30px;
}

.Riddle-Content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  white-space: pre-wrap;

  width: 220px;
  height: 150px;
}

.Riddle-Answer {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100px;
}

.Riddle-AnswerText {
  font-size: larger;
  font-weight: 600;

  margin: 0;
  margin-bottom: 15px;
}

.Riddle-Img {
  height: 100px;
}

.Riddle-Button {
  font-weight: 600;
  line-height: 0;
  text-align: center;

  color: #6200ee;

  width: 140px;
  padding: 20px 20px;

  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #6200ee;
  outline: transparent;

  box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.Riddle-Button:active {
  background-color: #e1cefc;
  transform: translate(0, 1px);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}

.Riddle-Button:hover {
  background-color: #e9dff8;
}

Hooks

							
import { useState } from 'react';
								
const [isVisible, setIsVisible] = useState(false);
  • useState returns a pair: the current state value and a function that lets you update it.
  • The only argument of useState is the initial state.

JavaScript expressions

You can put any valid JavaScript expression inside the curly braces in JSX.

Using props


const riddles = [
{
	text: `A lot of spots. \nA long, long neck \nA funny scarf \nIt's a...`,
	answer: 'Giraffe!',
	answerImgUrl: './giraffe.svg',
},
{
	text: `Green and long \nWith many teeth. \nBeautiful smile — \nIt's a...`,
	answer: 'Crocodile!',
	answerImgUrl: './crocodile.svg',
	},
	{
		text: `Lives in seas and rivers. \nHis hands are like two pincers. \nAs round as a cab. \nWho is it? — It's a...`,
		answer: 'Crab!',
		answerImgUrl: './crab.svg',
	},
	];
	
	function App() {
		return (
			

				
Animal riddles

        
			

			);
		}

Rendering Multiple Components
  • We loop through the array using the JavaScript map() function.
  • Keys help React identify which items have changed, are added, or are removed.
  • Keys should be given to the elements inside the array to give the elements a stable identity.

Thank you!