Pull to refresh
38.32

ReactJS *

JavaScript library for interfaces creation

Show first
Period
Level of difficulty

Translating Dust templates to JSX

Reading time 5 min
Views 1.8K


Hello Habr! I'm Miloš from Badoo, and this is my first Habr post, originally published in our tech blog. Hope you like it, and please share and comment if you have any questions

So… React, amirite???

It appeared in the middle of the decade (plagued by the endless JavaScript framework wars), embraced the DOM, shocked everyone by mixing HTML with JavaScript and transformed the web development landscape beyond recognition.

All those accomplishments, without even being a framework.

Love it or hate it, React does one job really well, and that is HTML templating. Together with a great community and a healthy ecosystem, it’s not hard to see why it became one of the most popular and influential JavaScript libraries, if not the most popular one of all.
Total votes 34: ↑33 and ↓1 +32
Comments 2

Functional components with React Hooks. Why it's better?

Reading time 5 min
Views 24K

When React.js 16.8 was released we got the opportunity to use React Hooks. Hooks make us able to write fully-functional components using functions. We can use all React.js features and do in in more convenient way.


A lot of people don't agree with Hooks conception. In this article I'd like to tell about some important advantages React Hooks give you and why we need to write with Hooks.


I will not talk about how to use hooks. It is not very important for the examples. If you want to read something on this topic, you can use official documentation. Also, if this topic will be interesting for you, I will write more about Hooks.

Read more →
Total votes 30: ↑28 and ↓2 +26
Comments 1

(in)Finite War

Reading time 6 min
Views 1.6K

infitite war


We have a problem. The problem with testing. The problem with testing React components, and it is quite fundamental. It’s about the difference between unit testing and integration testing. It’s about the difference between what we call unit testing and what we call integration testing, the size and the scope.


It's not about testing itself, but about Component Architecture. About the difference between testing components, standalone libraries, and final applications.


Everyone knows how to test simple components(they are simple), probably know how to test Applications(E2E). How to test Finite and Infinite things…

But... no, nobody knows actually.
Total votes 25: ↑24 and ↓1 +23
Comments 0

Vue.js Is Good, But Is It Better Than Angular or React?

Reading time 3 min
Views 6.1K
Vue.js is a JavaScript library for building web interfaces. Combining with some other tools It also becomes a “framework”. Now, from our last blog, you already know that Vue.js is one of the top JavaScript frameworks and it is replacing Angular and React in many cases. This brings in the topic of this blog ‘Vue.js is good, but is it better than Angular or React?


In case you’ve never heard or used Vue.js before, you are probably thinking: Come on! yet another JavaScript framework! We get it. However, Vue.js is not new in the custom software development domain. It was first released in 2013 and now it has 130549 stars on Github and downloaded a number of times this year.
Total votes 22: ↑19 and ↓3 +16
Comments 6

ANPR using RoR & React Native

Reading time 10 min
Views 3.8K
Danny Krastev, Mirabbos Umarov, Ekaterina Menshenina, ITMO University, Info communication Systems, Computer Science. 2019

image

Abstract


Due to the never-ending increase in volume of vehicles surrounding our daily lives, Automatic Number Plate Recognition (ANPR), has become an evolving solution for managing and monitoring vehicles worldwide to enforce rules and prevent criminal activities, such as parking violation, red light violation, speeding, and vehicle theft. Although there is already a variety of public and private methods and libraries that have been developed and are used to achieve the automatic recognition of car license plate numbers around the world, there has not been much focus on making advancements toward a cross platform ANPR solution that supports all vehicle license plates worldwide. This paper introduces the Plate Vision project, a web and mobile application built on Ruby on Rails and React Native, which aims to serve as an alternative ANPR platform that supports detection of all license plates worldwide by utilizing various open source optical character recognition (OCR) libraries and making efficiency optimizations.

Key words and phrases: ruby, rails, react native, license plate recognition, plate region extraction, optical character recognition (OCR), ANPR.
Read more →
Total votes 11: ↑10 and ↓1 +9
Comments 0

Enhancing Magento Front-end Performance With ReactJS

Reading time 9 min
Views 4.9K

Magento


