Customers who sign-up prior to 30/06/2024 get unlimited access to free features, newer features (with some restrictions), but for free for at least 1 year.Sign up now! https://webveta.alightservices.com/

Category: Javascript

Categories
Javascript React

React Functional Components, showing or hiding content based on conditions

In React Functional components, content can be shown or hidden based on conditions.

function Component1 {
    return (
        <React.Fragment>
            <p>Hello!</p>
        </React.Fragment>
    );
}

The above component would always show the paragraph with the text “Hello!”. Now, let’s say if we are displaying content conditionally, we can use the following syntax:

function Component1 {
    const [condition, setCondition] = React.useState(false);

    return (
        <React.Fragment>
            {condition && (
                <React.Fragment>
                    <p>Condition is true!</p>
                </React.Fragment>
            )}
            {!condition && (
                <React.Fragment>
                    <p>Condition is false!</p>
                </React.Fragment>
            )}
            <p>Hello!</p>
        </React.Fragment>
    );
}

In the above code snippet, we have created a state variable condition and initialized to false. If condition is true, the paragraph with text – “Condition is true!” would be displayed. If condition is false, the paragraph with text – “Condition is false!” would be displayed. Irrespective of the value of condition, the paragraph with the text – “Hello!” would be displayed.

Based upon the application, the value of condition can be changed and the application’s user interface would be updated appropriately.

setCondition(true);

The above coding pattern can be used for example for displaying a “Please wait” message while some data is loading. Or showing a table only when there is data, else showing something like “No data!”

React can be progressively integrated into existing websites or for new websites, very easy learning curve and can be run from browser without even having the node based server-side rendering. Of course, node based server-side rendering etc… can be done like other SPA frameworks.

The production version of React in-browser scripts are ~132kb and about ~45.1kb compressed and can be used from CDNs. The custom JSX code can be transpiled before production deployment for slightly faster performance without using babel in browser.

This would be the content of a future post. In the post, I would discuss about transpiling and minifying.

Compressing and serving with gzip / brotli or even using your own CDN’s in the cloud is an entirely different topic, but can be done easily for static content.

–

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

Categories
Javascript

Javascript object destructuring

Modern SPA frameworks use certain javascript syntaxes and concepts for easier development. One such syntax is Javascript destructuring.

Consider the following code snippet:

const person = {
    'FirstName': 'Kanti',
    'LastName': 'Arumilli'
}

console.log(person.FirstName);
console.log(person.LastName);

In the above code we have declared an object with two properties and named the object person. The individual properties are accessed and the values are printed to the console.

We can use destructuring to extract the properties into variables.

const { FirstName } = person;

console.log(FirstName);

In the above code we have destructured the FirstName property into a seperate variable and printed to the console.

In the following code we can destructure both the properties:

const {FirstName, LastName} = person;

Moreover, we can even assign default variables.

const {FirstName, LastName = 'Arumili'} = person;

This is an important concept and often used in React when using useState() and props. I would write some blog posts later on these concepts.

–

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

Categories
HTML Javascript React

Basic introduction to using React in-browser

React is a SPA library built by Facebook and has very wide usage. Angular and Vue offer similar functionality. The three frameworks have their own advantages and disadvantages which is out of scope.

For quick prototyping and for other reasons, there might sometimes be a need for using React in-browser i.e include some Javascript files from CDN, write some Javascript and see these in usage.

In this blog post, I won’t go into great lengths or details, but more of a getting started blog post.

I am assuming you would like to use JSX syntax and would like babel to transpile in-browser.

Include the following 3 javascript files:

<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Note: Assuming you are developing quick prototype, I have provided the development version links for React 17.0.2. But there are minimized production versions. The development scripts are useful for easier debugging because of detailed error messages.

Now include another .js file of your choice and include the js file in your HTML page – assuming the .js file has a name of RootComponent.js

<script src="~/js/RootComponent.js" type="text/babel"></script>

Note the type is “text/babel” because we would be using JSX for our markup.

Add a div with a id of “root” in your HTML page which would become the container for our React application. I have added Please wait… because the browser would display Please wait… while React framework initializes.

<div id="root">Please wait...</div>

Now add the following code snippet to your RootComponent.js

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

function App() {
    return (
        <div>Hello World!</div>
    )
}

ReactDOM.render(
    <App />,
    rootElement
)

In the above few lines of code, we have used plain javascript for getting the div with an id of “root”.

We have defined a minimal functional component by the name of App.

We are using React library and calling a method called Render and asking React library to render the App component in the place of the root element i.e the div with the id of “root”.

–

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

Categories
Javascript

Some useful Javascript DOM manipulation functions

Most of you know I like sharing my knowledge. Here are some simple but very useful DOM manipulation functions in Javascript.

As part of development for WebSearch, I wanted leaner Javascript and for some part of the development, I am using direct Javascript rather than libraries such as jQuery. jQuery has these functionality and allows easier development. My situation and necessity are a bit different.

var ele = document.getElementById("elementid");
// for getting a reference to an existing element in the DOM

var dv = document.createElement("div");
// for creating a in-memory element.

parentEle.appendChild(childEle);
// for adding an element as a child element of another element

ele.id = "elementId";
// Setting id of element

ele.classList.add("cssClass");
ele.classList.remove("cssClass");
// Adding and removing css classes

ele.innerText = "Text";
ele.innerHTML = "<>...M/>";
// Setting text and innerHTML
// caution with innerHTML - don't inject unsafe/unvalidated markup

ele.addEventListener("event", (ev) => {
   // Anonymous function
});
// Handle events such as click etc...

ele.addEventListener("event", fnEventHandler);
// Handle events by using a function - fnEventHandler

I am hoping this blog post helps some people.

–

Mr. Kanti Kalyan Arumilli

Arumilli Kanti Kalyan, Founder & CEO
Arumilli Kanti Kalyan, Founder & CEO

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.