Posts

Showing posts with the label react native

Get Height and Width of Image when upload

-
<script type="text/javascript">  var _URL = window.URL || window.webkitURL;  $('#structure_product_image').on('change', function() { //pass here file field id    var image, file;    if ((file = this.files[0])) {      image = new Image();      image.onload = function() {        $("#error_message").text("");        if (this.width <= 700) {          $("#error_message").text("Width should be greater than 700 pixel!") //id where you want to display text        }        else if (this.height <= 600){          $("#error_message").text("Height should be greater than 600 pixel!")        }        else if (this.height >= this.width){          $("#error_message").text("Height should not be greater than Width")        }        if($("#error_message").text() == ""){          $("#save_product").prop("disabled" , false)      
Read more

SQL COMMANDS || Oracle SQL COMMANDS Sql Tutorial -3

-
Types of SQL commands 1) DDL(data definition language) commands:       Used to create or change or delete any data base objects CREATE ALTER DROP TRUNCATE RENAME 2) DML(data manipulation language) COMMANDS       Used to fetch data / enter new data/ changing existed data / deleting the data from table. INSERT  UPDATE  DELETE  TRUNCATE 3) DRL(dataretrieval language) Command     SELECT (logicalcommand) 4) DCL(DATA CONTROL LANGUAGE) COMMANDS     Used to control the access of data base objects. These commands are used by DBA (databaseadministrator) GRANT  REVOKE 5) TCL(TRANSACTION CONTROL LANGUAGE) COMMANDS      Used to save or cancel the actions/transactions made on table data. COMMIT  ROLLBACK  SAVEPOINT
Read more

Export Import component in react

-
Image
 Export Import component in react See installation and configuration in my other blog Now Create a file into a public folder or anywhere into Root directory inside your project folder Create to directory into root directory         mkdir public           mkdir src Create two new into public folder index.html index.js Create two new file into src folder main.js  item.js Copy and paste code into index.html <!DOCTYPE html> <html> <head> <title>React - demo</title> </head> <body> <div id="root"></div> <script src="index.js"></script> </body> </html> Now into item.js import React from 'react'; class Item extends React.Component{ render(){ return( <div> Hello Item </div> ); } } export default Item; // you must have to make component exportable Now into main.js import React from 'react&#
Read more

set mode on webpack.config.js || webpack file configuration

-
Give mode in webpack.config.js            mode: "development || production"  //whatever you want to give Use it before Entry module.exports = {   mode: "development",    entry: './src/main.js', // Bundle all assets from this location together    output: {        filename: 'index.js', // Output to this file        path: path.resolve( __dirname, 'public' ), // In this location    }, 
Read more

What is WebPack || WebPack React app by webpack || babel loader || babel core || babel

-
Image
Webpack is a tool that puts all your assets including images,javascript ,fonts and css in a dependency graph entry point: is the file webpack looks for to start building your Javascript bundle webpack’s main strength is code splitting. It introduce a production mode and development mode. As ,, Syntax of  ReactJS is based on ES6. old browsers doesn’t understand ES6. So , to run JS we need something which transform our ES6 code to browser understand language , the same thing is done by babel-loader. Babel-loader is a webpack loader for transpiling ES6 and above , down to ES5. For this, you need three things - babel-core, babel-loader, babel-preset-env   Commands- 1. npm init: This cmd create a package.json file . 2.npm i webpack --save-dev: This cmd generate dependencies for webpack in package.json file. Like "devDependencies": {    "webpack": "^4.16.2"  } 3. npm i webpack-cli --save-dev : This cmd is
Read more