DEV Community: evenmik

How to handle onclick events in react.js? (With Examples)

evenmik — Wed, 07 Oct 2020 03:55:59 +0000

What is the React onClick Event Handler?

In React, the onClick handler enables you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app.

Event handlers are made to identify what action is to be taken whenever an event is shot. This could be a mouse click or a change in a text input. In this post, we will look at a few examples of React onClick Event Handler.

In React apps, events are written in the CamelCase format, which means the onclick event will be written as onClick in a React app.

React event handlers are written inside curly braces:

onClick={shoot} instead of onClick="shoot()".

React Example-

Take the Shot!

To prevent the default link behavior of opening a new page, you can write:

function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}

return (

Click me

);
}

Using the inline function to pass in additional arguments to a function-

import React from 'react';

function App() {
return (
alert('hello'))}>
Click me!

);
}

export default App;

Event handlers recognize what action needs to be taken when an event occurs. The onClick event is used to listen for click events on DOM elements. I have given multiple React onClick Event Handling examples after which things might be a little clearer to you.

What makes python a better choice for machine learning?

evenmik — Thu, 01 Oct 2020 05:39:31 +0000

AI projects are distinct from conventional projects in technology. The variations arise in the technology stack, the skills needed for an AI-based project, and the need for in-depth analysis. You can use a programming language that is stable, scalable and has resources available to implement your AI goals. All of this is offered by Python, the sole reason we see an abundance of Python AI projects.

Python allows developers to be efficient and optimistic about the applications they're developing, from development to deployment and maintenance. Ease and reliability, exposure to excellent libraries and frameworks for AI and machine learning (ML), accessibility, platform independence, and a wide community are advantages that make Python the perfect match for machine learning projects. These contribute to the language's overall success.

Why is it a top choice?

Conciseness
Simple to read
Easily extensible
Interactive
Multiparadigm

Check This Article

5 Types of Machine Learning Algorithms You Should Know

Is Python slow in comparison to use cases of other languages?

evenmik — Wed, 30 Sep 2020 09:53:40 +0000

A variety of studies have indicated that Python is slower than other commonly used programming languages, including Java and C++. Instead of enhancing code execution speed, many programmers substitute the default runtime of Python with a custom runtime.

To improve the performance and speed of the application, some developers also rewrite existing Python code. But the usage statistics posted on different websites show that Python is more successful than PHP, Ruby, JavaScript, and Go at the moment. There are also a number of reasons why, considering it being so slow, developers prefer Python to many other programming languages.

Why is it so popular?

Concise and Readable Application Code
Multiple Popular Programming Paradigms
High-Level Programming Language
No Code Recompilation
Rapid Application Prototyping
A Robust Standard Library
A Variety of Frameworks and Tools
Build Complex Applications
A Component of LAMP Stack
Test-Driven Development
Reduce Project Overheads
Python is highly flexible

In terms of benchmarks and efficiency, Python might be slow in comparison to C/C++, but its processors and computers are as solid as ever in terms of computing power and the performance gap from C/C++ won't matter that much. Python, however, is a high-level programming language that is often used around the world. It mainly has more in-built functions that can decrease a programmer's effort.

As compared to some other languages, the code lines are much shorter. It is commonly used to solve mathematical problems, which is why it is used in artificial intelligence and machine learning. Python has better precision and is more productive to use. That's why more people are trying to get pythons for a better future.

Check the Link For Some of the Best Code Editor For python

https://codersera.com/blog/best-python-ides-and-code-editors/
https://www.softwaretestinghelp.com/python-ide-code-editors/

What Makes Ruby on Rails A Good Choice In 2020?

evenmik — Tue, 29 Sep 2020 04:29:30 +0000

Ruby on Rails is being used by some of the top-known web applications such as Github, Airbnb, Basecamp, Slideshare, etc. It's very quick to get started with Ruby on Rails and there's no trouble at all. There is at least a prospectus dedicated to Ruby & Ruby on Rails for any software development business.

However, as any technology encounters many challenges over time, Ruby on Rails has also faced some heavy criticism and competition from new technologies in recent years. As a consequence, many modern-day developers doubt its usefulness in the future. But it can prove to be a good choice in 2020, here’s why:

