Scribd
Upload
19 views33 pages

Crud React

Uploaded by

saulo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
19 views33 pages

Crud React

Uploaded by

saulo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 33
201032019 React CRUD Example | MERN Stack Tutorial > ( hotjar See how your visitors are really using your website. TRY IT FOR FREE Home > Reacts > REACTJS React CRUD Example | MERN Stack Tutorial @ vy rons astupdated vez, 2018 React CRUD Example | MERN Stack Tutorial is today’s leading topic. This article's goal is to explain the by making the CRUD application. Most applications are CRUD applications. If you don't know what CRUD is, it's short for Create, Read, Update and Delete. This application is also called a MERN Stack application because we are using MongoDB, Express, React, and Node,js tech stack. This article will show you the steps to create an app where the user can create new business, fetch that business, edit business and delete business using Reacts. Let u Ifyou want to learn more about Rez Complete Guide (incl. React Router bid h ig fee) oi ed FOR YOUR DORM 1 What is React? 2.Why use React? hitpsifappdividend.com/2018/17/Ireaet-cud-example-mem-stacktutrall 113 2010372019 React CRUD Example | MERN Stack Tutorial hitpsifappdividend.com/2018/17/Ireaet-cud-example-mem-stack-tutrall aaaas te x) 3. hotjar See how your visitors are really using your website. TRY IT FOR FREE Pres Wunngure HEGLO VUUNE 8 #3: Create the bootstrap form 9#4; Submit the Form 10 #5: Create a backend on Node,js 11 #6: Setup a MongoDB database 12 #7: Create a Mongoose Schema 13 #8: Define the route for Node,js Express application 14 #9: Install Axios library and send a POST request. 15 #10: Display the backend data 16 #11: Edit and Update Functionality 17 #12: Delete the data What is React? React,js is UI Library and not a complete Framework like Angular. React is the JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations. You can find its official documentation here. Why use React? React.js allows you to express how your app should look at any given point in time. React will automatically manage all UI updates when your underlying data changes. When the data changes, React conceptually hits the “refresh” button and knows to only update the changed parts. The main reason to use React for your next project is following. 1. Fast Learning Curve. 2, Reusable Components. 3, Fast render with Virtual DOM. 4, Clean Abstraction. 5, Redux: A State Management L!" 6. Great Developer Tools. 7. React Native: You can build a or iOS. TON yh Aigsce) =o Who uses React? meee MCW Aside from Facebook and Instagra Dropbox, PayPal, Netflix, Airbnb a 2199 201032019 React CRUD Example | MERN Stack Tutorial 4. x hotjar See how your visitors are really using your website. TRY IT FOR FREE 1, MacUs (Mojave) 2. Node v10.11.0 3. NPM v6.4.1 4, MongoDB shell version v3.6.3 5, MongoDB version v3.6.3 6, Reacts version 16.6.1 React CRUD Example Create a new React app using the following command. #1: Install React Application npx create-react-app reactcrud cd reactcrud npm start. fem es Pence SCR RU ec Ce a ee ead pore ne eros rn eee tes yarn add v1.9.4 ee a) Pot c) COME carey Ce eee ee ee eC Peers G ieee Ree CM tice eea ts MCR teeta a ce i Deeg Nees Corte seam tetsteme tear ffer.from() methods instead crac Dee ree satts SRC nad ee eee To upgrade, run the follow hitps:lappdividend.com/2018/111 react srample-mem-stack-tutorill 133 201032019 React CRUD Example | MERN Stack Tutorial “3 — x hotjar See how your visitors are really using your website. TRY IT FOR FREE Go to this URL: http://localhost:3000/ Edit src/App. js and save to reload. MEE Teabaccr-leis Now, install the Bootstrap 4 Framework using the following command. yarn add bootstrap # or npm install bootstrap --save Import the Bootstrap CSS Framewd Modify the code inside the src >> Aj tps ifappdividend com/2018/17Ireaet-cud-example-mem-stack-tutrial! 4133 201032019 React CRUD Example | MERN Stack Tutorial > hotjar See how your visitors are really using your website. TRY IT FOR FREE class App extends Component { render() { return (
ch2>React CRUD Tutorial wu + } export default App; Save the file and go to the browser and you can see that we have successfully integrated bootstrap 4 in our react application. #2: Configure React routing Type the following command to install the react- router-dom module, If you want to find more information about the react-router-dom module, then you can follow this documentation. yarn add react-router-dom for npn install react-router-dom --save Go to the index,s file and Wrap the BrowserRouter object around the App,js component. U/ index.js import React from ‘react’; import ReactDOM from ‘react-dom’ ; import { BroserRouter } from ‘reac} import App from ‘./App" import * as serviceWorker from *./s| ReactDOM. render( bid h ig fee) oi ed FOR YOUR DORM , document .getélef servicehorker.unregister(); Now, create three components. hitpsifappdividendcom/2018/11/Ireaet-cud-exampl 8/33 201032019 React CRUD Example | MERN Stack Tutorial ee > hotjar See how your visitors are really using your website. TRY IT FOR FREE 2. edit.componentys 3. index.component js // create. component. js import React, { Component } from ‘react’; export default class Create extends Component { render() { return (

