Sql Server with NodeJs CRUD Operations

SQL Server with NodeJs is a guide every developer needs who are switching their server from dot net, PHP, etc to NodeJs. Here, we will create a nodejs application from scratch so even you have not worked with nodejs before, you should be good to go. You need to have SQL server and studio installed which we will allow on TCP/IP protocols for connectivity. we will be using mssql node module to perform crud operations in the database. So, let’s get started with the tutorial.

1.Set up SQL Server on TCP/IP Protocol

We would be using server authentication which requires username and password also the server needs to be hosted for which go to Sql Server Configuration Manager from the start menu and enable the TCP/IP port as depicted in image below. This is a very important step without which the connection won’t establish.

Sql Server with NodeJs CRUD Operations

Create a database in the server named test. And create a table with name Student , we have added two fields id, fullname here.

Sql Server with NodeJs CRUD Operations

2.Set up NodeJS application

As promised in this SQL server with nodejs tutorial we are going to create nodejs application from the start.

So, nodejs is javascript based server engine where you write all the server-side code for your applications. To set up the application, first, make sure you have installed node.js and npm in your system,

then we need to create a folder, in that folder type npm init to initialize the repository as node.js application. you should see package.json file in the directory.

MongoDB with NodeJs CRUD Tutorial Guide

Create app.js file and type the following code

var msg=’Hello world!’;

console.log(msg)

Now, to run the application type node app.js

MongoDB with NodeJs CRUD Tutorial Guide

Now, you have successfully set up your node application.But here we will also use express which the most popular framework for node.js and set up the server at port 5000.

So, type npm install express on the terminal

Sql Server with NodeJs CRUD Operations

Add the following code for the server to establish.

Sql Server with NodeJs CRUD Operations

var express = require(‘express’);
var app = express();
app.get(‘/’, function (req, res) {
    res.send(‘<h1>Hello World!</h1>’)
});
var server = app.listen(5000, function () {
    console.log(‘Server is running..’);
});

Run using node app.js. You should see server is running.. on the terminal and on browser type localhost:5000 you should see Hello World! Now you have successfully set up your node application.

Sql Server with NodeJs CRUD Operations

3.Connect  SQL Server with NodeJs

Now, let’s look at connecting SQL server with NodeJs. First step is to install node modules mssql. Type npm install mssql in the terminal

Sql Server with NodeJs CRUD Operations

And, now is the time to add the config variable. Always config is kept in a separate file as it becomes easier to change the credentials when kept at single place. But, here we are keeping it simple and at the same app.js. Also, replace your IP Address which you can find in ipconfig, server authentication username and password. 

Sql Server with NodeJs CRUD Operations

If there is no error on console, you are successfully connected to the SQL server database. Now, you just need to add queries. As tougher part of SQL server with nodejs is now done.

var express = require(‘express’);
var app = express();
 var sql = require(“mssql”);
app.get(‘/’, function (req, res) {
    res.send(‘<h1>Hello World!</h1>’)
      // // config for your database
    var config = {
        user: ‘sqluser’,
        password: xxxx’,
        server: ‘1xx.1xx.x.xxx’, 
        database: ‘test’ ,
        port:1433
    };
    sql.connect(config, function (err) {
    
            if (err) console.log(err);
        });
});
var server = app.listen(5000, function () {
    console.log(‘Server is running..’);
});

4.Insert Operation in SQL server with NodeJs

var express = require(‘express’);
var app = express();
 var sql = require(“mssql”);
app.get(‘/’, function (req, res) {
      // // config for your database
    var config = {
        user: ‘sqluser’,
        password: ‘xxxx’,
        server: ‘1xx.1xx.1.2xx’, 
        database: ‘test’ ,
        port:1433
    };
    sql.connect(config, function (err) {
            if (err) console.log(err);
            // create Request object
            var request = new sql.Request();
            request.query(“insert into Student(id,fullname)values(5,’Nidhi’)”, function (err, recordset) {
                if (err) console.log(err)
                // send records as a response
                res.send(“Inserted”);
            });
        });
});
var server = app.listen(5000, function () {
    console.log(‘Server is running..’);
});
One row should be inserted in the database. Also on browser you should see Inserted as message.

5.Update Operation in SQL Server with NodeJs

var express = require(‘express’);
var app = express();
 var sql = require(“mssql”);
app.get(‘/’, function (req, res) {
      // // config for your database
    var config = {
        user: ‘sqluser’,
        password: ‘xxxx’,
        server: ‘1xx.1xx.1.2xx’, 
        database: ‘test’ ,
        port:1433
    };
    sql.connect(config, function (err) {
    
            if (err) console.log(err);
            
            // create Request object
            var request = new sql.Request();

            request.query(“

update Student set fullname=’nidhi2′ where id=2

“, function (err, recordset) {

                
                if (err) console.log(err)
                // send records as a response
                res.send(“Updated”);
                
            });
        });
});
var server = app.listen(5000, function () {
    console.log(‘Server is running..’);
});