Ruby on Rails is a programming language that allows rails to run the code or components as a platform in accordance with the requirements. In addition, it is open source and can be accessed at no cost.
Due to its ease of access and reliability, Ruby on rails is the most established and esteemed platform so far and is always a priority among developers.
Ruby on Rails is a structured language, and if you already have any knowledge of JavaScript, it's super easy to understand. It's a lot simpler than other high-level languages, like C # or Java. Its object-oriented approach makes it cooler than other business technology, and the first technique of the client is Ruby on Rails.
Ruby on Rails is extremely stable and efficient as it needs to be combined with other languages whenever we need it. It offers different additional features that a developer can depend on easily.

It also offers:

Accelerated development with optimized cost
Efficient options for start-ups and demonstrating proof of concept
Merits in the e-Commerce domain
Additional security measures
Active and effective community support

In conclusion, if you want to venture into programming, you can certainly experience how Ruby & Ruby on Rails will speed up the application and improve it. Ruby will provide you with the basis of Rapid Application Development (RAD) as an open-source object-oriented programming language, which will obviously position you in the field of web development in 2020.

React vs Vue: Which one is better in terms of Performance & Memory Consumption?

evenmik — Mon, 28 Sep 2020 08:34:53 +0000

React was developed in order to address specific Facebook needs, and remains to be handled by the tech firm. There were certain doubts about the license to React in the past; currently, however, the tool operates under the MIT License, making it open source. The corporate backing of React, particularly from such a significant figure, signifies stability in the long run and indicates that React will continue to be developed with long-term support.

Vue.js is an open-source framework for building complex UI. It enhances a lot of concepts. Vue is marketed as a progressive platform that means you can migrate your existing projects one feature at a time. Vue can go between a lightweight library and a full-fledged system, depending on your needs.

Performance & Memory Consumption

There are two key metrics that decide an app's speed: start-up time and runtime performance.

Both libraries have tiny bundle sizes (31 KB for Vue/84.4 KB uncompressed and 32.5/101.2 KB for React) that speed up the initial load.

You check this benchmark for runtime performance, which compares startup times, allocation of memory, and the duration of operations for popular JS frameworks and libraries.

The efficiency of both libraries is outstanding. Vue is significantly better in memory allocation and startup times while React is a tad faster at runtime.

You shouldn't judge a library's performance based on benchmarks alone. The speed may differ considerably based on application size and your optimization efforts.

Both libraries have:

server-side rendering (SSR)
tree shaking
bundling

They even use a virtual DOM. Since it is a resource-intensive process to change the real DOM, the modifications are first applied to the virtual DOM.

The modification of a component state in React will re-render all of its child components.

You can use PureComponent, shouldComponentUpdate or immutable data structures to boost efficiency and performance. However, this technique may trigger inconsistencies in the DOM state in those rare instances where the render performance for child components is not managed by the component's props.

On the other hand, Vue monitors dependencies that prevent unwanted child component renderings.

As a beginner, React.js project development may seem challenging, but one can simplify the whole process by breaking down an application into smaller components. Try to focus on building one feature at a time, and keep connecting the dots as you move forward into the intricacies of development.

React.js Projects for Beginners

https://codersera.com/blog/reactjs-projects-for-beginners/
https://www.upgrad.com/blog/react-project-ideas-topics-beginners/

How to use the built-in Date Object to Get the Current Date in JavaScript?

evenmik — Mon, 28 Sep 2020 04:53:02 +0000

When you are building a website, you will come across various types of date components-- it could be to create a date of a resource or the timestamp of an activity.

Handling these date and timestamp formatting can be a daunting process. Read on to understand how you can get the current date in different formats in JavaScript.

JavaScript's Date Object

The built-in Data object stores the date & time while providing methods for handling them.

You have to use the new keyword to build a new instance of the Date object:

const date = new Date();

There are methods for getting the current year and current day of the month, have a look at it:

For year:

const currentYear = date.getFullYear();
console.log(currentYear);

For day of the month:

const today = date.getDate();
const currentMonth = date.getMonth() + 1;

Date Now

