React JS: A Quick Overview For Starters

Introduction to React ⚛️ React is a JavaScript library for building UI components. The ecosystem of React is really immense which eventually makes it one of the best front-end libraries 🧵👇🏻
Why React? 1. Reusable components 2. Fast due to virtual DOM 3. Huge ecosystem
A typical React app contain many components. They are reusable and can interact with each other. What is a component? – Component as a simple function that you can call with some input and they render some output
Components are of two types: 1️⃣ Class based components 2️⃣ functional based components Class-based components are defined using ES6 classes, whereas function components are basic JavaScript functions
Before diving deeper into it, let’s talk a little bit about JSX – JSX stands for JavaScript XML. It’s basically nothing but the extension of JavaScript which allow us to write HTML code in JavaScript file.
const element = <h1>Hello, world!</h1>; Consider this variable declaration. It’s neither JS nor HTML. This is the mixture of JavaScript + XML = JSX
A very important concept in React Virtual DOM You might have heard the term “DOM”, virtual DOM is kind of similar. It uses a strategy that updates the DOM without having to redraw all the webpage elements
Every time the DOM changes, browser need to recalculate entire layout and then repaint the web page which makes a web app slow. To overcome this we have virtual DOM Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM
Next thing you need to install is `create-react-app` is a tool helps you start building with React app. It set up all the tools that you need in order to get started
Now you have create-react-app installed in your machine, it’s time to create your first React app Command – “create-react-app app-name” Depending upon your internet speed, this will take some minutes. So time to prepare a coffee for yourself ☕
And that’s it. You just created your first react app. I tried my best to give a quick overview of how things work in React If you like this thread, drop a like and retweet, means a lot to me ❤️ Peace out 😉

» NextBigWhat’s #Threadmill brings you curated wisdom from Twitter threads on product, life and growth.

Read more posts on Java and Web Development here. For podcasts, click here!

Crowdsource your next logo with this design platform

DesignBro is a design platform that allows you to crowdsource your logo design from its list of curated designers. DesignBro says it only includes ‘leading designers’ and offers from 3-10 possible logo options for each assignment. It also offers brand identity design as well as packaging design.

DesignBro

DesignBro is the world’s highest quality design crowdsourcing marketplace, focused around a selected community of leading designers. All types of business around the world use DesignBro to get top quality graphic designs for logos, packaging and branding.


Amsterdam

About the founding team :
DesignBro is founded by two brothers: Christiaan and PJ who are brothers-in-law!


NextBigWhat profiles interesting products and startups (India + world). If you are building something interesting, submit the details here.

Designers, here’s a better way to manage your image library

Designers, and even those who casually venture into design every now and then, are dealing with growing image libraries on their computers. And no OS really offers an intuitive way of navigating through them in the manner that designers need i.e by color, theme etc. Eagle, a Taiwan based startup, seeks to solve this issue by providing a desktop tool that offers quite a lot. This includes smart search but also the ability to save images on to the desktop via browser extensions and easy screenshot captures. 

Eagle

Eagle helps you manage pictures, screenshots, and designs that make your lightbulb shine.

Eagle is an application made for designers to manage their inspirations and the many images they usually keep, its just like a image version of Evernote!

eagle


TaiPei, Taiwan

About the founding team:

Augus Chen – Eagle CEO

Currently an independent developer focusing on developing designer-related productivity tools.


NextBigWhat profiles interesting products and startups (India + world). If you are building something interesting, submit the details here.

Would you hold a phone or hands?

Ergonomics, product-design flaws, safety-worries, or the good old phantom-limb effect. Researchers are scratching their heads to work out some numbers that came up in a new study.

Active Phones; Inactive Brain?
Active Phones; Inactive Brain?

In ‘The Phone Walkers: A study of human dependence on inactive mobile devices’ Laura Schaposnik and James Unwin from University of Illinois dug in a clear pattern of mobile phones being carried in people’s hands (3000 people on Parisian streets) without the person using it (that is, not looking at it).
So we hold our phones when we aren’t actually using them. Big deal! It is, when we see how as soon as individuals join members of the opposite sex there is a clear tendency to stop holding mobile phones whilst walking (just 18 per cent). Else, 38 per cent of solitary women, and 31 per cent of solitary men touch their phones (via).
Hmm. It’s just a phone. It’s not the ring, Frodo.

10 Tips to be an Epic Designer 

Product Designing for web, mobile and other devices, that’s what I was doing when I embarked on my journey as a UX and UI Designer. Earlier, I used to think that creating intricate, beautiful designs and adhering to the trends is paramount for any Designer; but soon I realised that my thoughts and patterns changed over time as I started working for products and product-based companies. (more…)

How NOT to share feedback with your design team

aaeaaqaaaaaaaadmaaaajdc0mdy0ndrmltjhnwqtndvjyy1hnjvllwy3ntkwnwu1ndvmyq-2

Feedback is a valuable gift for us Designers because obviously, two minds work’s better than one. If the feedback is given properly, it can lead to extraordinary success but when you kick your Designer in the rear and downright demean his Design while doing so, it not only hurts the morale of your Designer but also, you prove yourself unworthy of the title ‘manager’. While this may not have happened to all of us, but all you Chefs and Managers need to keep few pointers in your mind while sharing your thoughts to keep the relationship with your Designer fairly healthy.

1. Step aside, I can feel you breathing down my back!

