13/07/2017

React State 

State is the place where the data comes from.If we have, for example, ten components that need data from the state, we should create one container component that will keep the state for all of them.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
  
      this.state = {
         header: "Header from state...",
         content: "Content from state..."
      }
   }
 
   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
         </div>
      );
   }
}

export default App;

11/07/2017

• React JSX
  💚React uses JSX for templating instead of regular JavaScript. It is not necessary to use it, but there are some pros that comes with it.
  
• JSX is faster because it performs optimization while compiling code to JavaScript.
• It is also type-safe and most of the errors can be caught during compilation.
• JSX makes it easier and faster to write templates if you are familiar with HTML.

 

import React from 'react';

class App extends React.Component {
   render() {

      var i = 1;

      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}

export default App;

 React component
 
💖This component is owner of Header and Content. We are creating Header and 
Content separately and just adding it inside JSX tree in our App 
component. Only App component needs to be exported.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}

class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}

10/07/2017

Reactjs

React is front end library developed by Facebook.
React.JS allows to create reusable UI components.

 

Features of React :

• Components − This will help to maintain the code when working on larger scale projects.
• JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.  
• Unidirectional data flow and Flux − React implements one way data flow which makes it easy to reason about app. Flux is a pattern that helps keeping data unidirectional. 

Advantages of React 

• React can be used on client and server side.

• Component and Data patterns improve readability which helps to maintain larger app.

• React uses virtual DOM which is JavaScript object.

  But React only covers view layer of the app so you still need to choose other technologies to get a complete tooling set for development.React is using in-line templating and JSX. This can seem awkward to some developers.  

06/07/2017

jQuery load() Method

       💙The load() method loads data from a server and puts the returned data into the selected element.
 
Syntax:

$(selector).load(URL,data,callback); 

 

💖The required URL parameter specifies the URL you wish to load.

 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt #p1");
    });
});
</script>

jQuery $.get() Method

    💙The $.get() method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test.asp", function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>

    jQuery $.post() Method

💙The $.post() method requests data from the server using an HTTP POST request.

Syntax:

$.post(URL,data,callback);

 <script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>

03/07/2017

jQuery - AJAX

 

💖What About jQuery and AJAX?

jQuery provides several methods for AJAX functionality.
With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page.

💙jQuery - AJAX load() Method

The jQuery load() method is a simple, but powerful AJAX method.
The load() method loads data from a server and puts the returned data into the selected element.

💙jQuery - AJAX get() and post() Methods

The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request.

 

30/06/2017

AJAX

• Update a web page without reloading the page
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
• Send data to a server - in the background

What is AJAX?

AJAX = Asynchronous JavaScript And XML.
AJAX is not a programming language.
AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web server)
• JavaScript and HTML DOM (to display or use the data)

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

How AJAX Works

 

 

26/06/2017

Express Router and Routes

 

 The HTTP Verb used to access it. 

 

Route	HTTP Verb	Description
/api/bears	GET	Get all the bears.
/api/bears	POST	Create a bear.
/api/bears/:bear_id	GET	Get a single bear.
/api/bears/:bear_id	PUT	Update a bear with new info.
/api/bears/:bear_id	DELETE	Delete a bear.

23/06/2017

Build Node.js RESTful APIs

What is REST?

💖Rest is an acronym for Representational State Transfer. It is web standards architecture and HTTP Protocol.

 

Setting up the routes

💖Routing refers to determining how an application responds to a client request for a specific endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, and so on).

💖Each of our routes has different route handler functions, which are executed when the route is matched.

Adding a middleware

💖Middlewares basically intercepts incoming http request and as such you can use them to perform several operations ranging from authentication to validations etc.

 

20/06/2017

Mongoose

💙Mongoose acts as a front end to MongoDB, an open source NoSQL database that uses a document-oriented data model. A “collection” of “documents”, in a MongoDB database, is analogous to a “table” of “rows” in a relational database.

     why we wrote Mongoose

 var mongoose= require ('mongoose');

mongoose.connect('mongodb://localhost/test');

var cat = mongoose.model('cat', {name: string});

var kitty = new Cat({ name: 'Zildjian' });
kitty.save(function (err) {
  if (err) {
    console.log(err);
  } else {
    console.log('meow');
  }
});

💙Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks and more, out of the box.

19/06/2017

ExpressJS – Routing

💙Routing function is used to define routes in an Express application.

              

💙app.method(path, handler)

          This method can be applied to any one of the HTTP verbs – get, set, put, delete. 

          Path is the route at which the request will run.
          Handler is a callback function that executes when a matching request type is found on the relevant route.

ExpressJS – HTTP Methods

HTTP methods:

     1.GET

     

     2.POST

     3.PUT

     4.DELETE

ExpressJS – Middleware

💙These functions are used to modify req and res objects for tasks like parsing request bodies, adding response headers, etc.

Updating Documents

💙Mongoose provides 3 functions to update documents. The functions are described below:

1.Model.update(condition, updates, callback)

2.Model.findOneAndUpdate(condition, updates, callback)

3.Model.findByIdAndUpdate(id, updates, callback)
         💙This function updates a single document identified by its id.

Deleting Documents

1.Model.remove(condition, [callback])

2.Model.findOneAndRemove(condition, [callback])

3.Model.findByIdAndRemove(id, [callback])
        💙This function removes a single document identified by its id.

ExpressJS – Cookies

❤Every time the user loads the website back, this cookie is sent with the request.

 💙This helps us keep track of the user’s actions.

💙The following are the numerous uses of the HTTP Cookies:

1.Session management

2.Personalization

3.User tracking

16/06/2017

ExpressJS – Hello World

💙Create a new file called index.js and type the following in it.

             var express = require('express');
             var app = express();
             app.get('/', function(req, res){
             res.send("Hello world!");
            });
            app.listen(3000);

💙Save the file, go to your terminal and type the following.

           nodemon index.js

💙Go to http://localhost:3000 and a message will be displayed as in the following screenshot.

     

       

    How the App Works?

💙app.get(route, callback)

          This function tells what to do when a get request at the given route is called. The callback function has 2 parameters, request(req) and response(res).

💙res.send()

          Here we are sending the string "Hello World!".

15/06/2017

Expressjs

💙What is express?

        Express provides a minimal interface to build our applications. 

        It provides us the tools that are required to build our app. 

        It is flexible as there are numerous modules available on npm, which can be directly plugged into Express.

💙Why use express?

        It is very flexible and pluggable.

                                  Expressjs Environment

We will learn how to start developing and using the Express Framework in this chapter.

npm stands for Node Package Manager.

How to use npm?

     There are two ways to install a package using npm: globally and locally.

                1.Globally

                       : This method is generally used to install development tools and CLI based packages.

         Example: npm install -g <package-name>

  

                2.Locally

                       : This method is generally used to install frameworks and libraries.

         Example: npm install <package-name>