Forem: Rishikesh Vedpathak

Turborepo: A better way to implement a mono-repo architecture

Rishikesh Vedpathak — Sun, 02 Apr 2023 10:30:46 +0000

As modern software development teams grow and projects become more complex, managing dependencies and maintaining consistency between multiple projects can become a challenge. One way to tackle this problem is by using a monorepo, which is a repository that contains multiple packages, each with its own versioning and dependency management.
However, setting up a monorepo can be a daunting task, especially when it comes to managing the build and deployment process. This is where Turborepo comes in, providing a simple and efficient solution for managing a React monorepo.

Turborepo is an open-source tool that simplifies the creation and management of monorepos, specifically for React projects. It uses Yarn workspaces to manage dependencies and allows for easy sharing of code between projects. Turborepo also provides a number of useful scripts for building, testing, and deploying projects within the monorepo.

Benefits of using Turborepo

Simplified setup: Turborepo automates the setup process for creating a monorepo, saving time and effort.
Consistent dependencies: Yarn workspaces ensure that all projects within the monorepo use the same dependencies, reducing the risk of conflicts and errors.
Easy sharing of code: Projects within the monorepo can easily share code, reducing code duplication and improving maintainability.
Streamlined testing and deployment: Turborepo provides scripts for building, testing, and deploying projects within the monorepo, making these processes simpler and more efficient.

Creating a React Monorepo with Turborepo

To create a React monorepo using Turborepo, follow these steps:

To create a new monorepo, use our create-turbo npm package
```
npx create-turbo@latest
```

    This installs the `create-turbo` CLI, and runs it followed by 
    several questions. Choose appropriate answers and proceed.

2. After completion of the above step, `create-turbo` creates a bunch of files inside the directory that you just have created.
`create-turbo` gave you a description of all of the things it was adding.
![create-turbo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au5b1950cnzrhundz60o.png)

3. Each of these is a workspace - a folder containing a `package.json`. Each workspace can declare its own dependencies, run its own scripts, and export code for other workspaces to use.

