React basics

JSX Elements And Their Surroundings

JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go. That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array.

For example:

const navBar = <nav>I am a nav bar</nav>;

Inline function (common pattern)

example:

{(e) => console.log(e)}

Useful tools that can help us to create app

Create React App

npx create-react-app project-name

Creating a new state in a component - useState Hook

**import { useState } from "react";**
const [name, setName] = useState("Caroline");

the first one is the variable and the second one is function to set this variable (change it always)

Nested JSX

Nested JSX expressions can be saved as variables, passed to functions, etc., just like non-nested JSX expressions can! Here’s an example of a nested  JSX expression being saved as a variable:

const theExample = (
   <a href="<https://www.example.com>">
     <h1>
       Click me!
     </h1>
   </a>
 );

UseState limitations

The hooks must always be called the top level of a components and not inside another function.