Record with id=2 would be updated with output on screen as Updated

6.Delete Operation in SQL Server with NodeJs

var express = require(‘express’);
var app = express();
 var sql = require(“mssql”);
app.get(‘/’, function (req, res) {
      // // config for your database
    var config = {
        user: ‘sqluser’,
        password: ‘xxxx’,
        server: ‘1xx.1xx.1.2xx’, 
        database: ‘test’ ,
        port:1433
    };
    sql.connect(config, function (err) {
    
            if (err) console.log(err);
            
            // create Request object
            var request = new sql.Request();

            request.query(“

delete from Student where id=2“, function (err, recordset) {
                
                if (err) console.log(err)
              
                res.send(“Deleted”);
                
            });
        });
});
var server = app.listen(5000, function () {
    console.log(‘Server is running..’);
});

Record with id=2 would be deleted with output on screen as Deleted

7.Select Operation in SQL Server with NodeJs

var express = require(‘express’);
var app = express();
 var sql = require(“mssql”);
app.get(‘/’, function (req, res) {
      // // config for your database
    var config = {
        user: ‘sqluser’,
        password: ‘xxxx’,
        server: ‘1xx.1xx.1.2xx’, 
        database: ‘test’ ,
        port:1433
    };
    sql.connect(config, function (err) {
    
            if (err) console.log(err);
            
            // create Request object
            var request = new sql.Request();

            request.query(“

select * from Student

“, function (err, recordset) {

                
                if (err) console.log(err)
                // send records as a response
                res.send(recordset);
                
            });
        });
});
var server = app.listen(5000, function () {
    console.log(‘Server is running..’);
});

Sql Server with NodeJs CRUD Operations

Now, you will see the output of json objects on the screen

This was short tutorial on SQL server with nodejs. You are now set you use in your existing projects. Happy Learning😊

Similar Posts:

MongoDB with NodeJs CRUD Tutorial Guide

 

Tagged : / /

MongoDB with NodeJs CRUD Tutorial Guide

MongoDB with NodeJs has a huge demand in the market. Mongodb is a NoSQL based database that is it is unlike SQL, SQL server traditional relational database with rows and columns but rather store database in the form of collections than tables, Each collection consists of JSON documents. In this tutorial, we will set up the MongoDB database, set up node application, connect them using mongoclient, perform CRUD operations. So, if you have never worked with node, MongoDB still you will be able to follow up and get at par with everyone. So, let’s get started!

1.Set Up MongoDB Database

The first step of nodejs with MongoDB tutorial is to set up the database server. Go to the link and download the community edition https://www.mongodb.com/download-center/community

While installing choose mongoDB

Run service as Network User and then, compass Community 

MongoDB with NodeJs CRUD Tutorial Guide

To generate connection string, you need to create an account on https://cloud.mongodb.com/. Once, registered it will pick IP address, you have to give a username and password and it will generate connection string, similar to

mongodb+srv://<Username>:<Password>@cluster0-xxxxx.mongodb.net/test

Connect to compass GUI with connection string obtained as this connection string will also be used in node.js application

MongoDB with NodeJs CRUD Tutorial Guide

2.Node.Js Application Setup

As promised in this MongoDB with node.js tutorial, we will set up node.js application from scratch. So, nodejs is javascript based server engine where you write all the server-side code for your applications. To set up the application, first, make sure you have installed node.js and npm in your system,

then we need to create a folder, in that folder type npm init to initialize the repository as node.js application. you should see package.json file in the directory.

MongoDB with NodeJs CRUD Tutorial Guide

Create app.js file and type the following code

var msg=’Hello world!’;

console.log(msg)

Now, to run the application type node app.js

MongoDB with NodeJs CRUD Tutorial Guide

Now, you have successfully set up your node application. Now to connect to mongodb you need to install mongodb node.js driver that is mongoclient

On terminal, type

MongoDB with NodeJs CRUD Tutorial Guide

3. Create Collection in Database

Next step in mongodb with node.js tutorial is to create a database in mongodb, then create a collection under which we will Insert, Update, Delete records. Also, we will see how to first insert a data using the compass itself.

Here we have created engineerdiariesdb as database and users as collections

MongoDB with NodeJs CRUD Tutorial Guide

 

Insert 1 document into the collection

Under Add data insert document, add Json Object

MongoDB with NodeJs CRUD Tutorial Guide

MongoDB with NodeJs CRUD Tutorial Guide

4. Establish a connection with MongoDB

MongoDB with NodeJs CRUD Tutorial Guide

Replace your connection string, run using node app.js and if output on console is connected then you have successfully established connection with database MongoDB with nodejs.

const MongoClient = require(‘mongodb’).MongoClient;
const uri = “mongodb+srv://username:password@cluster0-xxxxx.mongodb.net/test”;
const client = new MongoClient(uri, { useNewUrlParser: true ,useUnifiedTopology: true});
client.connect(err => {
  const collection = client.db(“EngineerDiariesDB”).collection(“Users”);
  // perform actions on the collection object
  console.log(“connected”);
});