4. Add a new React project: To add a new React project to the monorepo, navigate to the apps directory and run the command
    ```


    npm create vite@latest

This will create a new directory with a basic React project set up using [vite](https://vitejs.dev/guide/).

Manage dependencies: To manage dependencies for the project, navigate to the project directory and run npm i <dependency-name>. This will add the dependency to the project's package.json file and to the root package-lock.json file.
Build, test, and deploy: Use the various scripts provided by Turborepo to build, test, and deploy projects within the monorepo.

Overall process:

Conclusion

Using a monorepo for managing multiple projects can be complex, but Turborepo simplifies the process for React projects. By automating setup, managing dependencies with Yarn workspaces, and providing scripts for building, testing, and deploying projects, Turborepo makes it easier to manage a React monorepo.

And more...

Check Hybrowlabs for React app development services.

SVGR for your React app

Rishikesh Vedpathak — Sun, 12 Mar 2023 22:06:48 +0000

Most of the time, developers tend to add svg images to an assets directory and import them either directly or as a React component. This process not only increases your app bundle size but also makes managing all the assets difficult.
What if there was a way to manage all the application icons like the way we import them from any other icon library?
Yes, react-svgr helps you manage all the icons in your React application.

What is SVGR?

SVGR is an universal tool to transform SVG into React components.
SVGR takes a raw SVG and transforms it into a ready-to-use React component.

Example,
Raw svg icon,

After running SVGR, we get the below react component,

How to use SVGR?

SVGR playground
SVGR playground will help us transform our svg image into a react component online. Then we can copy-paste this component into our react application for further use.
SVGR cli
SVGR playground is useful only if we have few icons for transformation. But with SVGR cli we can transform a single file or a whole directory.
can install @svgr/cli locally in our project:



npm install --save-dev @svgr/cli
# or use yarn
yarn add --dev @svgr/cli

Transforms a single file by specifying file as the single argument.



npx @svgr/cli -- assets/icons/menu-icon.svg

Transform a whole directory Transforms a whole directory using --out-dir option. All SVG presents in this directory tree are transformed into React components.



npx @svgr/cli --out-dir dist -- icons

Write a script for batch transformation

With the help of @svgr/cli we can simple write a script which can further simply this process.

Write new script into package.json,
Create svgr.config.js file on root lever with below config,
Now we are good to execute below npm command to transform all our svg icons into react components.



npm run icon:create

And more...

Check Hybrowlabs for React app development services.

What’s new in React 18?

Rishikesh Vedpathak — Wed, 13 Apr 2022 09:00:57 +0000

What’s new in React 18?

The new version of React is out and it is now available on npm! It has introduced some new, interesting features. You won’t have to change any code or learn a new concept and very importantly it does not break any of your existing code.

👉How To Update

It is fairly simple to update to the latest version of React in your existing project. Follow the below steps to update to React 18,

Update dependencies

    // for npm
    npm install react@18 react-dom@18

    //or for yarn
    yarn add react@18 react-dom@18

Go to your root index.js and make the below changes,

    // Before
    import { render } from 'react-dom';
    const container = document.getElementById('app');
    render(<App />, container);

    // After
    import { createRoot } from 'react-dom/client';
    const container = document.getElementById('app');
    const root = createRoot(container);
    root.render(<App />);

The React.createRoot creates a root running in React 18, which adds all of the improvements of React 18 and allows you to use concurrent features. This will be the root API moving forward.

That’s all! You don’t need to make any other code changes 🥳.

👉Concurrency

This is the most important concept added in React 18. Concurrency is not a feature, it is an implementation detail. It helps with state update prioritization so that urgent state updates can be prioritized over less urgent/time-consuming/blocking updates.

A key property of Concurrent React is that rendering is interruptible. React always process all state updates in the order they were triggered i.e. in a single, uninterrupted, synchronous transaction. With the addition of this concurrency concept, you can tell react that a certain state update has a lower priority than the others, and then react will treat other state updates with higher priority.

You can tell react that a state has a lower priority using one of the new APIs that are newly introduced in React 18 — useTransition and startTransition

👉useTransition and startTransition

useTransition and startTransition let you mark some state updates as not urgent. Other state updates are considered urgent by default.
e.g.
urgent state updates — updating a text input
non-urgent state updates — rendering a list of search results

useTransition

Since it is a hook this can be used in functional components.
It returns an array with two values:
isPending: a stateful value for the pending state of the transition
startTransition: a function to start the transition

startTransition

This method is designed to be used when useTransition is not available, e.g. class components.
This lets you mark updates inside the provided callback as transitions.

See the working examples below. We have a list of two thousand users to be rendered on UI. In the first example, we have used the traditional way of rendering the list whereas in the second example we have used the useTransition hook. You will notice the performance difference while searching for a user.

In the first example, you will notice a bit of lag while typing in the input box, this is because React is waiting for a filtered list state update and then updates the state of the input box.

And in the second example, we are telling React to keep the list update state on low priority which results in performance improvement.

Without prioritization,
1. With concurrency rendering,

Important Note: *It *is not recommended to wrap every state update with startTransition instead, we should use it only when there is no other solution available to increase the UI performance.

useDefferedValues()

It tells React to show the old state until a newly updated state is ready. This is similar to statrTransition() but can be used where you don’t have complete control over the state updates, e.g. state passed from parent component to a child component. To use this, you simply need to wrap the state variable inside useDeffedValue() , and then your child component will get the old state until an updated value is available.

    const userList = useDeferredValue(props.list);

👉New Hooks for Libraries

React 18 has introduced a few hooks,

useSyncExternalStore
useInsertionEffect
useId

Note: These hooks are intended to be used by libraries, not application code. As an application developer you will probably ever use these hooks.

👉Automatic Batching

Automatic batching allows grouping multiple state updates together so that they get executed as one state update. This results in a single re-render for better performance.

Batching was already present in the older version of React but was limited to React event handlers only. For example, if you have two state updates inside of the same click event, React has always batched these into one re-render. If you run the following code, you’ll see that every time you click, React only performs a single render although you set the state twice:

With automatic batching React 18 now support state update batching inside promises, setTimeout, native event handlers, or any other event that was not batched in React by default. See the below example,

What if I don’t want to batch?

Usually batching is safe, but some code may depend on reading something from the DOM immediately after a state change. For those use cases, you can use ReactDOM.flushSync() to opt-out of batching:

    import { flushSync } from 'react-dom'; // Note: react-dom, not react

    function handleClick() {
      flushSync(() => {
        setCounter(c => c + 1);
      });
      // React has updated the DOM by now
      flushSync(() => {
        setFlag(f => !f);
      });
      // React has updated the DOM by now
    }

👉New Suspense Features

The suspense component is already present in the older version of React. However, the only supported use case was code splitting using React.lazy , and it wasn’t supported at all when rendering on the server. You must have been using the Suspense component to show a fallback component until another component is ready for rendering i.e. lazy loading of components.

    <Suspense fallback={<Spinner />}>
      <LaziComponent />
    </Suspense>

React 18 allows Suspense work for server-side rendering and in case of data fetching in near future.

👉Server Components

React introduced Server Components however these are still in the research and development phase. These components are meant to render on the server only allowing to perform certain server-side only logic. This will be used to perform tasks on the server that should not run on the client may be for security or performance reasons.

This is an experimental feature and not ready for you to use in your app. We are expecting this to be released in near future. More details are available here.

And more...

Check Hybrowlabs for React app development services.

How to abort a fetch API call?

Rishikesh Vedpathak — Sun, 30 May 2021 10:02:44 +0000

You probably faced a situation where you wonder is there a way to abort an API call before it gives back a response. For example, when you are downloading a large size video and you want to cancel the downloading process after waiting for a certain amount of time.

Well, there is a good way to handle this. JavaScript provides an interface called AbortController.

The AbortController interface represents a controller object that allows you to abort one or more Web requests as and when desired.

The basic syntax of AbortController would look like this,

let controller = new AbortController();

function downloadVideo() {
  // ...
  fetch(url, { signal: controller.signal })
    .then(function (response) {
      // ...
    })
    .catch(function (e) {
      // ...
    });
}

function abortDownload() {
  controller.abort();
}

Nothing much fancy, isn't it?
We need to understand few basic points here though,

Create an instance of AbortController, which in return gives us a signal object instance.

controller.signal

Pass this signal object to our fetch request as an option inside the request's options object.

fetch(url, { signal: controller.signal })

When abort() is called, the fetch() promise rejects with a DOMException named AbortError, so we should handle it in catch block.

Here is working example from CodeSandbox.

And more...

Check Hybrowlabs for React app development services.

Scrum or Kanban

Rishikesh Vedpathak — Mon, 24 May 2021 10:58:57 +0000

Agile is a set of values and principles that help organizations create great products and services. Scrum and Kanban are frameworks that help teams follow the Agile principles and get work done in an Agile way.

Scrum and Kanban both have some similarities that in both the frameworks work is done iteratively with a focus on reducing waste.
There are some differences as well. Kanban methodologies are continuous and more fluid, whereas scrum is based on short, structured work sprints. Let’s discuss the key differences between them,

Roles and responsibilities
Delivery timelines
Work assignment and prioritization
Release methodologies
Scoping and modifications
Measurement of productivity

1. Roles and responsibilities

Scrum has pre-recommended roles - Product Owner, Scrum Master, and the development team. These roles and their responsibilities are crystal clear to everyone in the team.
Kanban has no predefined roles as they are in Scrum. It promotes maintaining and respecting each other’s responsibilities as a team. It offers more flexibility in terms of work and the team is encouraged to work collaboratively.

2. Delivery timelines

In Scrum, deliverables are divided into Sprints of predefined time periods, usually one to four weeks of a sprint.
Kanban is based on a continuous flow and does not enforce any time limits. The deliverables are delivered based on needs.

3. Work assignment and prioritization

Both Scrum and Kanban use the pull technique to allocate new tasks among teams but in two totally different ways.
In Scrum, tasks are pulled in batches and the process happens only at the start of each sprint.
In the case of Kanban, it allows the team to pull new tasks only once the previous task is completed.

4. Release Methodology

In Scrum, work is delivered in batches at the end of each sprint.
In Kanban, as it is a continuous flow process each task is delivered when it is completed

5. Scoping and Modifications

In Scrum, once the Sprint has started it does not allow any modifications in the current scope until the Sprint is completed.
Kanban is more flexible as compared to Scrum as changes can be made anytime in the timeline of a project. But of course, the modification is limited considering the work in progress limit.

6. Measurement of Productivity

In Scrum, productivity is measured in terms of velocity through Sprints. Sprint velocity is the amount of work a team can deliver at the end of a Sprint. It guides future sprint commitments, or how much work the team takes on in future sprints.
In Kanban, lead time and cycle time are used to measure the average amount of time that it takes for a task to move from start to finish. Kanban teams strive to improve cycle time by working together on removing bottlenecks.

Which is better for your needs?

Both Scrum and Kanban are powerful, proven process tools that can vastly improve your project management.
Scrum is suitable for projects with stable priorities that may not change as much over time. Kanban is best for projects with widely varying priorities.
The best option is to become familiar with both of them and experiment with various aspects of both in your production environment. Creating a hybrid of both is perfectly acceptable if that works best for you.

Final words

The principles of both Scrum and Kanban are largely the same. Both frameworks will help you build better products and services.
Both Scrum and Kanban work by breaking down large and complex tasks into smaller ones to be completed efficiently and in a time-based manner.
They place a high value on continuous improvement, optimization of the work in the process. They both focus on transparency and making the work visible that keeps all team members aligned.

Don’t ask, “kanban vs scrum.” Instead, ask “kanban or scrum” or even “kanban and scrum.” Make it more about the principles than the practices.

And more...

Check Hybrowlabs for React app development services.

Movies app using react-query for server-side state management

Rishikesh Vedpathak — Sun, 16 May 2021 18:37:40 +0000

State management is one of the key factors that developers should consider before starting a React project. React developers usually tend to use libraries like Redux for a solution and with that, they often misuse the way the redux should be used.

In this article, we will see how react-query helps solve the issues we face with redux and the practical example to demonstrate the use case of react-query.

Here is the demo application we are going to discuss,

What is React Query?

React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
React Query

React Query changes the way we look at our application state. It introduces the concepts of Client state and Server state. While using redux, we often put all the state to redux store even the local state like if a sidebar is open or not. React Query allows you to defeat and overcome the tricky challenges and hurdles of server state and control your app data before it starts to control you.

Key features of React Query,

Help you remove many lines of complicated and misunderstood code from your application and replace them with just a handful of lines of React Query logic.
Make your application more maintainable and easier to build new features without worrying about wiring up new server state data sources
Have a direct impact on your end-users by making your application feel faster and more responsive than ever before.
Potentially help you save on bandwidth and increase memory performance

Installation

You can install React Query with NPM **or **Yarn,

npm i react-query

yarn add react-query

Devtools for React Query

React Query does come with dedicated devtools. The devtools are bundle split into the react-query/devtools. Just import it into your app.js file as,

import { ReactQueryDevtools } from 'react-query/devtools'

By default, React Query Devtools are not included in production bundles when process.env.NODE_ENV === 'production', so you don't need to worry about excluding them during a production build.

Once imported, wrap your root component with QueryClientProvider

Now, when you run your application locally it will show a small react-query icon in the bottom-left corner and when you click on it opens up a devtools as shown below,

The devtools has many other options which we can configure at our convenience. Refer to https://react-query.tanstack.com/devtools for more details.

OMDb API

For this project, we are using the OMDb API. It is a free web service to obtain movie information. It is simple to use and the doc page is pretty easy to understand. However it just provides the GET APIs, so we won’t be able to perform POST/PUT/DELETE operations.
OMDb API

Fetch movies using React Query(useQuery hook)

Yes, it is as simple as it looks. The useQuery returns a few very important states.

isLoading or status === 'loading' - The query has no data and is currently fetching
isError or status === 'error' - The query encountered an error
isSuccess or status === 'success' - The query was successful and data is available
isIdle or status === 'idle' - The query is currently disabled (you'll learn more about this in a bit)

Beyond those primary states, more information is available depending on the state of the query:

error - If the query is in an isError state, the error is available via the error property.
data - If the query is in a success state, the data is available via the data property.
isFetching - In any state, if the query is fetching at any time (including background refetching) isFetching will be true.

Using these states we can decide what to display on UI,

Query Keys

Consider a scenario where we want to fetch movies depending on the search text. For this, we need to pass search text as a query parameter to our GET API. We can achieve this with the help of query keys.

At its core, React Query manages query caching for you based on query keys. Query keys can be as simple as a string, or as complex as an array of many strings and nested objects. As long as the query key is serializable, and unique to the query’s data, you can use it!

In our case, the query key is a simple string value.

You can see the queries cached in devtools,

Understanding Caching

The query key that we have provided to our useQuery hook is used internally for refetching, caching, and sharing your queries throughout your application.

To understand this let's see the below steps,

You searched ‘Batman’ for the very first time. It will fetch data from API and while fetching, the application will display loader on UI.
Now you clear the search box and searched for ‘Marvel’, the same will happen.
You again clear the search box and searched for ‘Batman’ again, in this case, you will see search results are displayed immediately without any wait time and loader on UI. This is because React query managed to cache the data for the unique key i.e. [“movies”, “Batman”].
And React Query intelligently updates the data returned from the second API call in its cached data.
This improves our application performance.

Conclusion

React Query is a powerful and easy-to-use library to manage our application’s server state. It is a great alternative to Redux, MobX and can reduce boilerplate code to a larger extent. React Query is not a replacement for local/client state management. However, you can use React Query alongside most client state managers with zero issues.

We have created a Movie List Application just using React Query to demonstrate its use case. We did not use any other state management library which concludes the importance of keeping client and server states separately.

You can find the final code in the GitHub repo,

RishikeshVedpathak / react-query-movies-app

A simple ReactJS movies app based on OMDb API to demonstrate react-query use cases as a state management library

React-Query-Movies-App

A simple ReactJS movies app based on OMDb API to demonstrate react-query use cases as a state management library

💻 Tech used:

React
React Query for server-side state management
OMDb API to fetch movie data

🌎 Live demo: https://react-query-movies-app.netlify.app/

📌 Blog: https://rishi-vedpathak.medium.com/movies-app-using-react-query-for-server-side-state-management-184140142daf

🎥 Youtube preview: https://www.youtube.com/watch?v=Q92YalYbfkM

View on GitHub

I hope this will help you to understand and encourage you to freely use React Query in your application. Please feel free to give feedback and suggestions!

And more...

Check Hybrowlabs for React app development services.

Create Responsive React app using react-responsive

Rishikesh Vedpathak — Sun, 01 Mar 2020 14:55:55 +0000

React Responsive

Before we start, visit this demo application, this will give you a rough idea of what we are going to discuss in this article.

React App

This article will help you to understand how we can handle responsive UI easily in ReactJS. You must have known about the media queries which was introduced in CSS3.

Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

Media queries is the first thing that comes in our(the UI developers) mind when we want to develop a responsive website. But sometimes it makes hard for us to handle all the viewport attributes in every CSS file. What if we can manage it at a single place. In case of React app, we can take the advantage of React’s techniques like hooks and HOC.

About react-responsive

There a node package called react-responsive which makes it easy to manage media queries.

react-responsive

to install this package use below command,

npm i react-responsive

once installed, you can use it as

HOC for react-responsive

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

Lets take an advantage of HOC. We will create a HOC which will act as a wrapper to manage the responsive config at a single place. Below is simple code for HOC,

Use this HOC in your component say Home as,

Demo App

Here is the glimpse of a demo app created using react-responsive.

react-responsive-demo

I hope this article has helped to understand how we can easily create and manage responsive UI in react app using react-responsive and HOC. You can find the final code in the GitHub repo,

RishikeshVedpathak/react-responsive-demo

And more...

Check Hybrowlabs for React app development services.

React — Environment specific builds using .env with CRA and env-cmd

Rishikesh Vedpathak — Thu, 23 Jan 2020 11:37:10 +0000

React — Environment specific builds using .env with CRA and env-cmd

Many times we(the developers) struggles with making environment specific builds. The process might require changing variables like API_BASE_URL, APP_TITLE etc. This is a manual task and needs to be done carefully, you don’t want to miss any field here to change.

But why to waste our development time in making these manual changes, in stead we can make a good use of .env file.

1. Environment variables in Create React App

We can add environment specific variables to our project by declaring them in a local JS file. By default we have NODE_ENV defined for us by CRA, and we can add any other environment variables starting with REACT_APP_.

WARNING: Do not store any secrets (such as private API keys) in your React app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app’s files.

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime.

Note: You must create custom environment variables beginning with _REACT_APP_. Any other variables except _NODE_ENV_ will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

2. Managing environment variables in .env files

We can create a file named .env in which we can store our environment variables. This .env file will be treated as a default file to define permanent environment variables.

Now we need to create other .env files to support staging and production environments. So lets create .env.staging and .env.production files.

So the files would look like,

// .env

REACT_APP_TITLE = "My Awesome App"
REACT_APP_SESSION_TIME = "60"

// .env.staging

REACT_APP_API_BASE_URL = "https://app.staging.com/api/"

// .env.production

REACT_APP_API_BASE_URL = "https://app.prod.com/api/"

3. Install env-cmd package

Now that we have our separate env files ready we can use them make environment specific builds. For than we will use an npm package env-cmd.

env-cmd

This is a simple node program for executing commands using an environment from an env file. Install this package with below command,

npm install env-cmd

4. Create commands to create environment specific builds

Now open your package.json file and add below scripts,

"scripts": {
  "start": "react-scripts start",
  "start:staging": "env-cmd -f .env.staging react-scripts start",
  "start:prod": "env-cmd -f .env.production react-scripts start",
  "build": "react-scripts build",
  "build:staging": "env-cmd -f .env.staging react-scripts build",
  "build:prod": "env-cmd -f .env.production react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

With this, we can use below commands for creating environment specific builds.

// command to start local sever with .env file. This is used while actual development  
npm start

// command to start local sever with .env.staging file  
npm run start:staging

// command to start local sever with .env.production file  
npm run start:prod

// command to build app with .env.staging file  
npm run build:staging

// command to build app with .env.production file  
npm run build:prod

Conclusion

We have understood why it is useful to have scripts for making environment specific builds. Doing so, we can save our time with automated process and manage environment variables easily.

And more...

Check Hybrowlabs for React app development services.

State management in React application using Context API

Rishikesh Vedpathak — Tue, 10 Dec 2019 11:57:04 +0000

Before we start, visit this demo application. This will give you a rough idea of what we are going to discuss in this article.

React App

If you are one of the developers who is using redux to manage you application’s state then you must be very curious to know more about how can I use the react’s new Context API to manage the my application’s state.

You might have the same set of questions in your mind as I have,

What is React Context API?
Does it serve the same purpose as redux?
Will it replace redux? and does that mean I can get rid of the complexity of redux? 😜
Is it the future of state management?

Well… I might help you to find answers for these. I have written a simple application to demonstrate how we can use React’s Context API for state management. Below is the repo link,

RishikeshVedpathak/react-context-example

What is React Context API? And when to use it?

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

When we start writing a react application, we need to pass some data between components. Typically, even before using redux, we pass data top-down (parent to child) via props. Which woks fine in initial stages, but as your application scales it becomes cumbersome for us to pass the data in this way. Context API provides an alternative way to share values like these between components without having to explicitly pass a prop through every level of the tree.

In React v16.3.0 context api was introduced. Before that, we used to use redux to handle this situation.

Why Context API and not props?

It is true that you can handle everything with props which you can with Context API, but then why to use Context API?

Consider your application structure where you have multiple components defined. And these components may have parent-child relation or they might be siblings. In either case wouldn’t it be cumbersome for you to pass data down the tree. What if there is way you can manage the data at a single location(store) and this data is then be used by all the components. This sounds nice, right!!

This is what we can achieve using Context API. See the below image for better understanding.

Props Drilling vs Context API

Let’s see it in action

See the example here,

React App

This application consists of components,

Header
Home
Cart

These three components share the same data. Any event taken from these components will update the same data.

Create a context(store) for your application.
https://medium.com/media/85688c7960d37d35afe87117a5abad4e/href
Tell your application to use this context.

https://medium.com/media/2fcb454dc036bb26e56eed9906f9a4d7/href

Read data from Context

This is very simple. Use just need to use react’s new hook called useContext

const cartContext = useContext(AppContext)

The cartContext will now hold the data for your component.

Update data in Context

https://medium.com/media/cfd768cddf71173d52aee2ef1fc52660/href

The function handleCartUpdate will update the data in context. This will the be reflected in header as well as in Cart component.

Conclusion

We have successfully created a simple react application to demonstrate the use case of Context API. You can find the final code in the GitHub repo,

RishikeshVedpathak/react-context-example

I hope this will help you to understand and encourage you to freely use React Context API in your application. Please feel free to give feedback and suggestions!

Implement Push Notification in React Native using Expo in just 5 min

Rishikesh Vedpathak — Mon, 14 Oct 2019 07:55:15 +0000

Implement Push Notification in React Native using Expo in just 5 min

Back in days of native mobile application development, implementing push notification was a complex part of your application. It used to take lot of development efforts and time. But hey! we are in React Native era now, where you have the power of JavaScript to implement it easily. And thanks to Expo to made it so easy to configure and use it in our react native app.

Today, we’ll use expo to implement push notification in our simple react native app.

First understands some basics,

What is push notification and why do we need this?

Push notification is an automated message sent by an application to a user when the application is not open. App owners will receive push notifications whenever new content is uploaded.

A text message will bring you to your messaging app, while a push notification will bring the user to whatever app sent the message. Push notifications are much better because the user knows exactly who it’s coming from. It’s clear that the message is from the app that they’ve installed on their device.

What is Expo?

Expo is a set of tools and services for building, deploying, and quickly iterating on native iOS, Android, and web apps from the same codebase.

Now lets dive into the actual implementation and we will understand it step-by-step.

1. Install Expo CLI and create new project

First thing you need to have Expo CLI installed globally on your development machine. You can install it by using npm command :

**npm install -g expo-cli**

After installing Expo CLI create a new project using command:

**expo init ReactNativePushNotification**

Expo CLI will ask you to choose between templates, choose ‘blank’ under the Managed workflow section. Expo CLI is now initializing a new project: it copies a basic template and installs react, react-native and expo. When the project is initialized and ready to go, the command will exit.

2. Install Permissions Module

When it comes to adding functionality that can access potentially sensitive information on a user’s device, such as their location, or possibly send them unwanted push notifications, you will need to ask the user for their permission first. To do so we need to add Permissions module in our app.

Install Permissions module using below expo cli command,

**expo install expo-permissions**

This will add dependency in your package.json file. Here are the dependencies at the time of building this project:

**"expo": "^35.0.0",  
"expo-permissions": "~7.0.0",  
"react": "16.8.3"**

3. Get Token For Push Notification

Now that we have permission module installed, we will use it to get NOTIFICATION token from user. For that we first need to ask user to grant permission.

Focus on the function getPushNotificationPermissions . This function asks user to grant notification permission and prints the token on console. If you run this with yarn start , you will see the token printed in you shell console as below.

ExponentPushToken

The token ExponentPushToken[YPU4bUD2NANefVgvBa9ANi] is used to uniquely identify the device and send notification to it.

4. Send Notification To Our App

It’s time to buckle up and get ready to send our first notification. For that we need a tool which will generate a notification request and send it to our app. Expo has provided a tool for that

Expo - Push notification tool

Open this tool and add below information in the form shown,

Expo Push Notification Tool

Here , you will notice that the Expo Push Token is nothing but the token that we have generated earlier in our app.

Now, keep your app running on your mobile and hit the ‘Send a notification’ button at the bottom of the tool. You will get a notification right on top of your mobile screen. Cool, isn’t it!

ReactNativePushNotification

Conclusion

We have successfully created a react native app(with Expo) which allows user to receive and display push notifications. You can find the final code in the GitHub repo,

RishikeshVedpathak/ReactNativePushNotification

I hope this will help you to understand and encourage you to freely use Expo for with React Native. Please feel free to give feedback and suggestions!

And more...

Check Hybrowlabs for React app development services.

React Native — Login with Facebook

Rishikesh Vedpathak — Sun, 06 Oct 2019 19:20:52 +0000

React Native — Login with Facebook using Expo

ReactExpoFacebookAuth

React native is very popular these days when it comes to hybrid mobile apps development. This article will help you to integrate Facebook's Graph API in your native mobile app using React Native with Expo.

Expo is a set of tools and services for building, deploying, and quickly iterating on native iOS, Android, and web apps from the same codebase.

1. Install Expo CLI and create new project

First thing you need to have Expo CLI installed globally on your development machine. You can install it by using npm command :

**npm install -g expo-cli**

After installing Expo CLI create a new project using command:

**expo init ReactNativeFacebookAuth**

2. Setup Facebook App

Go to https://developers.facebook.com/apps/ and sign up if you have not yet done so. You will see below screen,

Create a new app and add your details as below,

This will create a new facebook app. Then go to settings > Basic in the left panel. Scroll down to the page and click on Add platform and select Android.

Add rRW++LUjmZZ+58EbN5DVhGAnkX4= as an Android key hash.

This is it, you are now ready to write a code to integrate your facebook app into your react native app.

You can more information on Facebook integration for Expo apps at below link,

Documentation

3. Add Facebook to the application

Below command provides Facebook integration for Expo apps.

**expo install expo-facebook**

Write a code to integrate Facebook

4. Understanding Facebook API

Make a note of below method,

await Facebook.logInWithReadPermissionsAsync('712635261226351', {
 permissions: ['public\_profile'],
});

Facebook.logInWithReadPermissionsAsync method prompts the user to log into Facebook and grants your app permission to access their Facebook data.

Permissions is an array specifying the permissions to ask for from Facebook for this login. The permissions are strings as specified in the Facebook API documentation. The default permissions are ['public_profile', 'email'].

It returns { type: 'success', token, expires, permissions, declinedPermissions }

If the user or Facebook cancelled the login, returns { type: 'cancel' }.
token is a string giving the access token to use with Facebook HTTP API requests.
expires is the time at which this token will expire, as seconds since epoch. You can save the access token using, say, AsyncStorage, and use it till the expiration time.
permissions is a list of all the approved permissions.
declinedPermissions is a list of the permissions that the user has rejected.

See below output screenshots for reference,

React Expo Facebook Auth

Conclusion

We have successfully created a react native app(with Expo) which allows user to login using their Facebook account. You can find the final code in the GitHub repo,

RishikeshVedpathak/ReactNativeFacebookAuth

I hope this will help you to understand and encourage you to freely use facebook’s graph API with react native. Please feel free to give feedback and suggestions!

And more...

Check Hybrowlabs for React app development services.

React Native Map with real time location selection for Android

Rishikesh Vedpathak — Mon, 03 Jun 2019 11:35:44 +0000

React Native Map with real time location selection for Android

These days almost every mobile app needs the map integration for a purpose. React Native gives a great ability to serve this purpose easily. Today we will see how to integrate google map in and how to use google map platform https://maps.googleapis.com to get the real time location by moving around the map view.

Create new project using react-native-cli

First thing you need to have react-native-cli installed globally on your development machine. You can install it by using npm command :

**npm install -g react-native-cli**

After installing react-native-cli create a new project using command:

**react-native init ReactNativeMapView**

This will generate a boilerplate for you with a some pre-configured dependencies. Here are the dependencies at the time of building this project:

**"react": "16.8.3",  
"react-native": "0.59.5"**

You can run your app using react-native run-android , this will display below output on your device.

React native initial device output

Install and configure react-native-maps

Now let’s install react-native-maps using npm command: npm install react-native-maps --save. The library ships with platform native code that needs to be compiled together with React Native. This requires you to configure your build tools. The detailed installation instructions are given here, we will do the setup by using react native link. Run react-native link react-native-maps, this will link the package with our native app(for both Android and iOS). You should the below output on the command line,

Command line output after executing 'react-native link react-native-maps'

Add permissions for map view in our app

Before writing code to display map in our app, we need to get make sure that the required permissions are configured and permitted by the user. To do that add below set of permissions in android/app/src/main/AndroidManifest.xml file.

\<uses-permission android:name="android.permission.SYSTEM\_ALERT\_WINDOW" /\>

\<uses-permission android:name="android.permission.ACCESS\_FINE\_LOCATION" /\>

Also, we need to add add google’s Geo-location API key. Generate your own API key from

Geo-location APIs | Google Maps Platform | Google Cloud

Add below line of code in the same file inside <application> tag at the end.

\<meta-data
android:name="com.google.android.geo.API\_KEY"
android:value="\<\<YOUR API KEY GOES HERE\>\>"/\>

Write a code to display map view

Now it’s time to write some code to display the real time map view in our app.

constructor(props) {
 super(props);
 this.state = {
 loading: true,
 region: {
 latitude: 10,
 longitude: 10,
 latitudeDelta: 0.001,
 longitudeDelta: 0.001
 }
 };
}

render() {
 return (
\<MapView
 style={styles.map}
 initialRegion={this.state.region}
 showsUserLocation={true}
 onMapReady={this.onMapReady}
 onRegionChangeComplete={this.onRegionChange}\>

\<MapView.Marker
 coordinate={{ "latitude": this.state.region.latitude, 
 "longitude": this.state.region.longitude }}
 title={"Your Location"}
 draggable /\>

\</MapView\>);
}

Above code will display a simple map view as shown below,

Add custom marker using font

Many times we see a center positioned icon on the map, which is fixed at the center and we see the map moved around it. To achieve this we will need to add a custom marker using icon or an image. Here we will show icon as a marker and to do so we need to configure and add font. Follow below steps to add fontawesome fonts,

Setp 1: Download fontawesome-webfont.ttf file and rename the file to fontawesome.ttf.

Step 2: create /assets/fonts/ directory in your project directory at root level.

Step 3: paste fontawesome.ttf file to /assets/fonts/

Step 4: add below code to your package.json file.

"rnpm": {
 "assets": [
 "./assets/fonts"
 ]
}

Step 5: run react-native link.

Now that we have fonts configured, we can add a font as a marker.

\<View\>
 \<MapView
 initialRegion={this.state.region}
 showsUserLocation={true}
 \>
 \</MapView\>

\<View style={styles.mapMarkerContainer}\>
 \<Text style={{ fontFamily: 'fontawesome', fontSize: 42, color: 
 "#ad1f1f" }}\>&#xf041;\</Text\>
 \</View\>
 \</View\>
\</view\>

This will display the output as below,

Get location details from the map

We can get the location details using google’s map API. All we need to provide is latitude, longitude and API key to the https://maps.googleapis.com.

Current latitude and longitude can be captured by using onRegionChangeComplete prop method provided by MapView.

See below final output with live real time location selection using react-native-maps,

Conclusion

We have successfully created a react native app which can capture and display user’s current location on the map. You can find the final code in the GitHub repo,

RishikeshVedpathak/ReactNativeMapView

I hope this will help you to understand and encourage you to freely use google’s map API with react native. Please feel free to give feedback and suggestions!

And more...

Check Hybrowlabs for React app development services.