Categories
Javascript

Creating Pure Functional Component using React Memo

How to create Pure Component in React? A functional component that we are modifying as Pure component:- import React from ‘react’; import Tabs from ‘../Tabs’; import ‘./RightPanel.scss’; const RightPanel = () => ( <div className=”rightPanelCta”> <div className=”tab”> <Tabs> <div header=”Index.jsx”> You are on Index.jsx file </div> <div header=”Panel.jsx”> You are on Panel.jsx file </div> </Tabs> […]

Categories
Javascript

Working example of React Ref api

What is React Ref? Its another way of communicating with react components apart from “state” and “props” (Ref = creating reference of element). We need it to access the element node, to perform special type of events like “focusing a input element”, text selection. How React Ref works? After React 16.3, it came in the […]

Categories
Javascript React

How to debug jest test cases(React)?

Adding test cases to your code always helps in the long run, today we’re going to talk about how to debug test cases. Do something today that your future self will thank you for Using our all-time favorite Console.log it(‘should call touch & asyncValidate methods’, () => { const component = shallow( <TrialRegistrationForm handleSubmit={mockHandleSubmit} pristine […]

Categories
Javascript

How to add CSS modules into your react Application?

“Believe in yourself && Keep Learning” Step1:- In our example we have take “create-react-app” template as reference. Install this and than perform “yarn eject” What is yarn eject:- it will give you control of the create-react-app and you can install or play with config settings or package.json file. Step2:- Search for “css-loader” inside the file […]

Categories
Javascript

How to use FormattedMessage for input placeholder in React?

Problem:- How we can translate the placeholder text for input-box using formatmessage? Solution:- If we use react-intl its not meant to be used with  placeholders, alternate text, etc. They render HTML, not plain text, which is not useful in our scenario. 1. Incase we have one or two values to translate, we can use FormattedMessage as wrapper […]

Categories
Javascript

Working with React-Router?

“An investment in knowledge pays the best interest.” Benjamin FranklinIn our previous post we started with creating our first react app and than we learned about some basic terminologies in react. Today we are going to focus on creating the router behaviour using react library.Incase you want to learn about filtering in react check the github code. […]

Categories
Javascript

Important terms when starting with React.

We already created our first react app using create-react-app cli. Now we’ll learn some of the core terminologies involved in react.1.Component :- its the building block of react app, just like functions, we create components to perform some functionality. It takes the given parameters (called as props) and render UI in the browser by consuming the given parameters.Example:- […]

Categories
Javascript

Up and Running with React in 10 minutes

“All great achievements require time…. Maya Angelou”We already learned how to create our first Angular.io App in 10 minutes, this time we’ll repeat the same with React library.So lets get started.Key terminologies in react appBrush up :-We already know that in React we play with Javascript and embed html inside the jsx files to create […]