5. Insert a record in MongoDB with nodejs

const MongoClient = require(‘mongodb’).MongoClient;
const uri = “mongodb+srv://username:password@cluster0-xxxxx.mongodb.net/test”;
const client = new MongoClient(uri, { useNewUrlParser: true ,useUnifiedTopology: true});
client.connect(err => {
  const collection = client.db(“EngineerDiariesDB”).collection(“Users”);
  // perform actions on the collection object
  console.log(“connected”);
  var myobj = {
    id: 2,
    name: “Nidhi”,
    age:23
};  
collection.insertOne(myobj, function(err, res) {  
    if (err) console.log(err) ;  
    console.log(“1 record inserted”);  
 
    });  
});

6. Update a record in MongoDB with nodejs

const MongoClient = require(‘mongodb’).MongoClient;
const uri = “mongodb+srv://username:password@cluster0-xxxxx.mongodb.net/test”;
const client = new MongoClient(uri, { useNewUrlParser: true ,useUnifiedTopology: true});
client.connect(err => {
  const collection = client.db(“EngineerDiariesDB”).collection(“Users”);
  // perform actions on the collection object
  console.log(“connected”);
collection.updateOne({
        “name”: “priyanka”
    }, {
        $set: {
            “age”: 22
        }
    });
});

This will update record of name=priyanka, and set age to 22

7. Delete a record in MongoDB with nodejs

const MongoClient = require(‘mongodb’).MongoClient;
const uri = “mongodb+srv://username:password@cluster0-xxxxx.mongodb.net/test”;
const client = new MongoClient(uri, { useNewUrlParser: true ,useUnifiedTopology: true});
client.connect(err => {
  const collection = client.db(“EngineerDiariesDB”).collection(“Users”);
  // perform actions on the collection object
  console.log(“connected”);
 collection.deleteOne(
        {
            “name”: “priyanka”
        });
});

This will delete the record where name=priyanka

8. Record records in MongoDB with nodejs

const MongoClient = require(‘mongodb’).MongoClient;
const uri = “mongodb+srv://username:password@cluster0-xxxxx.mongodb.net/test”;
const client = new MongoClient(uri, { useNewUrlParser: true ,useUnifiedTopology: true});
client.connect(err => {
  const collection = client.db(“EngineerDiariesDB”).collection(“Users”);
  // perform actions on the collection object
  console.log(“connected”);
    collection.find({}).toArray(function(err, result) {
        if (err) console.log(err);
        console.log(result);
       // db.close();
      });
});

This will output all the documents in the collection.

 

So, this was short and complete tutorial on mongodb with node.js crud operations.

Similar Posts:
http://engineerdiaries.com/sql-server-with-nodejs-crud-operations/
Tagged : / / /

Whatsapp Business API Integration NodeJs

Whatsapp Business API Integration Node.js could have been an exhaustive process for any developer as per the latest norms you cannot begin the development process and designing the message template till you have verified business account for Facebook first and hence, Whatsapp account and the entire verification process could take from 2 days to 14 days. And to wait for 14 days to even start with the development for developers who are billed for hours of labor is not feasible. Because of this limitation, there are few third-party software that has let developers use the sandbox model in the development mode and begin the process without setting us an official business account manager. Blessing right! Here, we are using one of the many third parties available namely Twilio. Install the npm module package, and then start using the sandbox model straightaway. Though it has limitations as you can only test with one phone number which you have registered and very few messages before you verify the business account officially. But still, that’s the best and only thing available. So, let’s start with the tutorial.

1.Install npm module

The first step for Whatsapp business API integration node.js is to install the module. So, open Console and type the below command.

npm install twilio

Whatsapp Business API Integration NodeJs

2.Make Twilio Account

For Whatsapp business API integration in C# you need to have tokens. Next step is to sign up to twilio account and get twilio accountSID and AuthToken . It is 10 minute process as you need to verify your Whatsapp phone number too.

Go to site:https://www.twilio.com/

Signup, enter your phone number and other basic details and you would get credentials on the console screen, pretty straight forward!

Whatsapp Business API Integration NodeJs

3. Write the Code

Now, let’s begin coding! Add the following code to your node.js application

const client=require(‘twilio’)();

client.messages.create({

from:’whatsapp:+1415523886′,

to:’whatsapp:+919999999999′,

body:’Hello,there!’}).then

(msg=>console.log(message));

Note for Sandbox model from would remain to be twilio number from which you would even receive verification code on Whatsapp mobile, and also write phone number with the international code as above otherwise it would throw exception. 

4.Testing the Code on Whatsapp

Whatsapp Business API Integration NodeJs

on console run the node application and you should receive Whatsapp message on your device.

node app.js

5.Verifying Business Account

And, verifying business account is the last step how cool is that thanks to Twilio:P and it isn’t even sponsored post so!. But remember you can’t use sandbox on production also just a few test messages are allowed. Make sure to verify the business account following the official link and you got to be patient with this process.

