{"id":14391,"date":"2023-03-27T22:12:44","date_gmt":"2023-03-27T18:42:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-save-react-form-data-into-database-using-spring-boot-39li\/"},"modified":"2023-03-27T22:12:44","modified_gmt":"2023-03-27T18:42:44","slug":"how-to-save-react-form-data-into-database-using-spring-boot-39li","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-save-react-form-data-into-database-using-spring-boot-39li\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0630\u062e\u06cc\u0631\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0631\u0645 \u0648\u0627\u06a9\u0646\u0634 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Spring boot"},"content":{"rendered":"
\n

\u0645\u0631\u062d\u0644\u0647 1: \u067e\u0631\u0648\u0698\u0647 react \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

\u0645\u0631\u062d\u0644\u0647 2: \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

\u0645\u0631\u062d\u0644\u0647 3: register.jsx \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n

\u0645\u0631\u062d\u0644\u0647 4: \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc cdn \u0631\u0627 \u062f\u0631 public\/index.html \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0647\u0645\u0647 \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc CSS \u0645\u0627.<\/p>\n

\n
<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0628\u062f\u0646\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n
\n
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\"><\/script>\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
index.html \u0645\u0627\u0646\u0646\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a<\/p>\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"utf-8\" \/>\n  <link rel=\"icon\" href=\"https:\/\/dev.to\/realnamehidden1_61\/%PUBLIC_URL%\/favicon.ico\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n  <meta name=\"theme-color\" content=\"#000000\" \/>\n  <meta name=\"description\" content=\"Web site created using create-react-app\" \/>\n  <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\">\n  <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%\/logo192.png\" \/>\n  <!--\n      manifest.json provides metadata used when your web app is installed on a\n      user's mobile device or desktop. See https:\/\/developers.google.com\/web\/fundamentals\/web-app-manifest\/\n    -->\n  <link rel=\"manifest\" href=\"%PUBLIC_URL%\/manifest.json\" \/>\n  <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n\n      Unlike \"\/favicon.ico\" or \"favicon.ico\", \"https:\/\/dev.to\/realnamehidden1_61\/%PUBLIC_URL%\/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n  <title>React App<\/title>\n<\/head>\n\n<body>\n  <noscript>You need to enable JavaScript to run this app.<\/noscript>\n  <div id=\"root\"><\/div>\n  <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"\n    integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\"\n    crossorigin=\"anonymous\"><\/script>\n<\/body>\n\n<\/html>\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
axios \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/p>\n
\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n
\u067e\u0648\u0634\u0647 \u0633\u0631\u0648\u06cc\u0633 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0641\u0627\u06cc\u0644 user.service.js \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n
\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n
user.service.js<\/p>\n
\n
import axios from \"axios\";\nconst API_URL = \"http:\/\/localhost:8080\";\n\nclass UserService {\n    saveUser(user) {\n        return axios.post(API_URL + \"\/saveUser\", user);\n    }\n}\n\nexport default new UserService\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
RegisterForm.jsx<\/p>\n
\n
import React, { useState } from 'react'\nimport userService from '.\/service\/user.service';\n\nfunction RegisterForm() {\n    const [user, setUser] = useState({\n        userName: \"\",\n        email: \"\",\n        mobile: \"\",\n        address: \"\",\n    });\n    const [msg, setMsg] = useState(\"\")\n\n    const handleChange = (e) => {\n        const value = e.target.value;\n        setUser({ ...user, [e.target.name]: value })\n    }\n\n    const RegisterUser = (e) => {\n        e.preventDefault();\n        console.log(user);\n        userService.saveUser(user)\n            .then((res) => {\n                console.log(\"User Added Successfully\");\n                setMsg(\"Used Added Sucessfully\");\n                setUser({\n                    userName: \"\",\n                    email: \"\",\n                    mobile: \"\",\n                    address: \"\",\n                })\n            }).catch((error) => {\n                console.log(error);\n            });\n    }\n    return (\n        <>\n            <div className=\"container mt-3\">\n                <div className=\"row\">\n                    <div className=\"col-md-6 offset-md-3\">\n                        <div className=\"card\">\n                            <div className=\"card-header fs-3 text-center\">\n                                Register User\n                            <\/div>\n                            {msg && <p className=\"fs-4 text-center text-success\">{msg}<\/p>}\n                            <div className=\"card-body\">\n                                <form onSubmit={(e) => RegisterUser(e)}>\n                                    <div className=\"mb-3\">\n                                        <label>Enter UserName<\/label>\n                                        <input type=\"text\" name=\"userName\" className=\"form-control\" onChange={(e) => handleChange(e)}\n                                            value={user.userName} \/>\n                                    <\/div>\n                                    <div className=\"mb-3\">\n                                        <label>Enter Email<\/label>\n                                        <input type=\"text\" name=\"email\" className=\"form-control\"\n                                            onChange={(e) => handleChange(e)}\n                                            value={user.email} \/>\n                                    <\/div>\n                                    <div className=\"mb-3\">\n                                        <label>Enter mobile No<\/label>\n                                        <input type=\"text\" name=\"mobile\" className=\"form-control\"\n                                            onChange={(e) => handleChange(e)}\n                                            value={user.mobile} \/>\n                                    <\/div>\n                                    <div className=\"mb-3\">\n                                        <label>Enter Address<\/label>\n                                        <input type=\"text\" name=\"address\" className=\"form-control\"\n                                            onChange={(e) => handleChange(e)}\n                                            value={user.address} \/>\n                                    <\/div>\n                                    <button className=\"btn btn-primary col-md-12\">Submit<\/button>\n                                <\/form>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/>\n    )\n}\n\nexport default RegisterForm\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n
\u067e\u0631\u0648\u0698\u0647 \u0628\u0648\u062a Spring \u0631\u0627 \u0628\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n
\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n
\u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc<\/p>\n
\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n
pom.xml<\/p>\n
\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<project xmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n    xsi:schemaLocation=\"http:\/\/maven.apache.org\/POM\/4.0.0 https:\/\/maven.apache.org\/xsd\/maven-4.0.0.xsd\">\n    <modelVersion>4.0.0<\/modelVersion>\n    <parent>\n        <groupId>org.springframework.boot<\/groupId>\n        <artifactId>spring-boot-starter-parent<\/artifactId>\n        <version>3.0.5<\/version>\n        <relativePath\/> <!-- lookup parent from repository -->\n    <\/parent>\n    <groupId>com.example<\/groupId>\n    <artifactId>SpringBootReact<\/artifactId>\n    <version>0.0.1-SNAPSHOT<\/version>\n    <name>SpringBootReact<\/name>\n    <description>Demo project for Spring Boot<\/description>\n    <properties>\n        <java.version>17<\/java.version>\n    <\/properties>\n    <dependencies>\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-data-jpa<\/artifactId>\n        <\/dependency>\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-web<\/artifactId>\n        <\/dependency>\n\n        <dependency>\n            <groupId>com.mysql<\/groupId>\n            <artifactId>mysql-connector-j<\/artifactId>\n            <scope>runtime<\/scope>\n        <\/dependency>\n        <dependency>\n            <groupId>org.projectlombok<\/groupId>\n            <artifactId>lombok<\/artifactId>\n            <optional>true<\/optional>\n        <\/dependency>\n        <dependency>\n            <groupId>org.springframework.boot<\/groupId>\n            <artifactId>spring-boot-starter-test<\/artifactId>\n            <scope>test<\/scope>\n        <\/dependency>\n    <\/dependencies>\n\n    <build>\n        <plugins>\n            <plugin>\n                <groupId>org.springframework.boot<\/groupId>\n                <artifactId>spring-boot-maven-plugin<\/artifactId>\n                <configuration>\n                    <excludes>\n                        <exclude>\n                            <groupId>org.projectlombok<\/groupId>\n                            <artifactId>lombok<\/artifactId>\n                        <\/exclude>\n                    <\/excludes>\n                <\/configuration>\n            <\/plugin>\n        <\/plugins>\n    <\/build>\n\n<\/project>\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u06a9\u0627\u0631\u0628\u0631\u062f.\u062e\u0648\u0627\u0635<\/p>\n
\n
\nspring.datasource.url=jdbc:mysql:\/\/localhost:3306\/new\nspring.datasource.username=root\nspring.datasource.password=root\n\n\nspring.jpa.hibernate.ddl-auto=update\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
User.java<\/p>\n
\n
package com.example.demo.model;\n\nimport jakarta.persistence.Entity;\nimport jakarta.persistence.GeneratedValue;\nimport jakarta.persistence.GenerationType;\nimport jakarta.persistence.Id;\nimport jakarta.persistence.Table;\nimport lombok.AllArgsConstructor;\nimport lombok.Data;\nimport lombok.NoArgsConstructor;\n\n@Data\n@AllArgsConstructor\n@NoArgsConstructor\n@Entity\n@Table(name = \"user_tab\")\npublic class User {\n\n    @Id\n    @GeneratedValue(strategy = GenerationType.IDENTITY)\n    private Integer id;\n\n    private String userName;\n\n    private String address;\n\n    private String mobile;\n\n    private String email;\n}\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
UserRepo.java<\/p>\n
\n
package com.example.demo.repo;\n\nimport org.springframework.data.jpa.repository.JpaRepository;\n\nimport com.example.demo.model.User;\n\npublic interface UserRepo extends JpaRepository<User, Integer>{\n\n}\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
UserController.java<\/p>\n
\n
package com.example.demo.controller;\n\nimport org.springframework.beans.factory.annotation.Autowired;\nimport org.springframework.http.HttpStatus;\nimport org.springframework.http.ResponseEntity;\nimport org.springframework.web.bind.annotation.CrossOrigin;\nimport org.springframework.web.bind.annotation.PostMapping;\nimport org.springframework.web.bind.annotation.RequestBody;\nimport org.springframework.web.bind.annotation.RestController;\n\nimport com.example.demo.model.User;\nimport com.example.demo.repo.UserRepo;\n\n@CrossOrigin(origins = \"http:\/\/localhost:3000\")\n@RestController\npublic class UserController {\n\n    @Autowired\n    private UserRepo repo;\n\n    @PostMapping(\"\/saveUser\")\n    public ResponseEntity<String> saveUser(@RequestBody User user){\n        repo.save(user);\n        return new ResponseEntity<String>(\"User Saved\",HttpStatus.OK);\n    }\n}\n\n<\/code><\/pre>\n
\n
\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u062d\u0627\u0644\u0627 \u0647\u0631 \u062f\u0648 \u0628\u0631\u0646\u0627\u0645\u0647 react \u0648 Spring boot \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n
\u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0641\u0631\u0645 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/p>\n
\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n
\u0631\u0648\u06cc \u0627\u0631\u0633\u0627\u0644 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f<\/p>\n
\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n
\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f<\/p>\n
\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
\u0645\u0631\u062d\u0644\u0647 1: \u067e\u0631\u0648\u0698\u0647 react \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0645\u0631\u062d\u0644\u0647 2: \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u0645\u0631\u062d\u0644\u0647 3: register.jsx \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0645\u0631\u062d\u0644\u0647 4: \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc cdn \u0631\u0627 \u062f\u0631 public\/index.html \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f \u0642\u0628\u0644 \u0627\u0632 \u0647\u0645\u0647 \u0634\u06cc\u0648\u0647 \u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0628\u0631\u0627\u06cc \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc CSS \u0645\u0627. <link href=”https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC” crossorigin=”anonymous”> …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-14391","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/14391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=14391"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/14391\/revisions"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=14391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=14391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=14391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}