Welcone to Create Conponent!!

) x // edit. component. js import React, { Component } fron ‘react’; export default class Edit extends Component { render() { return (
) x // index. component. js import React, { Component } fron ‘react’; export default class Index extends Comnonen render() { return ( ceive ‘ hotjar See how your visitors are really using your website. TRY IT FOR FREE import Create from import Edit from import Index from -/components/create. component’; /conponents/edit . component" ; [components /index. component: ; Class App extends Component { render() { return (
‘navbar navbar-expand-1g navbar-light bg-light"> ‘navbar-nav mr-auto"> ‘nav-iten">
  • Create ‘nav Link" >Home
  • Index

    • Welcome to React CRUD Tutorial


    Register Business" classNam -primary"/>
    React CRUD Example Home Cresie index Welcome to React CRUD Tutorial Add New Business: ‘Add Person Name: ‘bd Busines Nae: bid h ig fee) oi ed FOR'YOUR DORM ‘hdd OST Number: hitpsifappdividend.com/2018/17/Ireaet-cud-example-mem-stack-tutrall 8133 zonsz018 React CRUD Example |MERN Stack Ttoral 2, a hotjar See how your visitors are really using your website. TRY IT FOR FREE 1. person name 2. business name 3. gst number So we need to create four functions that can track the values of the textbox and set that state according to it. Also, the fourth function will send the POST request to the node express server. Now, first, we will define the constructor and set the initial state and then also bind this to the different events inside the constructor. Then define the different functions with each input text values. So when the user types inside the textbox, we set the state according to it. So, let say, the user is typing the person name inside the textbox, we are changing the state value of person name. Finally, same for all of the inputs and when we submit the form, we get the values from the state and send to the POST request. 11 DIY PROJECTS: FOR'YOUR DORM hitpsifappdividend.com/2018/171 Ireaet-cud-example-mem-stack-tutrall 9133 201032019 React CRUD Example | MERN Stack Tutorial > hotjar See how your visitors are really using your website. TRY IT FOR FREE constructor(props) { super(props) ; ‘this.onChangePersonName = this.onChangePersonNane.bind(this); ‘this.onChangeBusinessName = this.onChangeBusinessNane.bind(this) ; ‘this.onChangeGstNumber = this.onChangeGstNumber.bind( this); ‘this.onSubmit = this.onSubmit.bind(this); this.state = { person_name: '*, business_name: *', business_gst_number: y y onchangePersonName(e) { ‘this. setState({ person_name: e.target.value Ds + ‘onChangeBusinessName(e) { this. setstate({ business _nane: e.target.value » + onchangeGstNumber(e) { this. setstate({ business_gst_number: e.target.value ») y onsubmit(e) ( e. preventdefault( console.1og("The values are ${this.state.person_nane}, ${this.state.business_nane}, a nd $(this.state.business_gst_nunber}) this. setstate({ person_nane: *', business name: ‘*, business_gst_nunber: '" » y render() { return (
    Add New Business< Person} hotjar See how your visitors are really using your website. TRY IT FOR FREE ‘this. state.business_name} onChange={ this ..onChangeBusinessName) P
    #5: Create a backend on Node.js Inside our reacterud project root, create one folder called api and go inside that folder and initialize the packagejson file, npm init -y Now, install the following node,js dependencies. yarn add express body-parser cors mongoose # or npm install express body-parser cor Also, install the nodemon as a restart every time, we change our st Penh ans teh aos FOR YOUR DORM pm install nodenon --save-dev Now, inside the api folder, create o1 inside it. hitpsifappdividend.com/2018/17/Ireaet-cud-exampl 183 201032019 RReacl CRUD Example | MERN Stack Tutorial 4 x hotjar See how your visitors are really using your website. TRY IT FOR FREE const PORT = 4000; const cors = require(*cors'); app.use(cors()); app. use(bodyParser urlencoded({extended: true)));, app.use(bodyParser.json()); app.Listen(PORT, function(){ console. log('Server is running on Port:', PORT); ys Save the file and open a new tab terminal inside the api folder and hit the following command to spin up the node,s server. You can see inside the terminal that, our nodejs server is running. cee seactcrudjapi (zsh) 1 Sc) CC aay rver is running on Port: 4000 hitps:lappdividend.com/2018/111 react srample-mem-stack-tutorill 12199 201032019 React CRUD Example | MERN Stack Tutorial > hotjar See how your visitors are really using your website. TRY IT FOR FREE Kelated Fost: NoSQL MongoD# tutorial | have already installed the MongoDB on Mac. So | am starting the MongoDB server by the following command. mongod Inside the api folder, create one file called the DB.js and add the following line of code. U1 0B. 55 module.exports = { DB: ‘mongodb: //localhost:27017/reactcrud’ + In my local MongoDB database, the username and password are empty, but in the production, you need to create one admin user and assign the database to that user. Now, import this DBs file into the server,js file. // server.js const express = require("express'); const app = express(); const bodyParser = require( 'body-parser'); const PORT = 4000; const cors = require(‘cors'); const mongoose = require(*mongoose'); const config = require("./DB.js"); mongoose.Promise = global. Promise; mongoose.connect(config.DB, { useNewUrlParser: true }).then( () => {console.1og( "Database is connected") }, { console.log("Can not connect to the database'+ err)} ‘app-use(cors()); ‘app-use(bodyParser. urlencoded({exte app.use(bodyParser.json()); app.Listen(PoRT, function(){ 11 DIY PROJECTS console. log( "Server is running on| FOR YOUR DORM Ds Save the file, and you can see connected to a mongodb database hitpsifappdividend.com/2018/17/Ireaet-cud-example-mem-stack-tutrall 19199 201032019 React CRUD Example | MERN Stack Tutorial > hotyar — seehow your vistors are really using your website TRY IT FOR FREE // business.model..js const mongoose = require(*mongoose'); const Schema = mongoose.Schema; // define collection and schema for Business let Business = new Schema({ person_nane: { type: String » business nane: { type: String b business_gst_nunber: { ‘type: Nunber ) BL collection: ‘business’ Ds module.exports = mongoose.model("Business’, Business); We have taken three fields called person_name, business_name, and business_gst_number with its datatypes. #8: Define the route for Node.js Express application Write the CRUD code inside the business.route js file. bid h ig fee) oi ed FOR YOUR DORM hitpsifappdividend.com/2018/171 Ireaet-cud-example-mem-stack-tutrall 14i93 201032019 React CRUD Example | MERN Stack Tutorial > hotjar See how your visitors are really using your website. TRY IT FOR FREE // Require Business model in our routes module let Business = require("./business.model' ); // defined store route businessRoutes.route('/add").post(function (req, res) { let business = new Business(req.body) ; business.save() -then(business => { res. status(2@@).json({'business": "business in added successfully’ }); » seatch(err => { res.status(400).send("unable to save to database"); ns Ys // befined get data(index or Listing) route businessRoutes.route("/*).get(function (req, res) { Business.find(function(err, businesses){ iF(err){ console. log(err); y else { res. json(businesses) ; ? Ys Ds // defined edit route businessRoutes.route('/edit/:id').get(function (req, res) { let id = req.params. id; Business. findById(id, function (err, business){ res. json(business) ; Ys Ds // defined update route businessRoutes.route(' /update/:id').post(function (req, res) { Business.findById(req.params.id, function(err, business) { if (business) res.status(404).send("data is else { business.person_nane = req. business.business_nane = re business.business_gst_nunbe business. save().then(businel lth eel ressdson( "Update complete ea col tT » scatch(err => { res.status(400). send(*u| Ys y hitpsifappdividendcom/2018/17/Ireaet-cud-exampl yrm-stacktutrial! 19199 201032019 React CRUD Example | MERN Stack Tutorial wr im > x hotjar See how your visitors are really using your website. TRY IT FOR FREE if(err) res.json(err); else res. json( ‘Successfully removed") ns Ds module.exports = businessRoutes; Here, we have defined the CRUD operations for MongoDB. So when the request hits the server, it maps the URI and according to URI, the above function will be executed, and database operation will be performed and send the response to the client. Here, we have used a Mongoose ORM to save, update, delete the data from the database. Mongoose is an ORM used in MongoDB database. Now, we have all the CRUD operations set up on the route file; we need to import inside the server,js file. So, our final server,js file looks like this. U server.js const express = require(*express'); const app = express(); const bodyParser = require( ‘body-parser'); const PORT = 4080; const cors = require(‘cors'); const mongoose = require('mongoose'); const config = require(’./DB.js"); const businessRoute = require(’./business. route’); mongoose.Promise = global.Pronise; mongoose.connect(config.DB, { useNewUriParser: true }).then( © => {console.1og( "Database is connected") }, err => { console.log("Can not connect to the database'+ err)} app-use(cors()); ‘app-use(bodyParser.urlencoded( {exte ‘app-use(bodyParser.json())3 app.use(*/business', businessRoute) app.listen(PORT, function(){ bid h ig fee) oi ed console, log("Server 1s running oni ys emcee weed LT Save the file and see the terminal at hitpsifappdividendcom/2018/11/Ireaet-cud-exampl 16199 zovnazot9 React CRUD Example | MERN Stack Tutorial : x > hotyar — seehow your vistors are really using your website TRY IT FOR FREE Tutorial Example article. yarn add axios # or npn install axios --save Now, send the HTTP POST request along with the form data to the node js server. We will send the data as an object because we have used the body-parser at the backend to pluck the data from the request and save it in the database. Write the following code inside the create.componentjs file. bid h ig fee) oi ed FOR'YOUR DORM hitpsifappdividend.com/2018/171 Ireaet-cud-example-mem-stack-tutrall risa 201032019 React CRUD Example | MERN Stack Tutorial > hotjar See how your visitors are really using your website. TRY IT FOR FREE export default class Create extends Component { constructor(props) ¢ super(props); ‘this.onchangePersonNane = this.onChangePersonNane.bind( this); this.onchangedusinessName = this.onchangedusinessNane.bind(this); this.onChangeGstNumber = this.onChangeGstNumber.bind(this) ; this.onSubmit = this.onSubmit.bind(this); this.state = { person_nane: business name: '', business_gst_number:"* ? + onChangePersonNane(e) { this. setstate({ person_nane: e.target.value vs + onChangeBusinessName(e) { this. setstate({ business_nane: e.target.value » } onChangeGstNunber(e) { this.setstate({ business_gst_nunber: e.target.value » + onsubmit(e) ¢ e.preventdefault(); const obj = { person_nane: this.state.person_nane, business_name: this.state.business_nane, business _gst_nunber: this.state.business_gst_nunber 8 axios.post(*http://localhost:4000/business/add’, obj) -then(res => console.log(res ata); this. setstate({ person_name: '', business nane: '* business gst_number: '' » 11 DIY PROJECTS: FOR'YOUR DORM y render() { return (
    Add New Business
    ) + } Now, submit the form with proper values and open your browser console panel and see the response. Al) samen cous sis mime >| Be Tle |r omaeors | React CRUD Example Welcome to React CRUD Tutorial | Rent GLIA Re as Add New Business _— Ny) Ag s<0) =o 1 ed crn FOR YOUR DORM hitpsifappdividend.com/2018/17/Ireaet-cud-example-mem-stack-tutrall 19199 201032019 React CRUD Example | MERN Stack Tutorial Also, ngw check inside the mongodb database and see the values. x hotiar see how your visitors are really using your website. TRY IT FOR FREE To seeMhe values inside the database, we can start a mongoshell and logk.at the.valuss.las the database. oc ar) oe ie 5 ee aoe 2018-11-11T21:28:12.618+@53@ I CONTROL [initandli: Prmrarrer eesti bac Maree Dee eer Rue CC } 2018-11-11721:28:12.618+0530 I CONTROL [initandlisten] Sand ee eet eter ene cate Srey a Er Ue MmRGTeCIg eS Creed ne Peru etn Prirtaraerss Somer eec ures iterfaces. If this behavior is desired, start the Sresnhrsers es y Tome) Poa Siete eee eee ey 2018-11-11721:28:12.618+0530 I CONTROL [initandlisten] ecg) ee RR asa) > db. business. find().prettyO { aCe fm reer a Ge) eee a ame CTL Sera "v's @) So, we can see that our data is added successfully. #10: Display the backend data Write the following code inside the index.componentjs file. r hitps:lappdividend.com/2018/111 react srample-mem-stack-tutorill 20133, 201032019 React CRUD Example | MERN Stack Tutorial ) 1 tp@ex. conponent,4s _ ; % jotyar” Se How your visitors are really using your website. TRY IT FOR FREE Amport React, { Component } from ‘react’; HIDE AD + AD VIA BUYSELLADS import axios from ‘axios’; import TableRow from *./TableRow’ ; export default class Index extends Component { constructor(props) { super(props) ; ‘this.state = {business: []}; ? ‘component DidMount (){ axios .get( ‘http: //localhost :48e@/business' ) -then(response => { this.setState({ business: response.data }); » scatch(function (error) { console. log(error); » } tabrow(){ return this.state.business.map(function(object, i){ return 3 ns ? render() { return (

    Business List

    Action { this.tabRow() }
    3 ? y So, here, we have sent the GET req 11 DIY PROJECTS API. FOR'YOUR DORM We have imported the TableRow,j the components folder, create on} following code inside it. hitpsifappdividendcom/2018/17/ Ireaet-cud-exampl 213 201032019 React CRUD Example | MERN Stack Tutorial ® ‘/ Tp@LeRow. js . . Ww Ot Jar” See how your visitors are really using your website. TRY IT FOR FREE Amport React, { Component } from ‘react’; HIDE AD + AD VIA BUYSELLADS class TableRow extends Conponent { render() { return ( {this.props.obj..person_nane} {this.props.obj.business_nane} {(this.props.obj.business_gst_nunber} export default TableRow; This component is responsible for display the row data fetched from the backend. Save the file and go to the browser and see this URL: http://localhost:3000/index. React CRUD Example Hone cate index Business List Person Business ST Number ‘tion Kowal ‘AppDividend soavore021 #11: Edit and Updat First, add the Link to the TableRow, 41 DIY PROJECTS FOR'YOUR DORM hitpsifappdividendcom/2018/11/Ireaet-cud-exampl 223 201032019 React CRUD Example | MERN Stack Tutorial i) /] TpPtenow.5s _ . &) Ot Jar” See how your visitors are really using your website. TRY IT FOR FREE import { Link } from ‘react-router-dom'; WIDE AD + AD VIA BUYSELLADS. Edit ‘Add the following code to the edit.components file. 11 DIY PROJECTS: FOR'YOUR DORM hitpsifappdividend.com/2018/171 Ireaet-cud-example-mem-stack-tutrall 23 201032019 React CRUD Example | MERN Stack Tutorial ® ‘/ [email protected] . . Ww otjyar Seéthow your visitors are really using your website. TRY IT FOR FREE Amport React, { Component } from ‘react’; HIDE AD + AD VIA BUYSELLADS import axios from ‘axios’; export default class Edit extends Component { constructor(props) { super(props); ‘this.onchangePersonNane = this.onChangePersonNane.bing( this); this onchangedusinessName = this.onchangedusinessNane.bind(this); this.onChangeGstNumber = this.onChangeGstNumber.bind(this) ; this.onSubmit = this.onSubmit.bind(this); this.state = { person_nane: business_nane: ‘', business_gst_number:'* ? y componentDidMount() { axios.get( ‘http: //localhost :4000/business/edit/'+this.props.match. params id) -then(response => { this. setState({ person_name: response. data.person_name, business_nane: response. data.business_nane, business_gst_number: response.data.business_gst_number }); » scatch(function (error) { console. log(error) ; » + conchangePersonName(e) { ‘this. setstate({ person_name: e.target.value Ys + ‘onChangeBusinessName(e) ( this. setstate({ business_nane: e.target.value » + onchangeGstNumber(e) { this. setstate({ business_gst_number: e.target ») - rm eos GUase const obj={ FOR YOUR DORM person_nane: this.state.perso} business_nane: this.state.bus} business gst_number: this.sta} 20193 201032019 React CRUD Example | MERN Stack Tutorial a ‘then(res => console. log(res.data))s % hotjar..,.Ssshey yours 4s.are really using your website. TRY IT FOR FREE render() { return (

    Update Business

    So, what we have done is, we have data from the API. That data needs to be displayed ins| 11 DIY PROJECTS: same thing as we have written the q FOR’ YOUR DORM Save the file and go to the edit pa displayed then please first check backend. hitpsifappdividendcom/2018/11/Ireaet-cud-exampl 25193, 201032019 React CRUD Example | MERN Stack Tutorial > ) hotjar See how your visitors are really using your website,_____TRY IT FOR FREE RUD Example 29 sep Ao vin suvsettADe Update Business ——— Kea Anois Cost Nib: We have also written the code that will update the data because we have written the function that will send the request to the nodes server and update the data based on the ID. #12: Delete the data Now, the only thing remaining is to delete the data. So define the delete function inside TableRow,js file. bid h ig fee) oi ed FOR'YOUR DORM hitpsifappdividend.com/2018/171 Ireaet-cud-example-mem-stack-tutrall 26193, 201032019 React CRUD Example | MERN Stack Tutorial ®@ ‘/ Tp@LeRow. js . . Ww OtJar See how your visitors are realy using your website, TRY IT FOR FREE import React, { Component } from ‘react’; HIDE AD = AD VIA BUYSELLADS: import { Link } from ‘react-router-don' ; import axios fron ‘axios'; class TableRow extends Component { constructor(props) { super (props) 5 this.delete = this.delete.bind(this) + delete() { axios. get( ‘http: //Localhost :4008/business/delete/*+this.props.obj._id) -then(console.1og( Deleted" )) scatch(err => console.log(err)) > render() { return ( {this .props.obj.person_name} {(this.props.obj .business_name} etd> {this.props.obj.business_gst_nunber} etd Link te "/edit/"sthis.props.obj._id} className="btn btn-primary">Edit export default TableRow; Now, we have completed React CRU Ihave put this code on Github. So Finally, React CRUD Example Tutor} 11 DIY PROJECTS: FOR'YOUR DORM ] coors (eR) menses Nadie hitpsifappdividend.com/2018/171 Ireaet-cud-example-mem-stack-tutrall 2713 2apoaa019 React CRUD Example |MERN Stack Ttoral ‘SKrunab yourvisiters arsireally using your website. TRY IT FOR FREE Comments HIDE AD + AD VIA SUYSELLADS Krunal Lathiya is an Information Technology Engineer, latest web and mobile technology adapter, freelance developer, Machine Learning, Artificial Intelligence, Blockchain enthusiast, and primary Author of this blog. @ezoic report this ad 34 COMMENTS: Hamish Anderson Says 63 4montns ago Thank you, clear example and explanatio Wahyu Says 4months ago delete function is successfully ¢! page to get true result Baspa Says #4 months ago 11 DIY PROJECTS: FOR'YOUR DORM Is itclean to have a node_mod! node_modules folders in my p} matter? James Says 1.2 months ago hitpsifappdividend.com/2018/17/Ireaet-cud-example-mem-stack-tutrall 2033 2o1032019 React CRUD Example | MERN Stack Tutorial * tim still a beginner at this myselt..but yes, there's going to be *two* node_modules (x) hotjar See Fddeyoonvisiterspirdineatiy asihgngoutheebstté.directory, TRY IT FOR FREE James Says 3 months ago iim a beginner too...but the project does require *two* node_modules folders: one for the React (front-end) app and one for the Express (back-end) app. Helmi Says 4 months ago tanks! Gold Says 4 months ago Excellent tutorial! Alejandro Says #8.4months ago GoodMmoring, Sorry for my English, | am study this language. So, | have problema... JsrclApps Module not found: Can't resolve ‘bootstrap/dist/css/bootstrap.mim.css’ in ‘DAPENDRIVER\TESTYTEST_REACT\reacterudisrc’ How to salve problem? Thanks.. Alejandro Fuentes Says 9 4months ago Hi, good morning, | have a problem with compilation: Failed to compile JsrclApp js Module not found: Can't resolve ‘bootstrap/dist/css/bootstrap.mim.css’ in "DAPENDRIVER\TESTITEST_REACT\reacterudlsre’ You can help me about? Thankss_ Krunal Says 11 DIY PROJECTS™= Spelling mistake i FOR YOUR DORM Bakorshisha Kharkot hitpsifappdividendcom/2018/17/ Ireaet-cud-exampl 20193 201032019 React CRUD Example | MERN Stack Tutorial Helo Kunal | am Bakorshsh, have been flloingthistutoril andto be) > hot {JAK Seehow youhersitoes aralidulyfusingy yore ebsites favor can your muon RE how to add image in react using multer in the backend apgalse hAWSeAdls that image... Please really greatful if you could help out here. Imran Says 8.4 months ago Very good explanation, i did not find anywhere this kind of explanation. Thanks again, Zobosu Says #4 months ago thank you very much. i hope you post a lot of blog like this. Zainy Says $3 months ago want to insert an image file from create.componentys file and store this image to db i cant finding multiple insert implementation . any suggestion ? Ryan Says 3 months ago Hil 'm working through this tutorial and it had been going well, but after step #9 the server is, giving me the dreaded “cannot GET" response when | try to load the page. I've checked the GitHub repo, and my code is exactly the same in structure and content. Can anyone help me with this? Rao Says 3 months ago Hi Krunal, Thanks for this great tutorial, Iwas able to complete this without any errors. When | am updating/deleting the records, the update and delete is happening fine, but in the index page, it still shows the previous state values, itis not updating the latest values, when | tried componentDidUpdate), it is working but going in infinite loop, can you please help me in solving this issue? Thanks Pramod Rawate $ bid h ig fee) oi ed Hey Krunal. Thanks FOR YOUR DORM Everything works fit but i cant see updat Could you provide 4 hitpsifappdividendcom/2018/17/ Ireaet-cud-exampl 30133, 201032019 hotjar Justas React CRUD Example | MERN Stack Tutorial %) Ddelfin7 Says #.2montns ago x) Jour visitors are really using your website. TRY IT FOR FREE Hi friends ! First , Thanks for tutorial Krunal. Good job! Now, I make tutorial and Im going to add for that refresh in real time when press input delete, In this url you can check code : https://github.com/diegodelfin7/reacterud Anandhi C Says 1 month ago thank you .it was very helpful Gothami Says 1 month ago just refresh the page after the updated the data like below, onsubmit(e) ¢ e-preventDefault(); const obj = { person_name: this.state.person_name, business_name: this.state.business_name, business_gst_number: this.state.business_gst_number by axios.post(http://localhost:4000/business/update/"‘this.props.match.params.id, obj) then(res => { console.log{res.data); window.location.reload() ym this.props.history.push(/index’; » Says ft 3months ago Why does state updating doesn’t work? You need to refresh page to refresh the state, it lost the point of react. Rohit Saini Says htpsilappdividend.con/2018!11 Krunal Says & tel GON h Aig ce) enc ee FOR YOUR DORM all apps are refresh is dependent upon. {83 months ago 1 react-orud-oxamp a3 201032019 React CRUD Example | MERN Stack Tutorial You Are Tony Stark On india (ron Men). Great tutor’al as always. God Bless you boy. Cheers Hotjar see how your visitors are really using your website. TRY IT FOR FREE Pramod Rawate Says 3 months ago Hey Krunal, does your index page gets updated automatically after editing and updating the entries ? Because in my case i need to refresh the page to see the edited or updated values. Please revert back if possible, Thanks, Ozzie Says 2months ag0 Great tutorial! When i click add Business, nothing seems to happen in the MongoD8. | manually added an entry into the DB, hoping to see it when | go to ‘index’ in the React App, however nothing shows up. Any idea where the issue may be? Looks like React isn’t connecting to Mongo correctly? Rizky Says &9 1 month ago Great tutorial sir i appreciate Help sir im in phase #5: Create a backend on Node,js i have problem when execute the Nodemon Server it says nodemon : The term ‘nodemon’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. Atline:t chart + nodemon server + Categoryinfo : ObjectNotFound: (nodemon:string) (J, CommandNotFoundException + FullyQualifiedErrorid : CommandNotFoundéxception Rakshith Says 1 month ago Great Tutorial but | am stuck a Getting this error OPTIONS http://localhost:4000 createErrorjs:17 Uncaught (in 11 DIY PROJECTS™= at createError (createErrorjs:1 FOR YOUR DORM at XMLHttpRequest. handleetr¢ Please help me with this probl It seems like http:/ocalhost: hitpsifappdividendcom/2018/17/Ireaet-cud-exampl a23 zvesc0t9 React CRUD Example | MERW Sick Tari vy , ®) hotjar se: RakPDBUSMR orf d2 HAIG using your website. TRY IT FOR FREE "Silly mistake. I had to open two terminals, one in api directory anibone Jas ontsuvseuass directory. Run npm start on both the terminals and it works. Hope this helps. Silent Says 68 1 month ago same bro... Anandhi C Says 91 month ag0 thank you so much .it was very helpful ‘Ayed Ramadeen Says 1 month ago ‘Thank you, good explanation Test Says tf 3weeks ago it just doesn’t work for me.i npm installed both api and react, as well as started them. i still get connection error. Alireza Says $8 3 1eoks ago Thank you Bhupendra Says #9 2weeks ago ‘Add app.use("/business”,businessRoute); line in server.js below app.use(bodyParser,json0); your prob will get resolve, Because business mapping is not done with routing file. Enjoy @ This site uses Akismet to reduce spam. Learn © 2017-2019 AppDividend. All rights reserved 11 DIY PROJECTS: FOR'YOUR DORM hitpsifappdividend.com/2018/17Ireaet-cud-example-mem-stack-tutrall saa3

    You might also like