https://www.facebook.com/business/help/2058515294227817?id=180505742745347

That was a short and complete guide on the Whatsapp business API integration Node.js Application. Hope it helps 🤓

 

Tagged : / /

Whatsapp Business API Integration In C#

Whatsapp Business API Integration in C# is actually an exhaustive process for any developer solely because with the latest norms you cannot move onto the development process till you have verified business account for Facebook and hence, Whatsapp and verification could take from 2 days to 14 days. So, practically you have to wait 14 days to even start with the development and then, figure out how the messages would go and so on. Because of this limitation, there is some third-party software that allow to use the sandbox model and integrate the code before even you have verified the code. Blessing right. Here, we are using one such third party namely Twilio. One needs to install the NuGet package, and then can start using the sandbox model immediately. Though it has limitations as you can only test with one phone number and very few messages before you verify the business account. But still, that’s the best thing available. So, let’s dive straight into the tutorial.

1.Install NuGet Package

First step for Whatsapp business API integration in C# is to Open nuGet Package Console and type the below command to download the nuGet package.

install-Package twilio

Whatsapp Business API Integration In C#

2.Make Twilio Account

For Whatsapp business API integration in C# you need to have tokens. Next step is to sign up to twilio account and get twilio accountSID and AuthToken

Go to site:https://www.twilio.com/

Signup, enter your phone number and other basic details and you would get credentials on the console screen

Whatsapp Business API Integration In C#

3. Write the Code

Now, let’s begin coding! Add the packages and paste the code where you require and replace your credentials obtained on the previous step.

using Twilio;
using Twilio.Rest.Api.V2010.Account;
using Twilio.Types;

//add the code into the function

try
{
   ServicePointManager.SecurityProtocol = (SecurityProtocolType)3072;
   TwilioClient.Init(“Account SID”, “AUTH TOKEN”);
    MessageResource.Create(
    from: new Twilio.Types.PhoneNumber(“whatsapp:+14155238886”),
    body: “Hello,!”,// link code
    // Convert.ToString(dsProfile.Tables[0].Rows[0]       [HealNTService.DOCUMENT_SERVER_URL]);

to: new Twilio.Types.PhoneNumber(“whatsapp:+919999999999”)
);

//replace your number here
}
catch (Exception ex)
{
 console.Write(ex);

}

Note for Sandbox model from would remain to be twilio number, and also write phone number with the international code as above otherwise it would throw exception. So, you go to replace three things above, authsid, auth token and your registered number with twilio. And it would send Whatsapp message onto the number.

4.Testing the Code on Whatsapp

Whatsapp Business API Integration In C#

On twilio you can customize the way the message would appear and layout stuffs are cool. The output should be similar to this.

5.Verifying Business Account

And, verifying business account is the last step how cool is that. Though you can’t use sandbox on production also just a few test messages are allowed.So, you go to verify the business account following the official link

https://www.facebook.com/business/help/2058515294227817?id=180505742745347

That was a short and complete guide on the Whatsapp business API integration in C#. You should be good to go 🤓

 

Tagged : / /

Top 15 React Js Interview Questions 2020

Learning about React Js Interview Questions would only challenge your skillset and help to improve more. React Js is among the most in-demand technology in 2020 and still perceived to be growing in a couple of years. Mastering react js also pave out the path for react native which introduces application development as well. So, we will look at the top 15 such questions so let’s get started.

1.Explain the concept of Virtual DOM in React js

This is among the most asked react as interview question. render() in react js creates a blueprint of every object and updates every jsx element which is pretty faster as we are not dealing with dom directly. Then, changes are compared with the dom and updation process takes place on the dom with only changed nodes than checking the changes in dom and updating every single node that used to happen otherwise.

Top 15 React Js Interview Questions 2020

2. What is Redux?

Redux is also a js library used with react to write applications on either client side, server end to test the application better, and works in a unidirectional way like react.

3. What is next js?

React js is a library whereas next js is react js framework used to build server-side rendered application providing control over babel and webpack.

 

4.Explain Server Side Rendering in React Js

In client-side rendering, HTML gets loaded first, and then the content is drawn using js and API hits from the server whereas in server-side rendering, the components are loaded at server-side and the output is HTML code.

5.Explain render()

React apps call once ReactDom.render() where the root element is loaded into the dom And doesn’t modifies the container node but only the children nodes. Below index.js calls app.js which has our landing page component attached to it.

Top 15 React Js Interview Questions 2020

6. What do you understand by props and state in react js

State are variables that can be accessed only inside the component whereas props are parameters that are passed into components so that the same components can be reused with different parameters.

class AppComponent extends React.component{

 constructor(props) {

    super(props);
    this.state = {value: ''}
  }
  render(){
      return <input type="text" value={this.state.value}>Enter Name
   }
}
class AppComponent extends React.component{
 render(){
    return <div>Hello {this.props.name}</div>
    }
}
// passing the props
<AppComponent name='Priyanka' />
<AppComponent name='Arora' />

 

