ReactJS WebPack and MySQL Only

#1

Hai There,
i want mysql connection in the same project
like

i need a complete program for mysql and react js in one project with out using any port with web-pack like
in the same program

Connection to DB mysql
open the connection
put a sql statement
result -> sucess or failure 5 .data-> get the records
close the connection
#2

You need to explain this a bit more. You can use MySQL’s HTTP API to make requests against the database & have a React app in a browser that makes/receives those requests, but I have no idea if that’s what you want, and I’m not sure what WebPack has to do with anything – WebPack is just a tool for bundling up JS modules .

#3

THANKYOU FOR YOUR RESPONSE
being new to react js and nodejs but have knowledge on .net,java,php 20+years
when i use webpack with mysql it says need fs,http,buffer,util, stream…

when i use only node js i have not found any example how we have bundle.js in pure node js web application, not the exe build and no other external build tools.

i need react js with out client and server (Single Web Application) and no port for mysql and web application like we do in PHP and ASP.NET . or node JS Web Application to binary like webpack do

#4

You don’t bundle JavaScript code for a Node application. This is why you can’t find any examples, they don’t exist.

For JavaScript that runs in the browser, that code knows absolutely nothing about Node, and that is code that is normally bundled into one (or more) files, and that is what Webpack is used for – it is a program that runs on Node that takes a load of JS files and produces a bundled version of them.

You can’t have it without a client because you are literally building a client.

You are not building a Node application.

You are not building a binary: JS code is interpreted, for your usecase you are just generating a blob of JS code that a browser can interpret.

You don’t technically need to bundle anything, but practically speaking, as you want to use React, there is the issue that you need to convert the code in files containing JSX (the stuff that looks like HTML, like function Example() { return <some>JSX</code>; }) to plain JS code.

WebPack will do this almost out of the box: you add it to your project as a dev dependency (npm install --save-dev webpack) then you add a small amount of config, which you would have to follow the docs to get; it has been a while since I used webpack so I can’t remember the incantations required. There are multiple build tools that are similar: Vite is probably the simplest, though for your needs ESBuild would do and should be almost as simple as installing it and running it, no config iirc

Without knowing.more about what you have tried I can’t advise much more atm

#5

as i said new to react js
need few examples

  1. bootstrapValidation like we do in normal[React JS]
  2. get only few columns from the database[Selected Columns only][React JS]
#6

React is a library for UI, so this:

Isn’t something that has anything to do with React. To interface with a DB from a JavaScript app, you will need an adapter of some kind (a JavaScript ORM or query builder or whatever). You can then call that from your React-powered UI code in the same way you would do with any JavaScript.

If you mean exactly like the Bootstrap UI library, then exactly the same way; form field validation built into HTML and Bootstrap just provides some CSS classes to help style that. You can literally just include the bootstrap CSS & use the classes in your React code.

If you want JS-powered validation, then look at a simple example of how to validate a form field in React and see if you can emulate that first – of you get stuck then come back with specifics

#7

So there is a disconnect between React, and your database technology in regards to “getting them to work together”.

Practically speaking you can’t use these directly together. You could use them in the same project, but you need to make more choices and build out more of the setup.

For starters React normally is used as a library to manage updating the DOM within a client-side app. You could use it in other scenarios like to build mobile UI’s, or use it on the server-side similar to that of a template engine, but the end general use-case for React is just a fancy way to manage how what the user sees.

MySQL is a database that can be used to store data.

The “disconnect” and key part that is missing is the server-side code.

The way a traditional “stack” works for a web-app (with or without React) is you have your database MySQL, and server-side language, say Python or Node.js, that then connects to your database and access the data, provides security and buisness logic and interfaces with the end-user either directly or indirectly.

The “interfaces with end-user” is where React could come in, either via running on their browser as is usually the case, or using something else entirely. Regardless the server-side acts as the “interface” with your database and essentially is the core place to have your buisness logic. Stuff like “which users could access which data? How is data saved, optimized?” is all stuff your server-side would need to manage.

From there the server-side could serve data to your React app, which by itself can’t access the database, and must go through your server-side code via HTTP calls using something like REST via fetch. Only then could you now leverage your React code+ data from your database, which again could be manipulated via your server-side how you see fit.

Finally there’s webpack, which is just a tool that can help you build your React code. React naturally is written in a different format like jsx, which makes it easier to work with, but isn’t understood by browsers. As such React is usually ran through a “build-step” to optimize the code you write for end user consumptions, and then served as static file bundles.

I wouldn’t recommend using webpack at all, and use something like create-react-app which abstracts away a lot of this, as it uses webpack under the hood and provides a bunch of other functions out of the box.

#8

the below code i want to write in my page .js [react js]
it is giving error with bootstrapValidator()

jquery__WEBPACK_IMPORTED_MODULE_3___default()(…).formValidation is not a function

$(document).ready(function () {
        $('#aevents').bootstrapValidator({
            //        live: 'disabled',
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {

                txtEventName: {validators: {
                        notEmpty: {
                            message: '<font style="color: red">Enter The Event Name</font>'
                        }
                    }},
                txtDate: {validators: {
                        notEmpty: {
                            message: '<font style="color: red">Select The Event Date</font>'
                        }
                    }},
#9

need below code like to get partial columns like out of name age dob, gender, city

i need name gender city only from the tables

import EventsTable from "../models/eventsTableModel.js";

export const getAllEventsTable = async (req, res) => {
    try {
        const eventsTable = await EventsTable.findAll();
        res.json(eventsTable);
    } catch (error) {
        res.json({message: error.message});
    }
}

export const getEventById = async (req, res) => {
    try {
        const eventsTable = await EventsTable.findAll({
            where: {
                eventid: req.params.eventid
            }
        });
        res.json(eventsTable[0]);
    } catch (error) {
        res.json({message: error.message});
    }
}
#10

We aren’t in front of your computer: we can’t see the code in front of you

So currently from your descriptions:

  • you are using WebPack to compile some JavaScript for use in a browser-based app.
  • you are using React, though you’ve not shown anything related to that
  • you are using a library called bootstrapValidator, which seems to require jQuery to work (this goes completely against what you do in React, but anyway)
  • you are using some unknown library for interfacing with the database.
  • you’re asking lots of vague questions that depend on how you’re using these things + some other things we also don’t know about (like how do any of these things connect to React?)

So first issue, the one in the quote:

I had to look for the bootstrapValidator library for quite a while (I kept getting other libraries with similar names). It hasn’t been updated for nearly 10 years, and depends on jQuery and a jQuery plugin called jQuery validator. The error is saying it can’t find jQuery validator, either because you haven’t installed it or because you aren’t importing it in the file.

WebPack doesn’t bundle things up in order. That doesn’t normally matter. But this is a very old library and I assume it requires you to have things in order (so you need the validator available else you can’t run that code). So you probably need to import "jqueryvalidator" before everything else in the file, I don’t know. You need to tell WebPack that this library depends on the other one, because it’s so old that that was just assumed when it was written (you just included things as linked scripts, one after the other, so the first one was available to the second one and so on).

However, specifically with respect to that bootstrapValidator library, I would strongly suggest not using very very old libraries and tools, you’re not going to be able to get much help if things go wrong because not many people will be using them.

Also, if you’re set on using jQuery, use that, not that + React. If you’re set on using React, use that, not that + jQuery. You’re trying to use two libraries that both deal with the UI and have different approaches to dealing with it.