2 years ago

https://dev.to/sureshramani #what-is-reactjs What is React.js? https://reactjs.org/?ref=techvblogs.com is a free and open-source front-end JavaScript library for building user interfaces based on UI components.

In React.js you can create an interactive UI by combining the different components together.

So, in this post, we will be covering both the frontend app using React.js and also will create the RESTful APIs in the Laravel 9.

In the create.component.js file, add the following code: import React, { useState } from "react"; import Form from 'react-bootstrap/Form' import Button from 'react-bootstrap/Button' import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import axios from 'axios' import Swal from 'sweetalert2'; import { useNavigate } from 'react-router-dom' export default function CreateProduct() { const navigate = useNavigate(); const [title, setTitle] = useState("") const [description, setDescription] = useState("") const [image, setImage] = useState() const [validationError,setValidationError] = useState({}) const changeHandler = (event) => { setImage(event.target.files); }; const createProduct = async (e) => { e.preventDefault(); const formData = new FormData() formData.append('title', title) formData.append('description', description) formData.append('image', image) await axios.post(`http://localhost:8000/api/products`, formData).then(({data})=>{ Swal.fire({ icon:"success", text:data.message }) navigate("/")}).catch(({response})=>{ if(response.status===422){ setValidationError(response.data.errors)}else{ Swal.fire({ text:response.data.message, icon:"error"})} })} return (