7. What is Flux?

Flux is an architecture that Facebook follows while developing react application for the unidirectional flow of data that react js uses via using dispatcher library along with NodeJs EventEmitter.

Top 15 React Js Interview Questions 2020

8. Have you heard about Jest?

Jest is a  module that is used to test react js applications.

yarn add –dev react-test-renderer

9.Explain one-way binding in react js

Unlike Angular which supports two-way data binding, in react js the state is passed onto the view where changes are reflected. There is one single source truth to it. What it means is that the container holding the value of object can only be changed/added/rendered from the component and its value would be reflected everywhere, unlike in Angular that you could change the value of object from both view and controller.

10. How would you implement loop in jsx?

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
    <ul>
      {elements.map((value, index) => {
        return <li key={index}>{value}</li>
      })}
    </ul>
  )
}

11. Do you know what is shadow dom?

Shadow dom are the implementation of elements you hide. Root is detached from children which can be accessed publically, but not the root.

var div = document.createElement('div');
var shadowRoot = div.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>';

<my-header>
  <header>
    <h1>
    <button>
<my-header>
  #shadow-root
    <header>
      <h1>
      <button>

12. What are 3 limitations you see in react js

The reason to choose react js is that its faster, but now angular applications with new features have outdrawn that also. Angular has two-way data binding, which react doesn’t and just transition for ajax developer to js requires a lot of effort

Note: Carefully answer as this is a trick question among other react js interview questions 

13.Which one you consider better react js or angular

React js is better when the application size is smaller and for new developers learning curve of react js is way smaller than angular as angular is a full-fledged framework with MVC structure. Also with react js transition to react native is possible.

14. Why react is separated from react dom?

They both are separated because the fact react has extended application for mobile via react-native language so react library is for both mobile and web applications whereas react-dom is limited to web applications only.

15. What would you be comfortable in migrating from react js to react native or from react js to angular?

This is a tricky among the all react js interview questions. React Native would open the pathways for mobile application development whereas with angular one can master front-end web development. At the end of the day a developer must be comfortable to grasp faster and implement the skills on the project to come.

So, these were among the most asked react js interview questions. Do checkout similar Posts.

Similar Blogs:

React Js Routing Tutorial for Beginners

 

React Js Props And Components Tutorial

 

React Js Installation Guide for Windows

 

React Js Vs React Native:Difference 2020

 

What is React js and Why to use it-2020

 

React Js Vs Angular : Top 10 Differences

 

 

Tagged : / /

React Js form Validation Tutorial Guide

React Js Form Validation has become a lot easier due to the npm packages available, otherwise it would have been a lot more challenging as react js form updation is being dynamically controlled. In this tutorial, we would be using two npm packages react-validation and validator. Here we are creating a signup form with input fields name, email, and phone number. Email validation is been done by using a validator library you can definitely skip the use of validator also and create your own email validation function. Follow the step by step tutorial and also don’t just copy-paste the code, try coding in your IDE for a better idea. So, let’s get started.

1.Install Packages

We are using npm install react-validation module for the validation. It provides 3 wrapper classes namely-Form, Input, Button that change the behavior of default tags form, input, button. Even some react js original basic forms features might not work efficiently because using a 3rd party module indeed restricts a bit, but in react js this is the easiest way to add validations.

React Js form Validation Tutorial | Steps

In this example, we are also using validator module for react js form validation in case of email. Installing this is optional and you can instead use your own js email validation function too.

React Js form Validation Tutorial | Steps

2.Create Validation Methods

We will first import the 3 components of react-validation in the app.js and then validator component for the email. In this react js form validation we are defining required validation, using validator for email and defining phone Number validation where 10 digits are required.

React Js form Validation Tutorial | Steps

import Form from ‘react-validation/build/form’;
import Input from ‘react-validation/build/input’;
import Button from ‘react-validation/build/button’;
import validator from ‘validator’;
import React, { Component } from ‘react’;
const required = (value) => {
  if (!value.toString().trim().length) {
    // We can return string or jsx as the ‘error’ prop for the validated Component
    return ‘Required’;
  }
};
const email = (value) => {
  if (!validator.isEmail(value)) {
    return `${value} is not a valid email.`
  }
};
const phoneNumber = (value) => {
  if (value.toString().trim().length!=10) {
    return `${value} is not a valid phone Number.`
  }
};

3. Using Validation in Form

The methods are written in app.js and so do the react js validation form in app.js, so both the screenshots are in continuation. As in the code in validations property of the Input tag, we are using required, email, and phone number validations.

React Js form Validation Tutorial | Steps

class App extends React.Component {
render() {
    return (
      <div>
        <h1>React Js Form Validation</h1>
        <Form>
            <h3>Login</h3>
            <div>
                <label>
                    Name*
                    <Input  name=’name’ validations={[required]}/>
                </label>
            </div>
            <div>
                <label>
                    Email*
                    <Input  name=’email’ validations={[required,email]}/>
                </label>
            </div>
            <div>
                <label>
                    Phone Number*
                    <Input  name=’email’ validations={[required,phoneNumber]}/>
                </label>
            </div>
            <div>
                <Button>Submit</Button>
            </div>
        </Form>;
      </div>   
    );
  }
}
export default App;

