React Basics to Advanced

1. First Component

Components are like functions that return HTML elements.


import reactDom from 'react-dom';

function Greeting(){
  return <h4>Hello</h4>;
}

reactDom.render(<Greeting/>, document.getElementById('root')
);

2. JSX Basics

JSX converts HTML tags into react elements.

The HTML code must be wrapped in ONE top level element.

Use semantic HTML

Use camelCase for HTML attributes.

Close every element

To write HTML on multiple lines, put the HTML inside parentheses

import ReactDom from 'react-dom'

function Greeting() {
  return (
    <div className=''>
      <h4>Hello</h4>
      <ul>
        <li>
          <a href='/'>Hello</a>
        </li>
      </ul>
    </div>
  )
}

ReactDom.render(<Greeting />, document.getElementById('root'))

3. Nested Components

import ReactDom from 'react-dom'

function Greeting() {
  return (
    <div>
      <Person />
      <Message />
    </div>
  )
}

const Person = () => <h2>John Smith</h2>
const Message = () => {
  return <p>This is my message</p>
}

ReactDom.render(<Greeting />, document.getElementById('root'))

4. CSS in React

Import CSS file and note the class name in React is 'className'

import ReactDom from 'react-dom'
import './index.css'

function BookList() {
  return (
    <section className='booklist'>
      <Book />
    </section>
  )
}

Inline JSX CSS

const Author = () => (
  <h4 style={{ color: '#617d98', fontSize: '0.75rem', marginTop: '0.25rem' }}>
    Andy Weir
  </h4>
)

5. JS in JSX

<h1>React is {5 + 5} times better with JSX</h1>;

6. Props

Props are arguments passed into React components.

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Advanced

7. useState hook

The React useState Hook allows us to track state in a function component. We initialize our state by calling useState in our function component. useState accepts an initial state and returns two values:

The current state. A function that updates the state.

State doesn't get updated if not using useState.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

8. useEffect hook

The useEffect Hook allows you to perform side effects in your components.

Some examples of side effects are: fetching data, directly updating the DOM, and timers.

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

ReactDOM.render(<Timer />, document.getElementById('root'));

9. useReducer

The useReducer Hook is similar to the useState Hook.

It allows for custom state logic.

If you find yourself keeping track of multiple pieces of state that rely on complex logic, useReducer may be useful.

import { useReducer } from "react";
import ReactDOM from "react-dom";

const initialTodos = [
  {
    id: 1,
    title: "Todo 1",
    complete: false,
  },
  {
    id: 2,
    title: "Todo 2",
    complete: false,
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
};

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos);

  const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id });
  };

  return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  );
}

ReactDOM.render(<Todos />, document.getElementById('root'));

9. useFetch custom hook

Hooks are reusable functions.

When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook.

Custom Hooks start with "use". Example: useFetch.

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

ReactDOM.render(<Home />, document.getElementById("root"));

Blog