Magento is an open-source PHP based platform for building e-commerce solutions. Built by the Magento company (now part of Adobe), it is used by over 350,000 developers all over the world. It enables the creation of highly customizable digital storefronts for Business-to-Customer and Business-to-Business purposes. Magento 2, the transformed version of the Magento E-commerce Platform, comes with brand new architecture, coding structure, and database design.

a) General overview

Magento’s platform is built upon PHP and MySQL. During its lifetime of 10 years (the version 1.0 released in March 2008 and the version 2.0 in November 2015, it has undergone changes in terms of structure and development patterns and is now in its second major version, Magento 2.

Magento’s structure is comprised of two main parts, one being the back-end, with the database and MySQL, and Model, Data and Service interfaces, as can be seen in figure 3. These are directly connected and used in Magento’s Blocks, Layouts, and Templates, which would be defined as the front-end of the application.
Read more →
Total votes 8: ↑8 and ↓0 +8
Comments 0

React benefits: A blessing for Businesses?

Reading time 3 min
Views 3.7K
Launched in 2013, React has been successfully used to develop 1,004,124 websites in the past 6 years. The Javascript library React JS is known for giving simple programming experience and improved performance.

It was released by Facebook to resolve the issues of coding and maintenance with their ads. It was developed with an intention to increase and manage Facebook ads traffic. React has successfully delivered the expected outcomes throughout its journey.
Read more →
Total votes 8: ↑7 and ↓1 +6
Comments 0

You don't know Redis

Reading time 8 min
Views 4.2K

Originally posted on DEV.to

In my previous post, I touched on the point that Redis is more than just an in-memory cache.

Most people do not even consider Redis as a primary database. There are a lot of use cases where Redis is a perfect choice for non-cache related tasks.

In this article, I will demonstrate how I built a fully functional Q&A board for asking and upvoting the most interesting questions. Redis will be used as a primary database.

I will use Gatsby (React), Netlify serverless functions and Upstash Serverless Redis.

Upstash has been a good choice so far and I decided to try it out in a more serious project. I love everything serverless and how it makes things simpler for me.

Serverless will be a great choice for most tasks however you need to know the pros and cons of the tech you are using. I encourage you to learn more about serverless to get the most out of it.

Read more
Total votes 5: ↑5 and ↓0 +5
Comments 3

Modern Environment for React Native Applications

Reading time 4 min
Views 2K
In this article, we will consider the process of setting up a React Native environment using expo-cli, Typescript, and Jest.
Typescript will help us avoid development mistakes and write a more efficient mobile application.

Modern tools allow integrating Typescript into the development environment. We can also use VS Code that supports Typescript.

Integration with React Native will give us the opportunity to use the auto-completion service, code navigation, and refactoring.

Expo is a toolkit that simplifies the creation of native React applications. This tutorial will give you an idea of how you can quickly create native React applications using Expo.


Read more →
Total votes 7: ↑6 and ↓1 +5
Comments 0

It's high time to become part of an open source project

Reading time 1 min
Views 1K
JavaScript developers, I am working on an exciting opensource project pursuing two goals:

  1. Learning best practices in JavaScript/NodeJS
  2. Helping developers and myself to develop and launch MVPs to validate ideas quickly.

As developers, we have tons of ideas and would be awesome to have a simple tool to scaffold a secure project quickly, add a couple of forms, some project specific logic, and here you go — deploy and test your idea.
Read more →
Total votes 7: ↑6 and ↓1 +5
Comments 0

React Code Splitting in 2019

Reading time 6 min
Views 4.1K

It's 2019! Everybody thinks they know code splitting. So - let's double check!



What does code splitting stand for?


In short – code splitting is just about not loading a whole thing. Then you are reading this page you don't have to load a whole site. When you are selecting a single row from a database – you don't have to take all.
Obvious? Code splitting is also quite obvious, just not about your data, but your code.

Read more →
Total votes 7: ↑6 and ↓1 +5
Comments 6

React Global State Management: A Brief History and a Quick Guide

Level of difficulty Easy
Reading time 9 min
Views 928

If you’re a React developer, you know how important state management is. State is the data that powers your UI, making it interactive and dynamic. But managing state in React can be tricky, especially when you have to share it across multiple components or deal with complex and asynchronous logic.

That’s why over the years, React developers have come up with various solutions for state management, each with its own advantages and disadvantages. In this article, we’ll take a look at some of the most popular ones and how they evolved. We’ll also review some of the current state-management libraries and how to choose the best one for your app.

Read more
Total votes 3: ↑3 and ↓0 +3
Comments 0

React Custom Hook: useDebounce

Level of difficulty Medium
Reading time 2 min
Views 2K

This custom hook is particularly beneficial in scenarios where you need to handle user input, such as search bars or form fields, where you want to delay the execution of an action until the user has finished typing or interacting. It's also useful for optimizing network requests, ensuring that requests are sent only after the user has stopped typing or selecting options.

Read more
Total votes 5: ↑4 and ↓1 +3
Comments 0

Electron + web camera (cpp-ffmpeg)

Reading time 8 min
Views 3.5K

An example of using Electron + React JS and a native ffmpeg addon to access a webcamera

This guide may be helpful to someone who is trying to find a way
to work with Electron if they need to use a c++ library or code

I was looking for a more realistic example than a simple 'hello world' and i didn't succeed

Here are the links in advance:

- electron - https://github.com/khomin/electron_camera_ffmpeg

- addon - https://github.com/khomin/electron_ffmpeg_addon_camera

So let me share my experience...

Read more
Total votes 3: ↑3 and ↓0 +3
Comments 0

You don't know Redis (Part 2)

Reading time 4 min
Views 2.4K

In the first part of You don't know Redis, I built an app using Redis as a primary database. For most people, it might sound unusual simply because the key-value data structure seems suboptimal for handling complex data models.

In practice, the choice of a database often depends on the application’s data-access patterns as well as the current and possible future requirements.

Redis was a perfect database for a Q&A board. I described how I took advantage of sorted sets and hashes data types to build features efficiently with less code.

Now I need to extend the Q&A board with registration/login functionality.

I will use Redis again. There are two reasons for that.

Firstly, I want to avoid the extra complexity that comes with adding yet another database.

Secondly, based on the requirements that I have, Redis is suitable for the task.

Important to note, that user registration and login is not always about only email and password handling. Users may have a lot of relations with other data which can grow complex over time.

Despite Redis being suitable for my task, it may not be a good choice for other projects.

Always define what data structure you need now and may need in the future to pick the right database.

Read more
Total votes 3: ↑3 and ↓0 +3
Comments 0

10+ Biggest Remote Tech Jobs Aggregators Comparison

Reading time 7 min
Views 3.8K

There is a myriad of articles about where to find remote jobs, particularly in tech. Some of them are outdated and most of them don't provide detailed reviews. So that's why I decided to do my own research. I did a basic search by "React" skill (where possible) and expected to see mostly "Frontend Developer" vacancies.

Read more
Total votes 3: ↑3 and ↓0 +3
Comments 0

Sidecar for a Code splitting

Reading time 12 min
Views 926


Code splitting. Code splitting is everywhere. However, why? Just because there is too much of javascript nowadays, and not all are in use at the same point in time.


JS is a very heavy thing. Not for your iPhone Xs or brand new i9 laptop, but for millions(probably billions) of slower devices owners. Or, at least, for your watches.


So — JS is bad, but what would happen if we just disable it — the problem would be gone… for some sites, and be gone "with sites" for the React-based ones. But anyway — there are sites, which could work without JS… and there is something we should learn from them...

Get in the sidecar!
Total votes 3: ↑3 and ↓0 +3
Comments 0

React + Three.js. Creating your own 3D shooter. Part 1

Level of difficulty Medium
Reading time 30 min
Views 5.4K

Hello, dear users of the IT world!

In the era of active development of web technologies and interactive applications, 3D-graphics is becoming more and more relevant and in demand. But how to create a 3D application without losing the advantages of web development? In this article, we will look at how to combine the power of Three.js with the flexibility of React to create your own game right in the browser.

This article will introduce you to the React Three Fiber library and teach you how to create interactive 3D games.

Read more
Total votes 4: ↑3 and ↓1 +2
Comments 0

React Custom Hook: useScript

Level of difficulty Medium
Reading time 2 min
Views 2.5K

useScript can be used in various scenarios. For instance, you can load external libraries like jQuery, enabling you to harness its powerful functionalities without adding bulk to your bundle. Additionally, you can load analytics scripts, social media widgets, or any other script necessary for your application's dynamic behavior.

Read more
Total votes 4: ↑3 and ↓1 +2
Comments 1
1

Authors' contribution