The code in index.js would remain the same

React Js form Validation Tutorial | Steps

4. Run the Code 

Now, how the code works is that if name is empty or phone number is invalid or email is incorrect the submit button would remain to be disabled as we are using Button, not button which has a special property in react js form validation and taken care by react-validation module.

npm start to load the application. Based on the same principle create your own methods for validation similarly. Here is link to official documentation https://www.npmjs.com/package/react-validation for reference.React Js form Validation Tutorial | Steps

This was a short tutorial on react js form validation which can be done without much knowledge of react js forms also.

Similar Posts:

Top 15 React Js Interview Questions 2020

 

React Js Routing Tutorial for Beginners

React Js Props And Components Tutorial

React Js Installation Guide for Windows

React Js Vs React Native:Difference 2020

What is React js and Why to use it-2020

React Js Vs Angular : Top 10 Differences

 

Tagged : / /

React Js Routing Tutorial for Beginners

React js routing is pretty similar to that of angular. Here, we will be using npm install react-router-dom for routing which will be added to the app.js code. Rest index.js and writing components is written just as basics. This example showcases the app.js page to have 3 links, home, blog 1, blog 2 which will route to 3 individual components. router, route, and switch have been used about which will discuss below. So, let’s get started straight away!

1.npm install react-router-dom

The first step to react js routing is definitely to install the router package. Now, there are other npm modules like react-router for again routing in react js application, but react-router-dom is browser-specific, hence it is more used. Also, reacttraining that manages reactjs development promotes the use of react-router-dom. Hence, that’s what we are going to use here also. So, in the terminal type, the command and it should not take more than a minute to install.

npm install react-router-dom

React Js Routing Tutorial for Beginners

 

2.Create components

This sample example of react js routing makes use of 3 components -Home, Blog1, Blog2.  We are creating 3 separate files for the same, with the utmost basic code of components creation.

React Js Routing Tutorial for Beginners

React Js Routing Tutorial for Beginners

React Js Routing Tutorial for Beginners

 

3.Index.js and App.js code

Index.js renders the ReactDom with App.js component attached to it. We haven’t touched this piece of the file for react js routing.

React Js Routing Tutorial for Beginners

App.js file is the one that would require you to grasp react js routing in detail. First, let’s look at the code.

React Js Routing Tutorial for Beginners

import React from ‘react’;
import { BrowserRouter as Router, Route, Link, Switch } from ‘react-router-dom’;
import Home from ‘./Home’;
import Blog1 from ‘./Blog1’;
import Blog2 from ‘./Blog2’;
class App extends React.Component {
   render() {
    return (
      <Router>
      <div>
        <h1>This is App.js File</h1>
        <ul>
          <li> <Link to=”/”>Home</Link></li>
          <li><Link to=”/blog1″>Click on Blog 1</Link></li>
          <li><Link to=”/blog2″>Click on Blog 2</Link></li>
        </ul>
        <Switch>
          <Route exact path=’/’ component={Home}></Route>
          <Route exact path=’/blog1′ component={Blog1}></Route>
          <Route exact path=’/blog2′ component={Blog2}></Route>
        </Switch>
      </div>
      </Router>
      );
   }
}
export default App;

Explanation:

import { BrowserRouter as Router, Route, Link, Switch }
BrowserRouter as Router keeps the UI in sync with the URL by using HTML5 history API. Route is the one that you use to initialize path and attach a component. path=’/blog1′ signifies as here localhost:3000/blog1 would load the component {Blog1} and <link> is what <a> was but the fact that link list the path of component that is defined in the route
Now, talking about switch, this code would work fine without <switch > also, so go ahead and feel free to remove it, the only thing lies here is that <switch> helps to route the first matched route which can be an issue in nesting routing.
say,
<Switch>
<Route path=”/blog/100″ component={blog1} />
<Route path={`/blog/:id`} component={blog2} />
</Switch>
in such cases for blog/100 blog1 would get loaded. So, it just to expand your knowledge that switch has been introduced here.

4.Run the code and test the output

Run the code using npm start and the application should run fine if the steps are followed correctly, with home being the default output on the screen. This completes your react js routing tutorial.

React Js Routing Tutorial for Beginners

This was a short tutorial on react js routing. Similar other helpful links are down below, do check them out.

Similar Posts:

Top 15 React Js Interview Questions 2020

 

React Js form Validation Tutorial Guide

 

React Js Props And Components Tutorial

React Js Installation Guide for Windows

React Js Vs React Native:Difference 2020

React Js Vs Angular : Top 10 Differences

What is React js and Why to use it-2020

 

 

Tagged : / / /

React Js Props And Components Tutorial