Ever experienced in the examination hall, when you are trying to rack your brains to figure out the answer and as soon as the teachers look down on your answer sheet and you just black out? Well, hate to break it to you but it still happens! If you keep hovering around the Designers and point out every little thing that you find wrong when the Designer is experimenting with his Designs, he is bound to get irritated. It’s incredibly typical of managers to say “do the edit now and show it to me” but they have to realise that a lot of experimentation goes on before finalising the design. So let the Designers creativity flow in the direction he deems correct and don’t restrict him.

2. Design Elements? Sorry, no change!

We understand, how will anyone improve without any constructive criticism? Without bringing in light our blind spots, we can’t get better. But there needs to be a reason behind the criticism. Changing elements like text boxes or fonts is a cumbersome process, the whole pattern changes when you ask us to do that without having any valid reason for doing so. So, don’t be a jerk about it and be upright with your feedback.

3. Is it ready yet?

Deadlines are something that we all have to adhere to, we understand that you managers are responsible for the product delivery and that makes deadlines even more crucial. But the downside of this is that you don’t know the amount of contemplation that goes into a Design, you have to curate a vision and then you have to further contemplate the designs. Hence, we should fix up the deadlines once the concept or background is ready. This will help us Designers with keeping our Designs and timelines in sync.

4. It’s a ten-minute job!

Let’s not embarrass yourself and my work by saying this. Managers mostly aren’t familiar with the Designing nuances, they don’t understand that if one element is touched, the others have to be reworked too. So what might look like a trivial change to you, might possibly be a huge task for us and doing that isn’t a ‘ten-minute job’ as you might very conveniently think? Trust your Designer with doing his job correctly, don’t demean his title and let him work.

5. Screens are missing? Use your common sense!

A designers job is to create engaging interactions, visuals or concepts. So it is essential that he has enough data and mock scenarios to make a complete design flow; if not, the pattern would be lacking few elements that would make his Design incomplete. A lot of friction between the Designers and Managers occurs because the manager asks to accommodate few more screens at the end moment which means the whole design will get screwed.

6. Hey, copy this!

Well the answer to that statement is NO. A big, fat, absolute and non deterrent NO! It is an insult to us designers to make us copy something that isn’t ours to call in the first place. An artist cannot replicate his own work, let alone the work of another designer whose thinking patterns we aren’t familiar with. So, don’t make us deter from our creative patterns and make us replicate some other’s work. We Designers are meant to curate designs that are unique and beautiful, not copy.

7. Another option, please?

I have a question to raise here, why the hell do we need so many options? Let’s work on the design we have, let’s make it better. As I have mentioned earlier, we won’t say no for constructive criticism but if you ask us to bring an option after option then you are negating our work. Our energy and thinking goes to waste when you select one out of the pool of ‘options’ you asked us to create. You cannot keep thinking that something extraordinary will come out of the incessant working on the options. Let’s not do that, on the other hand, let’s take a step back and discuss what we can do to make the current design better.

8. Friendship, the answer to all ailments!

Developing a personal relationship with your Designer is always a plus. Let’s accept it, you are going to spend a lot of time with your Designer, so might as well get something out of it. Be friends, it will definitely be more fun and exciting that way; as you work better when you are in a situation which you are familiar with and with people you like!

Meet ‘WAO’ : The new method of testing mobile designs 

blogger-336371_1920

I know that testing mobile designs can be cumbersome, it is a lengthy process that we all dread. Quite a lot user experience specialists test these designs through a video recorder, and check how the user performs one specific action or task; these measures have proved to be just fine over these years, but it does overlook one context: what if the conditions that your user is in are not favorable? And because of that reason WAO (W – Weather, A – Ambiance, O – One Hand) comes into the equation

It is quite understood that no two users are similar, their needs are different and their conditions are not same. WAO is a traditional and non-organic approach, which means the results of this method of testing are different too. And while we’re at it, this method of testing is quite fun too.

1. Weather Conditions

To figure out when and where our designs are being used is next to impossible without getting the analytics in our hands. So designers, buckle up, because you will have to try different aspects of your design in morning, evening and night. This will give you good idea about colors, fonts and shapes. By performing this extensive test, you will know what works and what doesn’t, which aspects stay neutral throughout the day and which looks unappealing as the sun sets.

2. Ambience testing

When I was working with a car classified company, we noticed a pattern of high traffic on our app during the night time i.e, 9 PM to 11:30 PM, and that is the reason we decided to design our app with soothing colors, so that the colors don’t pop out and cause any difficulty reading, a night mode feature was introduced for better reading. When you can ascertain the kind of ambiance your users are in, you can also determine the features that your users might prefer, and this is the reason this form of mobile design testing is crucial.

3. One hand test – Tappable areas.

It is always advisable to try and keep things in range. And to do that, you should also test your designs with a single and both hands, respectively. It’s a win if you and your user can work the app with one hand, but you should test all possible screens in mobile with this test. Besides, you should also check your designs with the voice feature (Siri or Google Assistant).

By checking the ambidextrousness of the app and the voice commands, you will also be making this app convenient for differently abled people, and it is always a good thing.

Not everything that can be counted counts

We are sharing our learnings & insights from building a consumer facing travel app.

Don’t just end up acting on symptoms when the root cause of a problem remains unaddressed…

Success is dependent upon asking the right questions…

A design isn’t finished until somebody is using it…

The Science Behind Colors In Marketing

In case your app is strictly targeting men, the rules of the game are slightly different. Men love blue, green, and black, but can do without brown, orange, and purple.

If you are building an app that mainly targets women, note that women love blue, purple, and green, and dislike orange, brown, and gray.

– Very interesting piece on brand colors and the perceptions.