now() is a static method of the Date object. This is how it is used:

const timeElapsed = Date.now();
const today = new Date(timeElapsed);

Formatting The Date

To format the date into several different formats like ISO, GMT, you can make use of the methods if the Date object.

The toDateString() method returns the date in a human readable format:

today.toDateString();

The toISOString() method returns the date which follows the ISO 8601 Extended Format:

today.toISOString();

The toUTCString() method returns the date in UTC timezone format:

today.toUTCString();

and so on.

Custom Date Formatter Function

Your date could be in yy/dd/mm or yyyy-dd-mm format. To get rid of the uncertainty, it might be beneficial for you to build a reusable function so that it can be used across multiple projects.

const today = new Date();

function formatDate(date, format) {
//
}

formatDate(today, 'mm/dd/yy');

You need to replace the strings "mm", "dd", "yy" with the desired month, day and year values from the format string passed in the argument.

To do that you can use the replace() method like shown below:

format.replace('mm', date.getMonth() + 1);

React Native Bridge for Android and Ios

evenmik — Fri, 13 Mar 2020 12:58:25 +0000

React Native is developed in such a way that we can create a bridge between the Native Language and the JavaScript code. A bridge is nothing but a way to setup communication between native platform and React Native.

But why do we need it?

Let’s assume you want to reuse some existing Java code or library without having to reimplement it in JavaScript. Yes, you guessed it right, you can use it in your React Native application with the help of Native Bridge. At some point of time, to make a production-level application you will most probably need to use Native Bridge.

“As long as we are building our application purely within the framework, we can drive our app with properties and callbacks. But, when we mix React Native and native components, we need some specific, cross-language mechanisms that would allow us to pass information between them.”

You have to learn two modules

Native Modules
Native UI Components

Native Modules
A Native Module is just a set of javascript functions that are implemented natively for individual platform. Native Modules are used when React Native doesn’t have that required module yet, or when the native performance is significantly better.

To understand this concept better we will implement a toast mechanism in which the toast would be coming from the native android and we will call it from a button made in React Native. In case you are wondering “what a toast is?”, think of it as an alert message for your app.

Native UI Components

There are tons of native UI widgets out there ready to be used in the latest apps. Fortunately, we can wrap up these existing components for seamless integration with our React Native application. Without further ado, let’s head over to the practical part.

You can see there are two types of bridge.

React Hooks with Typescript : UseCallback, UseMemo, UseContext And UseRef

evenmik — Tue, 21 Jan 2020 13:22:40 +0000

Lets, check react advanced hooks, i.e. UseCallback, UseMemo, UseRef, and UseContext. All these come under React 16.8 version and help the user create an optimized react application.
Let’s create a react application environment for our project by using either of the following commands:

1.yarn create react-app advanced-hooks-tutorial --template typescript # or
2.npx create-react-app advanced-hooks-tutorial --template typescript

The above command will create a Project with the name “advanced-hooks-tutorial”. Once it’s done go to the directory and start the project either by “npm start” or “yarn start”.

We will be using yarn throughout this tutorial to maintain consistency.
Let’s now integrate the project with antd which is a design library by the name of antd design, that helps us to create some standard UI components. Additionally, you can use other design libraries as well if you want.

React Hooks with Typescript : UseCallback, UseMemo, UseContext And UseRef

Angular Vs React Comparison for 2020

evenmik — Mon, 20 Jan 2020 12:28:12 +0000

Do you want to learn about and discover the differences between React vs. Angular? Then keep on reading! I am going to explain to you the similarities, differences, pros, and cons of both React and Angular in this article. You don’t need to be an expert programmer to understand this post but it is encouraged that you are familiar with JavaScript.

*Disclaimer: I have worked extensively with both React and Angular. I used Angular at my job at IBM and React & React Native at my current job. I personally prefer React but will do my best not to taint the article with bias.

History of React vs. Angular

Angular is a JavaScript framework written in TypeScript. It was developed and is maintained by Google, and is described as a “Superheroic JavaScript MVWFramework” on Angular’s webpage. Angular (version 2 and above), originally released in September 2016, is a complete rewrite of AngularJS (released in October 2010). The newest major release is version 6 at the time of writing. Google AdWords, one of the most important projects at Google, uses Angular – so Angular is likely to be around for a while.