Knowledge of react js Props and Components is primary in react js tutorial. right after You have installed react js, you should directly begin writing code with knowledge about props which stands for properties and components too. The core understanding of principles takes a long way in coding. React js was brought to eradicate a limitation. Among them one was to bring isolated pieces of code, so that unit testing is possible. Even the angular is built entirely on the principle of Components, unit testing, and dependency injection. Here, in this tutorial we are focusing on front-end application development, so we will create a component and render the component. after the dom is loaded. Here, we will load a list and pass the parameters as props in react js where right now though we have not introduced forms would be passed statically only. And don’t forget to code on your own than coy paste as it will enrich your knowledge and boost the confidence of creating something on your own. So, let’s get straight into the coding!!

React Js Components

React Js allows to isolate sections of UI by marking them as Components. This feature has allowed to write cleaner code and faster updation by following virtual DOM structure. Because we are talking utmost basics here, the code below can be added just after you have installed a react js app. Though if you are using react js as a library in existing HTML code, this still works where you have to write the code in javascript.

 

The below two codes are equivalent in react as classes are inherited from   React.Component so, react classes are react’s components only. Here, we create a component or function or class called Friend which return the parameter that is passed in JSX. That Parameter is react js props which will discuss in detail below though. Now, you have to write this code in the app.js file of the folder. And, rendering the code in index.js. Now, if you are using react js as a library you can definitely go ahead and write on the same page.

React Js Props And Components Tutorial

 

Both the code depicts the same but we will use above one as the below portion is elaboration of the same.

React Js Props And Components Tutorial

Thats where you would call the component in app.js file .

 

 

React Js Props

Passing parameters from HTML to functions which in react js props is called as passing props in JSX to components where components return a view in the form of JSX or HTML. Here, we have passed a state value=”Priyanka”, but usually you would work with forms which will discuss later because many of you would get intimated by it. Make sure to run the code on your own than copy paste it.

React Js Props And Components Tutorial

Render portion is written in index.js file where we pass the app.js class

React Js Props And Components Tutorial

This is how the output would look like on npm start.

Hope, you have got the hand of react js props and react js components as components are classes only extended by react.Component Interface to isolate sections of code and prop are parameters you pass from JSX to the component. So, this was a short tutorial on react js props.

Similar Posts:

Top 15 React Js Interview Questions 2020

 

React Js form Validation Tutorial Guide

 

React Js Routing Tutorial for Beginners

 

React Js Installation Guide for Windows

React Js Vs React Native:Difference 2020

React Js Vs Angular : Top 10 Differences

What is React js and Why to use it-2020

 

 

 

Tagged : / / /

React Js Installation Guide for Windows

React Js Installation is pretty much like that of Angular, but you can directly add react js to your website as a library using js. Here, we would discuss creating react app from scratch with node.js as a server. If you want to use react js with dot net then, the dot net has a separate react js web application on it, but this post would be strictly for node.js at the server-side. Also, let’s not get confused with next.js which is react js framework, to build static and also server‑rendered web applications using react. But, here we would strictly use react js as front end build where there is no connection to the database. One, can’t begin with react js installation until you have installed npm and also git as they are kind of prerequisites.

React Js Installation Pre-requisites

1.Install Git

All the developers have Git installed already, but if you don’t so do install it as you can work with CMD, but git is always the priority. You can download git bash editor from below link, it won’t take much time:

https://git-scm.com/downloads

2. Download NPM 

As discussed above, this article is for node.js as server-side so having npm and node is mandatory. Also, Node >= 8.10 and version npm >= 5.6 on your machine is the requirement, and if you have a lesser version than these then upgrade it. You can check versions using commands:

npm -v

node -v

React Js Installation Guide for Windows

And, just in case you have not installed node.js, then install using the link below. Always remember that if you install node.js, npm gets installed with it but not the vice-a-versa.

https://nodejs.org/en/download/

React Js Installation Steps

We have divided react js installation in 5 steps for better understanding where we create a react app using npm, then look at its folder structure, and finally edit it to get started with it.

Step 1: Create React js application

 React Js Installation Guide for Windows

npm is a package runner tool that comes with npm and would install all packages react js requires. my-app here is the name of the application, you can customize to what you like. This step would actually take time, depending on RAM but around usually 5 mins to set it up. After it is set up, the screen would show something like this:

React Js Installation Guide for Windows

Step 2: Move into the directory

React Js Installation Guide for Windows

cd is basic change directory command to get into the folder In windows you can do it directly with GUI too.

step 3:Open the folder using IDE

Now, IDE preference is a complete developer’s comfort. Sublime, Visual Studio Code, or any other you like. Here, we are using Visual Studio Code, so don’t get confused if it looks a tiny bit different at your end, and also color could defer!

React Js Installation Guide for Windows

step 4: Run the application

React Js Installation Guide for Windows

Type npm start in command prompt which would launch the web application on standard port. You can see how the application looks like after launch in the browser from below pic. Now, react js installation is successful, but we will also look at how to edit the launch page and configure it, to get wholesome idea of the application.

