CSS External Styling in React

• Create Components folder under src folder
• Add CSSExternalCss.js file and add below Code

import React, { Component } from "react";

import "./CSSExternalCss.css";

class CSSExternalCss extends Component {

render() {

return (

<div>

CSS external Styling<br />

Styling React components with CSS stylesheets

<div className="mycss">Style!</div>

<h5>Style!</h5>

</div>

);

}

}

export default CSSExternalCss;

• Add CSSExternalCss.css file and add below Code

h5 {

background-color: rebeccapurple;

height: 50px;

font-size: 20px;

}

.mycss {

background-color: red;

height: 30px;

font-size: 30px;

}

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSExternalCss from "./component/CSSExternalCss";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSExternalCss />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

CSS Inline Styling in React

• Create Components folder under src folder
• Add CSSInlineStyling.js file and add below Code

import React, { Component } from "react";

class CSSInlineStyling extends Component {

render() {

return (

<div>

CSS Inline Styling

<h1 style={{ color: "red", fontSize: "15px", textAlign: "center" }}>

Style!

</h1>

<h1 style={{ backgroundColor: "lightblue" }}>Style!</h1>

</div>

);

}

}

export default CSSInlineStyling;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSInlineStyling from "./component/CSSInlineStyling";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSInlineStyling />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Reusable button components in React

• Add Button.js file and add below code

import React from "react";

const Button = props => {

return (

<button onClick={props.handleClick} className={"btn-" + props.theme}>

{props.children}

</button>

);

};

export default Button;

• Add ClassEXP1.js file and added below code

import React, { Component } from "react";

import Button from "./Button";

class ClassEXP1 extends Component {

constructor() {

super();

this.state = { Data: "" };

}

submitClick = e => {

console.log("Submit Button Clicked");

this.setState({ Data: "Submit Button Clicked" });

};

resetClick = e => {

console.log("Reset Button Clicked");

this.setState({ Data: "Reset Button Clicked" });

};

cancelClick = e => {

console.log("Cancel Button Clicked");

this.setState({ Data: "Cancel Button Clicked" });

};

render() {

return (

<div>

<Button theme="green" handleClick={this.submitClick}>

Submit

</Button>

<Button theme="blue" handleClick={this.resetClick}>

Reset

</Button>

<Button theme="red" handleClick={this.cancelClick}>

Cancel

</Button>

<div>{this.state.Data}</div>

</div>

);

}

}

export default ClassEXP1;

• Add styles.css file and add below code

.App {

font-family: sans-serif;

text-align: center;

}

button {

padding: 10px 10px;

border-radius: 15px;

font-size: 18px;

font-weight: 600;

margin: 0 5px;

}

.btn-red {

background-color: #e14d4d;

color: #d9abab;

}

.btn-green {

background-color: green;

color: #e0a2d2;

}

.btn-blue {

background-color: blue;

color: #4e6f64;

}

.container {

border: 2px solid red;

padding: 10px;

}

• Update index.js file as below.

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import ClassEXP1 from "./ClassEXP1";