React is a JavaScript library developed and maintained by Facebook. It was released in March 2013 and is described as “a JavaScript library for building user interfaces”. React is used far more at Facebook than Angular is at Google if it’s any indication as to how big Facebook is betting on this technology. By this metric, you can also conclude that React will be around for a very long time.

Both Frameworks are available under the MIT license.

Architecture of React vs. Angular

Framework vs. Library

Angular and React have many similarities and many differences. One of them is that Angular is a full-fledged MVC framework and React is merely a JavaScript Library (just the view). Let me elaborate. Angular is considered a framework because it offers strong opinions as to how your application should be structured. It also has much more functionality “out-of-the-box”. You don’t need to decide which routing libraries to use or other such considerations – you can just start coding. However, a drawback is that you have less flexibility – you must use what Angular provides.

Angular provides the following “out of the box”:

Templates, based on an extended version of HTML
XSS protection
Dependency injection
Ajax requests by @angular/HTTP
Routing, provided by @angular/router
Component CSS encapsulation
Utilities for unit-testing components.
@angular/forms for building forms

React, on the other hand, gives you much more freedom. It only provides the “view” in MVC – you need to solve the M and C on your own. Due to this, you can choose any of your own libraries as you see fit. You will end up using many independent, fast-moving libraries. Because of this, you will need to take care of the corresponding updates and migrations by yourself. In addition, each React project is different and requires a decision requiring its folder hierarchy and architecture. Things can go wrong much more easily due to this.

React provides the following “out of the box”:

Instead of classic templates, it has JSX, an XML-like language built on top of JavaScript
XSS protection
No dependency injection
Fetch for Ajax requests
Utilities for unit-testing components

Top Game engines for Game Development

evenmik — Mon, 20 Jan 2020 07:42:00 +0000

Who doesn’t love playing games? I mean, it’s the best way to pass time and keep ourselves entertained at the same time, right? We all play some type of games at some point of time, whether it is an Open-world like GTA San Andreas or a first-person shooter like Counter-Strike or Call of Duty.

But has anyone given a thought about how a game is made and what it is all about? Read more to know regarding the game engine and its role in game development and find answers to these questions as well:

How much development goes behind making the game?

All of you must have heard the term “Game Engine” but what does it mean?
How come the games are different when they are developed on the same engine by the same company?
Before going on to discuss the top game engines, let us have a brief description of what a game engine is all about:

What is a Game engine?

A game engine is a software which is used to design games quickly. In other words, it is a framework that brings all the essential tools required for building the games together. The main reason for using it is to reduce the cost, time, and complexity required in the development of the game.

Most of the time, It is observed that whenever there is a lag, crash or frame drop in a game, people immediately blame it on the engine. However, it’s not true. The lagging and the frame drops are caused because of the poor programming in the code.

The core functionality of the game engine includes a rendering engine(“renderer“)for 2D or 3D graphics, networking, animation, artificial intelligence, and memory management.

Most of the big gaming companies have developed their own gaming engine whereas some open-source engines are also available.

Advantages of Game Engine

Most of the work like graphic designing, memory management, and audio is easily done by the game engine.
It increases efficiency by reducing the amount of knowledge required by the developer.
When working on a big project, it reduces the time it would have taken by writing the code.

Disadvantages of Game Engine

If you are making a small game, then it is best to write the code yourself rather than leaving it for the game engine.

Debugging is not easy if it isn’t open-source.

When we talk about gaming engines for beginners, there are a lot of options available out there like:-

Buildbox.
RPG Maker.
GameMaker Studio 2.
CopperCube 5.

Conclusion

We tried compiling the best list for the top game engines in game development and most of them provide more or less the same gaming experience. What you like will completely depend on your experience you had while playing the game designed on that engine.

Angular vs. React vs. Vue: A 2020 comparison

evenmik — Fri, 17 Jan 2020 09:18:16 +0000

A brief history of Vue vs React vs Angular
Before we get into the technical details, let’s first talk about the history behind these frameworks – just to better appreciate their philosophy and their evolution over time.