React Js Installation Guide for Windows

step 5: configure the starter page

Go to the src folder and edit the App.js file as the starter page stated! And, of course we are going to write Hello, World! And then save the changes, which would automatically be reflected in the browser window

React Js Installation Guide for Windows

React Js Installation Guide for Windows

This was a complete and short tutorial on react js installation. If you already have git and node.js installed then, the entire process will take 15 mins maximum. But, for a complete newbie, it could take more also, so don’t worry if you have completed this tutorial, congratulations as you are going to love react js!

Similar Posts:

Top 15 React Js Interview Questions 2020

 

React Js form Validation Tutorial Guide

 

React Js Routing Tutorial for Beginners

 

React Js Props And Components Tutorial

 

React Js Vs React Native:Difference 2020

React Js Vs Angular : Top 10 Differences

What is React js and Why to use it-2020

 

Tagged : / /

React Js Vs React Native:Difference 2020

React Js Vs React Native is among the most asked question and even developers working for 2-3 years are now very clear about it. React Js is used for web development whereas React Native is for native mobile application development. Both are developed and maintained by Facebook. One cannot begin working with react native straightaway because you need to be familiar with React Js basics and most importantly JSX. So, this blog is dedicated to the detailed discussion regarding the same and yes, we have covered ‘demand’ for respective too. So, let’s dive straight into it.

1. React Js VS React Native: How they Started

React Js was introduced to the developers in 2013 by Facebook to dynamically build single page application which allowed faster rendering of webpages using a unique concept of virtual dom structure whereas react native was introduced again by Facebook in 2015 which primarily focus on building native mobile applications, earlier was supported for IOS apps but now also for android apps.

2.Purpose of React Js Vs React Native

The primary focus of react js was to add on a library where there could be the faster rendering of content in the single page that is the same page is updated on using server-side rendering and redux. React js also uses one-way data binding. React native on the other hand uses react js UI and on top of it uses its own native libraries. The coolest part is that a developer experienced with react js can easily develop mobile apps too using the same knowledge of jsx which later on expanded to being platform-independent, both for android and ios applications.

3.Getting started with React Js Vs React Native

To learn react js one needs to be familiar with react native as it is just like react and uses native components, hence basic understanding of JSX, state and props are required. But, on top of that you need to grasp text, view, and image components of react native. Hence, learning react would not only make you a web developer but also an app developer. And, the learning curve of both is pretty small that is it would require only a few months to be efficient at development.

4.Learning Curve

React could actually take up a few months to get used to with JSX, redux, one-way binding because these are not conventional web development terminologies but react native can only be built on top of react js. And also, react js is more focussing on the development end whereas react js is all about development and designing. One needs to work with native components like text, view, and image.

5.Competition of React Js Vs React Native

React Js biggest competition is Google’s Angular. Angular is a framework that has redefined web development and introduced some cool new things like two-way data binding, dependency injection, and built on MVC than react js being a library with view aspect only. React builds native apps hence, hybrid apps framework like Apache Cordova is among the biggest competition as if web apps could be used as mobile apps, it saves tons of money!

6.Basic Principle of React Js Vs React Native

React Js works on Virtual DOM principle where the need for regular updation of single-page applications like in Facebook or any typical news feed could become faster is solved as virtual dom creates a copy of document object model and compare with original dom. These changes are then reflected at the dom level than dom to compare line by line changes. Whereas with react native thought was to use the primary knowledge of react language and then, build applications also than learning new technologies again by reusing the react UI components than web components.

7.Disadvantages of respective

The biggest disadvantage with React Native lies that it is actually pretty new and documentation on it has its own limitation. Also, one needs to learn react also causes a hindrance in itself. But with react, the advantage of faster loading has also been taken over by angular now. React is just a library which is for faster loading of sites like newsfeed so it itself is such a narrow field and then learning native can seem to be not a secure move as react native is still finding its ground in the industry yet.

8.Development Vs Designing

React js is for web development. There could also be a separate designer for react js front end who managers UX version of the sites, but when it comes to react native, one needs to be equipped with both development and designing. Mobile application development is indeed both in one!

9.React Js Vs React Native: Challenges

Angular vs react js battle is all over the internet. Because Angular can do all what react js can do, but just react js is a bit faster for smaller application as for larger applications angular is the preference. React native on the other hand face challenges with the hybrid application as for smaller budget projects web apps are a thing, and also react native is still comparatively new.

10. Salary of React Js Vs React Native Developer in India

The average package of react js developer according to glassdoor in India is Rs 5,00,000 lakh/pa whereas the react native developer is Rs 3,84,000 lakh/pa which is lower and also because in the industry web developers are paid more than mobile application developers in general.

Similar Blogs:

React Js form Validation Tutorial Guide

 

React Js Routing Tutorial for Beginners

 

React Js Props And Components Tutorial

 

React Js Installation Guide for Windows

What is React js and Why to use it-2020

React Js Vs Angular : Top 10 Differences

 

Tagged : / /