React

Basics of React

Pratik Kabade, 20 October 2022

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

Content

  1. Create
  2. Organizational Structure
  3. Router
  4. CSS
  5. React Props
  6. Condition
  7. Array
  8. useState
  9. API
  10. From

1 Create

TypeScript Template

npx create-react-app my-app --template typescript

Default Template

npx create-react-app my-app

2 Organizational Structure

public
        index.html

src
        components
                navbar
                    BarComponents
                    NavContainer
                Security
                    GoogleSignIn
                    GoogleSignOut
        config

        error

        models

        pages

        routes
                AppRoute
        stylesheet
                App.css
        App
        index

.gitignore

package.json

package-lock.json

README.md

tsconfig.json

3 Router

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavContainer } from "../components/navbar/NavContainer";
import { Error404 } from "../error/Error404";
import { Home } from "../pages/Home/Home";
import { HomePage } from "../pages/User/HomePage";
import { Login } from "../pages/User/Login";
import { MyAccount } from "../pages/User/MyAccount";

export const AppRoute = () => {
  return (
    <div>
      <BrowserRouter>
        <NavContainer />

        <Routes>
          <Route>
            <Route index element={<Home />} />
            <Route path='/Login' element={<Login />} />
            <Route path='/HomePage' element={<HomePage />} />
            <Route path='/MyAccount' element={<MyAccount />} />

            <Route path='/Error404' element={<Error404 />} />
            <Route path='*' element={<Load4 />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
};

4 CSS

Inline Styling

<h1 style={ color: "red" }>Hello Style!</h1>

JavaScript Object

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial",
    };
    return (
      <div>
        <h1 style={mystyle}>Hello Style!</h1>
        <p>Add a little style!</p>
      </div>
    );
  }
}

CSS Stylesheet

import "./App.css";

5 React Props

Add a name attribute to the Car element:

return <User name='Max' />;

Use the name attribute in the component:

function Car(props) {
  return <h2>My name is {props.name}!</h2>;
}

6 Condition

Ternary if

And I am {props.age >= 18 ? 'old enough' : 'not old enough'} to go.

7 Array

declare

const Names = [
  { name: "Jake", age: 10 },
  { name: "Andrew", age: 15 },
  { name: "Phillip", age: 20 },
];

Retrieve

return (
  <div>
    <p>{Names[0].name}</p>

    {Names.map((Name, key) => {
      return (
        <>
          <p>
            {Name.name} is {Name.age}!
          </p>
        </>
      );
    })}
  </div>
);

8 useState

NUMBER

let [number, setNumber] = useState(0);

const increaseNum = () => {
  setNumber(number + 1);
};

return (
  <div>
    <p>{number}</p>
    <button onClick={increaseNum}>Increase</button>
  </div>
);

CASE

let [text, setText] = useState("");

const changeText = (e) => {
  setText(e.target.value.toUpperCase());
};

return (
  <div>
    <p>Capital Letters here ..</p>
    <input type='text' onChange={changeText} value={text} />
  </div>
);

VISIBILITY

let [show, setShow] = useState(true);

const hideShow = () => {
  setShow(!show);
};

return (
  <div>
    {show ? <p>This is the field</p> : <p></p>}
    <button onClick={hideShow}>Hide/Show</button>
  </div>
);

COLOR

let [color, setColor] = useState("black");

const colorChange = () => {
  setColor(color === "red" ? "black" : "red");
};

return (
  <div>
    <p style={ color: color }>Colored</p>
    <button onClick={colorChange}>Change Color</button>
  </div>
);

9 API

METHOD 1

fetch("https://catfact.ninja/fact")
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  });

METHOD 2A

const [name, setName] = useState("");
const [predict, setPredict] = useState(null);
const fetchData = () => {
  Axios.get(`https://api.agify.io/?name=${name}`).then((res) => {
    setPredict(res.data);
  });
};

METHOD 2B

let [number, setNumber] = useState(0);

const increaseNum = () => {
  setNumber(number + 1);
};

Retrieve

return (
  <div>
    <p>{catFact}</p>

    <input
      onChange={(e) => {
        setName(e.target.value);
      }}
    />

    <button onClick={fetchData}>Predict</button>

    <p>Name- {predict?.name}</p>
    <p>Predicted age- {predict?.age}</p>
    <p>Count- {predict?.count}</p>
  </div>
);

10 From

Requirements

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

schema

const schema = yup.object().shape({
  fullName: yup.string().required("fill the name"),
  email: yup.string().email().required(),
  age: yup.number().positive().integer().min(18).required(),
  password: yup.string().min(4).max(20).required(),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref("password"), null])
    .required(),
});

Declarations

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  resolver: yupResolver(schema),
});

onSubmit

const onSubmit = (data) => {
  console.log(data);
};

Retrieve

return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <input type='text' placeholder='Full Name' {...register("fullName")} />
    <p>{errors.fullName?.message}</p>

    <input type='email' placeholder='Email' {...register("email")} />
    <p>{errors.email?.message}</p>

    <input type='number' placeholder='Age' {...register("age")} />
    <p>{errors.age?.message}</p>

    <input type='Password' placeholder='Password' {...register("password")} />
    <p>{errors.password?.message}</p>

    <input
      type='Password'
      placeholder='Confirm Password'
      {...register("confirmPassword")}
    />
    <p>{errors.confirmPassword?.message}</p>

    <button>Submit</button>
  </form>
);