How it all started

Angular, developed by Google, was first released in 2010, making it the oldest of the lot. It is a TypeScript based JavaScript framework. A substantial shift occurred in 2016 on the release of Angular 2 (and the dropping of the “JS” from the original name – AngularJS). Angular 2+ is known as just Angular. Although AngularJS (version 1) still gets updates, we will focus the discussion on Angular. The latest stable version is Angular 7, which was released in October 2018.

Vue, also known as Vue.js, is the youngest member of the group. It was developed by ex-Google employee Evan You in 2014. Over the last two years, Vue has seen a substantial shift in popularity, even though it doesn’t have the backing of a large company. The current stable version is 2.17, released in August 2018. Vue’s contributors are supported by Patreon. Vue 3, currently in the prototyping phase is planning to move to TypeScript.

React, developed by Facebook, was initially released in 2013. Facebook uses React extensively in their products (Facebook, Instagram, and WhatsApp). The current stable version in 16.X, released in November 2018.

Here’s a short summary of Angular vs React vs Vue, in terms of their status and history:

The history of Angular vs React vs Vue.

Job market for Angular vs React vs Vue

Does Expo Support React Native Web?

evenmik — Mon, 13 Jan 2020 07:22:06 +0000

Short answer: yes, expo supports react NATIVE web since SDK version 33.

Expo SDK v33 is the first SDK which supports the web. It also comes with TypeScript which is based on React Native, which includes hooks. It is the combination of many new features: APIs, workflows, developers tools, and many more upgraded version in SDK v33. Now the developers also like to use this versions as it is new and up-to-date, and also it’s the trend to follow the new and latest versions of technology.

As well as, Four new APIs are added in the SDK v33-

Crypto API and Random API, which provide to generate, as well as work with cryptographically secure strings, also they used as primitives to build fully featured crypto libraries in JavaScript. And sharing API provides the technique to share media and different files applications on the device. As well as, VideoThumbnails API, allow to generate an image thumbnail from the video file.

Phases of technology- React to React-Native-Web!

Phase 1. Firstly in the market, React appeared, this influence and attract the developers towards it’s and change the ways of building apps and creating websites. React was like a relief to all the developers as it becomes the easiest way to developing.

Phase 2. Secondly, here introduce React-Native, take all the good and updated version of React. And this version helps the developers to develop the mobile apps, it the attributes and commands make things easier to the developers. As well as it hold some key elements like JavaScript, markup with JSX and Flexbox.

Phase 3. Last but not least, finally, after the React Native, here comes React-Native-web which is the mixture of React and React Native. As it is newly introduced in the market it is really advanced and upgraded version. In which websites and application both can run. By using different functions and command you can build your websites more effective and attractive to the clients and users. Even, it is now possible to translate React Native primitives to the DOM language using HTML tags. This is only done to React Native Web.

Also you can read article related the same on https://github.com/expo/expo-sdk

You can read the official blog here as well. https://blog.expo.io/expo-sdk-v32-0-0-is-now-available-6b78f92a6c52

DEV Community: evenmik

How to handle onclick events in react.js? (With Examples)

What is the React onClick Event Handler?

What makes python a better choice for machine learning?

Why is it a top choice?

Check This Article

Is Python slow in comparison to use cases of other languages?

Why is it so popular?

Check the Link For Some of the Best Code Editor For python

What Makes Ruby on Rails A Good Choice In 2020?

React vs Vue: Which one is better in terms of Performance & Memory Consumption?

Performance & Memory Consumption

React.js Projects for Beginners

How to use the built-in Date Object to Get the Current Date in JavaScript?

JavaScript's Date Object

Date Now

Formatting The Date

Custom Date Formatter Function

React Native Bridge for Android and Ios

React Hooks with Typescript : UseCallback, UseMemo, UseContext And UseRef

Angular Vs React Comparison for 2020

History of React vs. Angular

Architecture of React vs. Angular

Top Game engines for Game Development

Advantages of Game Engine

Disadvantages of Game Engine

Angular vs. React vs. Vue: A 2020 comparison

﻿Does Expo Support React Native Web?

Does Expo Support React Native Web?