Posts

FlatList | Make list in React native

Image
  App.js: import React from 'react' ; import { FlatList , StyleSheet , Text , View } from 'react-native' ; const Users =[     {         id : 1 ,         name : "Krishan"     },     {         id : 1 ,         name : "Bhavesh"     },     {         id : 1 ,         name : "Sanju"     },     {         id : 1 ,         name : "Brijesh"     },     {         id : 1 ,         name : "Raj"     } ] const App =() => {     return (         < View >         < Text style = { { fontSize : 30 } } > List With Flat List Component </ Text >         < FlatList         data = { Users }         renderItem = { ({ item }) => < Text style = { styles . item } > { item . name } </ Text > }         />         </ View >     ); }; const styles = StyleSheet . create ({     item : {         fontSize : 24 ,         color : 'white' ,         backgroundColor : 'blue' ,         bord

Basic Form in React-Native | form with state

 App.js: import React , { useState } from 'react' ; import { Button , StyleSheet , Text , TextInput , View } from 'react-native' const App = () => {     const [ name , setName ] = useState ( "" );     const [ password , setPassword ] = useState ( "" );     const [ email , setEmail ] = useState ( "" );     const [ display , setDisplay ] = useState ( false );     const resetFormData = () => {         setDisplay ( false );         setName ( "" );         setPassword ( "" );         setEmail ( "" );     }     return (         < View style = { { margin : 5 } } >             < Text style = { { fontSize : 30 } } > Simple Form in React Native </ Text >             < TextInput style = { styles . textInput } placeholder = 'Enter Name' onChangeText = { ( text ) => setName ( text ) } />             < TextInput style = { styles . textInput } placehold

React Native - Get Text Input Value | Handling Text Input

 App.Js: -  import React , { useState } from 'react' ; import { Text , Button , View , StyleSheet , TextInput } from 'react-native' ; const App = () => { const [ name , setName ]= useState ( "" );     return (         < View >             < Text style = { { fontSize : 30 } } > Handle Text Input </ Text >             < Text style = { { fontSize : 30 } } > Your Name is = : { name } </ Text >             < TextInput style = { styles . textInput } placeholder = 'Enter Name' value = { name } onChangeText = { ( text ) => setName ( text ) } />             < Button title = 'Clear Text' onPress = { () => setName ( '' ) } />         </ View >     ); }; const styles = StyleSheet . create ({     textInput : {         borderWidth : 2 ,         borderColor : 'blue' ,         color : 'blue'                     } }) export default App ;

Style in React Native | Style Type

Image
  App.js: -  import React , { useState } from 'react' ; import { Text , Button , View , StyleSheet } from 'react-native' ; import Exstyles from './exStyles' ; const App = () => {     return (         < View >             < Text style = { { fontSize : 30 , backgroundColor : 'green' } } > Style in             react native </ Text >             < Text style = { styles . textBox } > Style in             react native </ Text >             < Text style = { styles . textBox } > Style in             react native </ Text >                         < Text style = { Exstyles . textBox } > Style in             react native </ Text >             < Text style = { [ styles . textBox , Exstyles . textBox , { marginTop : 10 }] } > Style in             react native </ Text >         </ View >     ); }; const styles = StyleSheet . create ({     textBox : {         color : 'wh

Props in React Native Example

App.js:-  import React , { useState } from 'react' ; import { Text , Button , View } from 'react-native' ; const App = () => {     const [ name , setName ]= useState ( "Krishan" )     return (         < View >             < Text style = { { fontSize : 50 } } > Props in react native </ Text >             < Button title = 'Update Name' onPress = { () => setName ( "Brijesh" ) } />             < User name = { name } age = { 32 } />         </ View >     ); }; const User = ( Props ) => {     return (         < View style = { { backgroundColor : 'green' } } >             < Text style = { { fontSize : 50 } } > { Props . name } </ Text >             < Text style = { { fontSize : 50 } } > { Props . age } </ Text >         </ View >     ); }; export default App ;

State in React Native Example

App.js:-   import React , { useState } from 'react' ; import { Text , Button , View } from 'react-native' ; const App = () => {     const [ name , setName ] = useState ( "Krishan" );     function testName () {         setName ( "Dev" )     }     return (         < View >             < Text style = { { fontSize : 50 } } > { name } </ Text >             < Button title = 'Press Me' onPress = { testName } ></ Button >         </ View >     ); }; export default App ;

Node js connect with MongoDB

 index.js: const express = require ( 'express' ); const app = express (); const mongoose = require ( 'mongoose' ); const connectDB = async () => {     mongoose . connect ( 'mongodb://localhost:27017/e-Comm' );     const productSchema = new mongoose . Schema ({});     const products = mongoose . model ( 'products' , productSchema )     const data = await products . find ();     console . warn ( data ); } connectDB (); app . listen ( 5000 );

CRUD API with MySQL

 index.js: const express = require ( 'express' ); const con = require ( './config12' ) const app = express (); app . use ( express . json ()); app . get ( "/" , ( req , resp ) => {     con . query ( "select * from user" , ( err , result ) => {         if ( err ){             resp . send ( "error" )         } else {             resp . send ( result )         }     }) }); app . post ( '/' , ( req , resp ) => {       const data = req . body ;     con . query ( 'Insert into users3 SET?' , data ,( error , result , fields ) => {         if ( error ) error ;         resp . send ( result )     }) }); app . put ( '/:id' , ( req , resp ) => {     const data =[ req . body . name , req . body . password , req . params . id ];     con . query ( "Update users SET name=?, password=? where id =? " , data , ( err , result , fields ) => {     if ( err ) throw error ;     resp . send ( result )    }) }

Node JS GET API with MySQL

 config.js const mysql = require ( 'mysql' ) const con = mysql . createConnection ({     host : 'localhost' ,     user : 'root' ,     password : '' ,     database : 'test' }); con . connect (( err ) => {     if ( err ){         console . warn ( "error in connection" );     } }) module . exports = con ; index.js const express = require ( 'express' ); const con = require ( './config12' ) const app = express (); app . get ( "/" , ( req , resp ) => {     con . query ( "select * from user" , ( err , result ) => {         if ( err ){             resp . send ( "error" )         } else {             resp . send ( result )         }     }) }); app . listen ( 5000 )

Node JS connect with mysql

 index.js: const mysql = require ( "mysql" ); const con = mysql . createConnection ({     host : 'localhost' ,     user : 'root' ,     password : '' ,     database : 'test' }); con . connect (( err ) => {     if ( err ){         console . warn ( "error" )     }     else {         console . warn ( "connected" )     } }); con . query ( "select * from user" , ( err , result ) => { console . warn ( result ) })

Search API with multiple filed - NODE JS

 config.js -  const mongoose = require ( 'mongoose' ) mongoose . connect ( 'mongodb://localhost:27017/e-Comm' ) Product.js: const mongoose = require ( 'mongoose' ); const productSchema = new mongoose . Schema ({     name : String ,     price : Number ,     brand : String ,     category : String });   module . exports = mongoose . model ( 'products' , productSchema ); index.js: const express = require ( 'express' ); require ( './config' ); const product = require ( './product' ); const app = express (); app . use ( express . json ()); app . post ( '/create' , async ( req , resp ) => {     let data = new product ( req . body );     let result = await data . save ();     console . log ( result )     resp . send ( result ); }); app . get ( '/list' , async ( req , resp ) => {     let data = await product . find ();     resp . send ( data ); }); app . delete ( '/delete/:_id' , async ( req , r

CRUD with Mongoose

 index.js -  const mongoose = require ( 'mongoose' ); const saveInDB = async () => {     await mongoose . connect ( 'mongodb://localhost:27017/e-Comm' );     const ProductSchema = new mongoose . Schema ({         name : String ,         brand : String ,         price : Number ,         category : String     });     const ProductsModel = mongoose . model ( 'products' , ProductSchema );     let data = new ProductsModel ({ name : 'm9' , brand : 'LG' , price : 150 , category : 'mobile' });     let result = await data . save ();     console . log ( result ); } const updateInDB = async () => {     await mongoose . connect ( 'mongodb://localhost:27017/e-Comm' );     const ProductSchema = new mongoose . Schema ({         name : String ,         brand : String ,         price : Number ,         category : String     });     const Product = mongoose . model ( 'products' , ProductSchema

CRUD API Mongodb

Api.js: const express = require ( 'express' ); const dbConnect = require ( './mongodb' ); const mongodb = require ( 'mongodb' ) const app = express (); app . use ( express . json ()); app . get ( '/' , async ( req , resp ) => {     let data = await dbConnect ();     data = await data . find (). toArray ();     console . log ( data )     resp . send ({ data }) }); app . post ( '/' , async ( req , resp ) => {     let data = await dbConnect ();     let result = await data . insert ( req . body )         resp . send ( result ) }); app . put ( '/' , async ( req , resp ) => {     let data = await dbConnect ();     let result = await data . updateOne (         { name : req . body . name },         { $set : req . body }     )     console . log ( req . body )     resp . send ({ result : "Updated" }) }); app . delete ( '/:id' , async ( req , resp ) => {     console . log ( req . params . id )     const

Node JS - Make HTML page

index3.js -    const express = require ( 'express' ); const path = require ( 'path' ); const app = express (); const publicPath = path . join ( __dirname , 'public' ); console . log ( publicPath ); app . use ( express . static ( publicPath )); app . listen ( 5000 ); -------------------------------------- index.html (under public folder) <!DOCTYPE html > <html lang = "en" > <head>     <title> Home Page </title> </head> <body>     <h1> Home Page Node JS </h1> </body> </html> ------------------------------------ about.html (under public folder) <!DOCTYPE html > <html lang = "en" > <head>         <title> About Us Page </title> </head> <body>     <h2> About Us Page </h2>     <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor fugit tenetur ex doloremque quis expedita dignissimos tempore officia! Volu

Express JS - Render HTML and JSON

  const express = require ( 'express' ); const app = express (); app . get ( '' , ( req , resp ) => {     // console.log("Data sent by Browser =>", req.query.name)     // resp.send('Hello, this is a home page');     resp . send ( `     <h1>Jai Sri Krishna</h1>     <a href="/about">Go to About Page</a>     ` ); }); app . get ( '/about' , ( req , resp ) => {     // resp.send('Hello, this is a about page');     resp . send ( `     [         {             name:'krishan',             email:'krishan@gmail.com'         },         {             name:'Radhe',             email:'radhe@gmail.com'         }             ]     <a href="/">Go to Home Page</a>     ` ); }); app . listen ( 5000 );

Express JS Example

  const express = require ( 'express' ); const app = express (); app . get ( '' , ( req , resp ) => {     resp . send ( 'Hello, this is a home page' ); }); app . get ( '/about' , ( req , resp ) => {     resp . send ( 'Hello, this is a about page' ); }); app . listen ( 5000 );