CRUD #2 Post Data in React Js using API

Posted at: February 27, 2019 4:16 PM

Making a POST Request in React Js

In this lesson you can learn post json data in React Js to API with the help of an example. API has created in CodeIgniter and MySQL.

Bootstrap also installed in this tutorial. You can learn how to Integrate Bootstrap with React Js

Create src/AddProduct.js file and create stateful component AddProduct . Create form using React Bootstrap. Import Row, Form, Col, Button from react-bootstrap

import { Row, Form, Col, Button } from 'react-bootstrap';

src/AddProduct.js

Please see complete code of src/AddProduct.js

src/App.js

Import AddProduct from ./AddProduct for create product and ProductList component from ./ProductList for showing the proudcts and Container, Button, Alert from react-bootstrap for design.

src/index.js

API

API has created in CodeIgniter. You can learn CodeIgniter 3 Tutorial Step By Step

Controller

application/controllers/ReactApi.php

Model

application/models/ReactApi_model.php

MySQL Database `products` Table

Conclusion

In this lesson we have learned, how to post json data in React Js to API with the help of an example. We have covered JavaScript method fetch() for pull and post data using api.

This lesson also available on YouTube
API Fetch POST Request CodeIgniter MySQL

Please leave comments

1 Comments