Coding Fungus: December 2019

Saturday, December 21, 2019

jQuery Selectors

With jQuery you select (query) HTML elements and perform "actions" on them.

jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

:input	$(":input")	All input elements
:text	$(":text")	All input elements with type="text"
:password	$(":password")	All input elements with type="password"
:radio	$(":radio")	All input elements with type="radio"
:checkbox	$(":checkbox")	All input elements with type="checkbox"

[attribute]	$("[href]")	All elements with a href attribute
[attribute=value]	$("[href='default.htm']")	All elements with a href attribute value equal to "default.htm"
[attribute!=value]	$("[href!='default.htm']")	All elements with a href attribute value not equal to "default.htm"
[attribute$=value]	$("[href$='.jpg']")	All elements with a href attribute value ending with ".jpg"

HTML manipulation
DOM manipulation
CSS manipulation
Event Handling
AJAX
Effects
Animation
Widgets

builtin objects
browser object
user defined objects
document objects

Spring Boot with React

React for begineers



For using above 3 we need to create below 3 files in

 root directory.

You have probably heard of ReactJS. If you know reactJS, you likely know what create-react-app is. For those of you who have no idea what either of those two things are, ReactJS is a UI library which is very helpful in building intelligent complex UIs, and create-react-app is a CLI tool for setting up or bootstrapping a boilerplate dev setup to make React applications.

Components

Conceptually, components are like JavaScript functions.

They accept arbitrary inputs (called “props”) and

return React elements describing what should appear

on the screen.

Mounting

We want to set up a timer whenever the Clock is rendered to the DOM for the first time. This is called “mounting” in React.

Unmounting
We also want to clear that timer whenever the DOM produced by the Clock is removed. 
This is called “unmounting” in React.

Props vs State

In a React component, props are variables passed to it by its parent component. State on the other hand is still variables, but directly initialized and managed by the component.

For full detail, start here :

https://reactjs.org/docs/hello-world.html

Repo for class based setup :

https://github.com/vikasmishra5599/ReactDummy

Hello world class based setup, stepwise mention
https://lostechies.com/derekgreer/2017/05/25/hello-react-a-beginners-setup-tutorial/

Babel 
https://www.newline.co/fullstack-react/articles/what-are-babel-plugins-and-presets/#:~:text=In%20Babel%2C%20a%20preset%20is,react%20%3A%20Adds%20support%20for%20JSX

Webpack
https://www.freecodecamp.org/news/an-intro-to-webpack-what-it-is-and-how-to-use-it-8304ecdc3c60/

OAuth 2.0 and OpenID connect

To be updated

Coding Fungus