function App() {

return (

<div className="App">

<ClassEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

 Click on Submit button

Click on Reset button

Fetch Data with Loading and Error Handling in React JS

• Create Components folder under src folder
• Add FetchDataLoadingErrorHandling.js file and add below Code

import React, { Component } from "react";

const API = "https://hn.algolia.com/api/v1/search?query=";

const DEFAULT_QUERY = "redux";

class FetchDataLoadingErrorHandling extends Component {

constructor(props) {

super(props);

this.state = {

hits: [],

isLoading: false

};

}

componentDidMount() {

this.setState({ isLoading: true });

fetch(API + DEFAULT_QUERY)

.then(response => {

if (response.ok) {

return response.json();

} else {

throw new Error("Something went wrong ...");

}

})

.then(data => this.setState({ hits: data.hits, isLoading: false }))

.catch(error => this.setState({ error, isLoading: false }));

}

render() {

const { hits, isLoading, error } = this.state;

if (error) {

return <p>{error.message}</p>;

}

if (isLoading) {

return <p>Loading ...</p>;

}

return (

<ul>

{hits.map(hit => (

<li key={hit.objectID}>

<a href={hit.url}>{hit.title}</a>

</li>

))}

</ul>

);

}

}

export default FetchDataLoadingErrorHandling;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import FetchDataLoadingErrorHandling from "./Components/FetchDataLoadingErrorHandling";

function App() {

return (

<div className="App">

<FetchDataLoadingErrorHandling />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Fetch Data with Loading option in React JS

• Create Components folder under src folder
• Add FetchDataLoading.js file and add below Code

import React, { Component } from "react";

const API = "https://hn.algolia.com/api/v1/search?query=";

const DEFAULT_QUERY = "redux";

class FetchDataLoading extends Component {

constructor(props) {

super(props);

this.state = {

hits: [],

isLoading: false

};

}

componentDidMount() {

this.setState({ isLoading: true });

fetch(API + DEFAULT_QUERY)

.then(response => response.json())

.then(data => this.setState({ hits: data.hits, isLoading: false }));

}

render() {

const { hits, isLoading } = this.state;

if (isLoading) {

return <p>Loading ...</p>;

}

return (

<ul>

{hits.map(hit => (

<li key={hit.objectID}>

<a href={hit.url}>{hit.title}</a>

</li>

))}

</ul>

);

}

}

export default FetchDataLoading;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import FetchDataLoading from "./Components/FetchDataLoading";

function App() {

return (

<div className="App">

<FetchDataLoading />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Fetch Data in React JS

• Create Components folder under src folder
• Add FetchDataExp1.js file and add below Code

import React, { Component } from "react";

const API = "https://hn.algolia.com/api/v1/search?query=";

const DEFAULT_QUERY = "redux";

class FetchDataExp1 extends Component {

constructor(props) {

super(props);

this.state = {

hits: []

};

}

componentDidMount() {

fetch(API + DEFAULT_QUERY)

.then(response => response.json())

.then(data => this.setState({ hits: data.hits }));

}

render() {

return (

<div>

<ul>

{this.state.hits.map(hit => (

<li key={hit.objectID}>

<a href={hit.url}>{hit.title}</a>

</li>

))}

</ul>

</div>

);

}

}

export default FetchDataExp1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import FetchDataExp1 from "./Components/FetchDataExp1";

function App() {

return (

<div className="App">

<FetchDataExp1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Class Component in React JS

• Create Components folder under src folder
• Add ClassComponents.js file and add below Code

import React,{Component} from 'react';

class ClassComponents extends Component{

render(){

return(

<div>Class Components</div>

);

}

}

export default ClassComponents;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import ClassComponents from "./Components/ClassComponents";

function App() {

return (

<div className="App">

<ClassComponents />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Arrow Function in React JS

• Create Components folder under src folder
• Add ArrowFunctions.js file and add below Code

import React, { Component } from "react";

class ArrowFunctions extends Component {

constructor(props) {

super(props);

this.state = {

Name: "Adi"

};

}

changeName = () => {

this.setState({ Name: "Adi JC" });

};

render() {

return (

<div>

Arrow Functions

<p>{this.state.Name}</p>

<button onClick={this.changeName}>Click me</button>

</div>

);

}

}

export default ArrowFunctions;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import ArrowFunctions from "./Components/ArrowFunctions";

function App() {

return (

<div className="App">

<ArrowFunctions />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

How to clear div content in jquery

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").empty();
    });
});
</script>
</head>
<body>

<div id="div1">
  Smoe text
</div>

<br>
<br>
<button>Remove</button>

</body>
</html>

How to validate double value in c#.net

 Add namespace: using System.Text.RegularExpressions;



if (Regex.IsMatch(txt_number.Text, @"\d+(\.\d{1,2})?"))
{
    //valid Number
    // Do something with value
}
else
{
    //invalid Number
    lbl_error.Text = "Please enter a valid number";
    return;
}

Int value validation in c#.net

            int parsedValue;
            if (int.TryParse(txt_number.Text, out parsedValue))
            {

                //valid Number
                // Do something with value
            }
            else
            {
                //invalid Number
                lbl_error.Text = "Please enter a valid number";
                return;
            }

Decimal number validation in c#.net

           decimal d;
            if (decimal.TryParse(txt_number.Text, out d))
            {
                //valid Number
                // Do something with value
            }
            else
            {
                //invalid Number
                                lbl_error.Text = "Please enter a valid number";
                return;
            }