Rachel Cole

Rachel Cole

1561006103

Build a React Application using RxJS

In this post, we are going to cover the basics of RxJS and how it integrates with React applications to manage state.

Build an authenticated React application using RxJS and the CSS framework, Tailwind.

We’ll build a demo app that presents GitHub user information. The app will be styled with TailwindCSS and secured with Auth0. We can get the code here.

Reactive Programming

Reactive programming can be found in many different platforms. Today we are going to be using the JavaScript implementation of it. If you were to visit the ReactiveX site, you would see that you can use reactive programming in a long list of languages. ReactiveX is a library to implement this paradigm in different languages. There’s RxPY for Python, RxPHP for PHP, or RxScala for, you guessed it, Scala. Each one is going to be catering to its language, but will each have the same idea behind it.

What is RxJS?

RxJS is a library for reactive programming. Cool, so what does that mean? In most applications, we have data flow. With RxJS we can have the data flow make more sense by implementing patterns like the Observer pattern and the Iterator pattern under the hood to make asynchronous programming easier to reason about. It handles the data coming in and then executes the task you assigned to it. No worries; if all of that sounded like too much to grasp, we’ll go over it.

In React, we have been using Redux or other methods to handle data flow. Let’s talk about what it would look like if we had RxJS take care of our data stream.

What can RxJS help you manage?

  • Data flow
  • Data stream
  • State
  • Among other things

Think of the RxJS library as something that is always listening for data using Observers and Observables. (More on those in a bit!)

Without reactive programming, you have to “wake up” the application: “Hey, there’s some new data, can you handle it for me?”. With RxJS, it’s saying: “What new data do you have for me? I’m ready!” RxJS is always listening.

How to Get Started with RxJS

In this post, we will briefly go over the basics of RxJS. Want to learn the high level updates to RxJS 5? Read this great post, RxJS 6: What’s new and what has changed? To dive deeper into RxJS, visit rxjs.dev or learnrxjs.io.

Let’s look at an example where RxJS would be useful. Imagine we had an application that has an input search box where the user types in a name to search for a user, post, etc. When the user clicks “Search”, they will get their results back. RxJS could be used to handle that flow.

RxJS will wait for that prompt to send back the user’s search results, creating an asynchronous event.

Key Concepts of RxJS - Observables, Observers, Operators

In RxJS we are going to use a couple of key concepts. We have:

  1. Observables
  2. Observers
  3. Operators

RxJS uses Observables to observe the data stream or array coming in and the Observers patiently wait for information from the Observable on how to give that data functionality.

Observables

If we were to head over to the RxJS documentation, we would see this definition:

A representation of any set of values over any amount of time. This is the most basic building block of RxJS. Source: RxJS

Let’s break that down.

The values that are being talked about could be data from an array or any stream of data. In any case, the Observables are there to handle all types of data streams. It’s the middle man in a sense. The data is sent through the Observable on its way to the Observer.

Observers

An Observer grabs the values from the Observable and then processes the data by using these three methods:

  1. next() - what is then called when it successfully runs
  2. error() - error handling if it doesn’t successfully run
  3. complete() - the process is done

In order for the Observer to receive the data from the Observable, we “subscribe” to the Observable. The subscribe method allows for the data to be pulled from the Observable and passed on to the Observer. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable.

Operators

Operators are what we use to shape our data into what we need. By chaining Operators together, we are able to manipulate exactly what we need from the data coming into our app.

If we were to visit the official docs RxJS, we could see the large list of Operators that we could use. Some will look familiar or straightforward, like “map” or “filter”, others may need a little more explanation or understanding, like “exhaustMap”. If we were to dive into these, the docs explain what each one does and how to use it.

What We Will Build

Today we are going to be building an authenticated React app that uses the GitHub API. By “fetching” the API’s data, we are going to use that data stream and use reactive programming to handle that data. The user will be able to type in a GitHub username and the avator and username will be returned and displayed on the page.

Setting up our Auth0 credentials

Before we start building our app, let’s head over to Auth0.com to set up our application on our dashboard. Here we will get our clientID and other things we will need to make our app an authenticated on.

We are going to log into our Auth0 Dashboard. If you do not have an account, you can sign up for a free Auth0 account here or log into your already existing account.

Once at our Dashboard, we will want to follow these steps:

  1. Click on + Create Application
  2. We will name our app rxjs-react-app (or any other relatable name), choose Single Page Web Applications, and click Create.
  3. Once created, click on Settings and we will see our list of items needed, Domain, Client ID, etc.

We will come back to this page, so keep your Auth0 dashboard available.

Setting up our application

Whichever operating system we are on, we are going to find our command line.

By navigating to the location we would like our app to be, we are going to run the following command:

npx create-react-app rxjs-react

Once the build is done we are going to navigate into that project by running this command:

cd rxjs-react

Within that, we can run the command:

npm start

We are now able to see our React application at <a href="http://locahost:3000" target="_blank">http://locahost:3000</a>.

Required libraries

We are going to need to install the following libraries:

  1. auth0-js - to use the Auth0 product
  2. react-router-dom - for routing purposes in our application

To get both of those installed, run this command:

npm install --save auth0-js react-router-dom

We will see those libraries added to the dependencies section in our package.json.

In the file src/index.js, we will need to use react-router-dom and then wrap <BrowserRouter> around our <App />. That file should now look like this:

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Authentication Files

config.js file

Remember the credentials we have waiting for us in our Auth0 application? Let’s go ahead and grab those so we can start using them.

In our src folder, we are going to create a new folder, Auth. Within the new src/Auth folder, we are going to create a file named, config.js. Within that file, src/Auth/config.js we are going to want the following code:

// src/Auth/config.js

export const config = {
    clientID: 'YOUR_CLIENT_ID',
    domain: 'YOUR_AUTH0_DOMAIN.auth0.com',
    redirectUri: 'http://localhost:3000/callback'
};

By navigating back to our Auth0 Dashboard application, “rxjs-react-app” (or whichever name was used), go to the “Settings” tab and we will see “Client ID”, “Domain”, etc. Replace your values in the config.js file. If we were to scroll down, we will also see a place for “Allowed Callback URLs”. In that section, let’s put the URL, <a href="http://localhost:3000/callback" target="_blank">http://localhost:3000/callback</a>. In the section titled, “Allowed Logout URLs”, we will want to put the URL, <a href="http://localhost:3000" target="_blank">http://localhost:3000</a>. Be sure to save those changes by hitting the “Save Changes” button at the bottom.

In our .gitignore file, we will put config.js in the list. We want this information to not be pushed to GitHub.

Auth.js file

By using the information we just created for our Auth0 application, let’s create the file that will be using those credentials.

In our src/Auth folder, we are going to create a file, Auth.js.

Go ahead and grab this code and put it into that file:

// src/Auth/Auth.js

import auth0 from 'auth0-js';
import { config } from './config';

class Auth {
    auth0 = new auth0.WebAuth({
        domain: config.domain,
        clientID: config.clientID,
        redirectUri: config.redirectUri,
        responseType: 'id_token',
        scope: 'openid profile'
    });

    isAuthenticated() {
        return new Date().getTime() < this.expiresAt;
    }

    signIn() {
        this.auth0.authorize();
    }

    handleAuthentication() {
        return new Promise((resolve, reject) => {
            this.auth0.parseHash((err, authResult) => {
                if (err) return reject(err);
                if (!authResult || !authResult.idToken) {
                    return reject(err);
                }
                this.setSession(authResult);
                resolve();
            });
        })
    }

    setSession(authResult) {
        this.idToken = authResult.idToken;
        this.profile = authResult.idTokenPayload;
        // set the time that the id token will expire at
        this.expiresAt = authResult.idTokenPayload.exp * 1000;
    }

    signOut() {
        this.auth0.logout({
            returnTo: 'http://localhost:3000',
            clientID: config.clientID,
        });
    }

    silentAuth() {
        return new Promise((resolve, reject) => {
            this.auth0.checkSession({}, (err, authResult) => {
                if (err) return reject(err);
                this.setSession(authResult);
                resolve();
            });
        });
    }
}

const Auth0 = new Auth();

export default Auth0;

At the top of this file, we have imported our auth0-js library and our config.js file that has our Auth0 credentials.

We then establish what the domain, clientID, and redirectUri fields are.

With each function throughout the file, you will see authentication being set up. For example, if we were to look at the signIn() function, we see that we are using the auth0-js import to call on authorize(). Once this is used, it triggers the Auth0 product and allows the user to log into the application.

Styling Frontend with TailwindCSS

In our app today, we are going to be using the CSS framework, Tailwind. We won’t go over the specifics of Tailwind in this tutorial but definitely check them out. If we were to head over to the installation instructions, we would see that Tailwind can be installed two different ways:

  1. With the link tag and the entire stylesheet (32kb)
  2. Using NPM and configuring Tailwind to run via webpack and PostCSS

Today we’ll be using option #1, with the link tag since it’s the easiest for this demo. The NPM way is a bit more involved (you can see the instructions here), and it allows us to tree shake Tailwind so we get the smallest bundle size possible. We could even get Tailwind down to 1kb!

We are going to head over to our public/index.html file and insert the following link tag under the head tag:

// public/index.html

<head>

  // other code here

  <title>React App</title>

  // add this line
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>

Now that we have Tailwind in our application, while we are building out our frontend components, we will be adding the styling as we go. In Tailwind, the styling is done within the HTML tag, like so:

<button class="py-6 px-8 text-3xl rounded shadow bg-yellow-lighter hover:bg-yellow-lightest text-yellow-darker">My Tailwind Button</button>

Our Frontend Components

In our /src folder, we are going to create a folder named Components. In there, we will begin to create our different components.

Callback component

Within the src/Components folder, let’s create a folder named Callback and within that, a file named Callback.js. So our path should be as follows: src/Components/Callback/Callback.js.

The code within that uses the handleAuthentication() function from our src/Auth/Auth.js file. We will run that function and then move the user onto the “Protected” route (which we will create soon).

If the user is experiencing a lag in their connection, they will see “Loading profile…” to assure them that the authentication process is, in fact, doing it’s job.

The code should be as follows:

//src/Components/Callback/Callback.js

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import Auth0 from '../../Auth/Auth';

class Callback extends Component {
    async componentDidMount() {
        await Auth0.handleAuthentication();
        this.props.history.replace('/protected');
    }

    render() {
        return (
            <p>Loading profile...</p>
        );
    }
}

export default withRouter(Callback);

Secured Route Component

In our src/Components folder, we are going to want to create another folder named SecuredRoute and within that, a file named SecuredRoute.js. Our path should look as follows: src/Components/SecuredRoute/SecuredRoute.js.

In this component, we are going to want to check that the authentication is still valid. By using the isAuthenticated() function from our Auth.js file, it will check the authentication status of the logged-in user.

// src/Components/SecuredRoute/SecuredRoutes.js

import React from 'react';
import { Route, withRouter } from 'react-router-dom';
import Auth0 from '../../Auth/Auth';

function SecuredRoute(props) {
    const { component: Component, path, checkingSession } = props;
    return (
        <Route path={path} render={() => {
            if (checkingSession) return <button onClick={() => Auth0.signIn()} className="py-6 px-8 text-3xl rounded shadow bg-yellow-lighter hover:bg-yellow-lightest text-yellow-darker">Log In Again</button>;
            if (!Auth0.isAuthenticated()) {
                Auth0.signIn();
                return <div></div>;
            }
            return <Component />
        }} />

    );
}

export default withRouter(SecuredRoute);

Public Component

In our application, we are going to have the users log in using Auth0’s authentication. The component that will be visible will have a simple login button. Again, we are going to be styling that button using Tailwind.

The button will call the signIn() function from the Auth file. The path for that file will be: src/Components/Public/Public.js. The code should look as follows:

// src/Components/Public/Public.js

import React, { Component } from 'react';
import Auth0 from '../../Auth/Auth';

class Public extends Component {
    render() {
        return (
            <div>
                <button onClick={() => Auth0.signIn()} className="py-6 px-8 text-3xl rounded shadow bg-yellow-lighter hover:bg-yellow-lightest text-yellow-darker">
                    Log In
                </button>
            </div>
        );
    }
}

export default Public;

App.js component

When we ran create-react-app, our file structure got an App.js file. Let’s go ahead and edit that file. This will help finalize our routes and our authentication. We will be able to use Tailwind here to edit the application as a whole.

The entire file should now look like this:

// src/App.js

import React, { Component } from "react";
import { Route, withRouter } from 'react-router-dom';
import auth0Client from './Auth/Auth';
import Public from './Components/Public/Public';
import Protected from './Components/Protected/Protected';
import Callback from './Components/Callback/Callback';
import SecuredRoute from './Components/SecuredRoute/SecuredRoute';

class App extends Component {
  state = {
    checkingSession: true,
  }

  async componentDidMount() {
    if (this.props.location.pathname === '/callback') {
      this.setState({ checkingSession: false });
      return;
    }
    try {
      await auth0Client.silentAuth();
      this.forceUpdate();
    } catch (err) {
      if (err.error !== 'login_required') console.log(err.error);
    }
    this.setState({ checkingSession: false });
  }

  render() {
    return (
      <div className="h-screen bg-blue-lighter text-center pt-10">
        <Route component={Public} path='/' exact />
        <Route component={Callback} path='/callback' />
        <SecuredRoute path='/protected'
          component={Protected}
          checkingSession={this.state.checkingSession} />
      </div>



    );
  }
}

export default withRouter(App);

If we take a look at the componentDidMount, we’ll see that while the user is logged in, it will be checking for its continuous authentication. By using silentAuth(), the app will ensure that the user’s credentials are still valid and check for the current session.

Protected Route Component

Now that we have all the authentication ready and the initial view is in place, let’s build the component that will be the protected route. Unless the user is logged in, they will not be able to view this component.

In this route we will be using RxJS, calling the GitHub API, and allowing the user to be able to log out and return to the initial view.

Within the src/Components file, we will create the following path: src/Components/Protected/Protected.js.

RxJS

The file will start off by using RxJS.

There are two different ways to write Observables in RxJS. We can choose either one, both are fine:

First way:

input$.pipe(
   // stuff here
);

Second way:

const myInput = pipe(
   // stuff here
);

We will be calling our Observable, “input”. On that we will be using two different functions.

.pipe

Thanks to RxJS 5.5, we can now use the “pipe” method on Observables. It takes a list of operators and then runs the data individually through each one. For example:

input$.pipe(
    debounceTime(3000)
);

We will be using the following methods:

  • debounceTime - waits a certain amount of time before displaying the data.
  • filter - filters through the data.
  • flatMap - an alias for mergeMap, for multiple inner subscriptions to be active at one time.

We will have the code for these three methods below!### .subscribe

Like we talked about earlier in the post, the subscribe method allows for the data to be pulled from the Observable and passed on to the Observer. We will look at the subscribe method that we will end up using. We are going to grab the user information and set it to the state in the component.

input$.subscribe(user => {
   this.setState({ user });
});

Our Protected component

The rest of the component will be fetching the GitHub API so that we can display it for the user. Again, we are going to be Tailwind for the styling.

With all the imports needed, the entire file should look like this:

// src/Component/Protected/Protected.js

import React, { Component } from 'react';
import { Subject, from } from 'rxjs';
import { filter, flatMap, debounceTime } from 'rxjs/operators';
import Auth0 from '../../Auth/Auth';

class Protected extends Component {
    input$ = new Subject();
    state = { message: '', user: null };

    componentDidMount() {
        this.input$
            .pipe(
                debounceTime(3000),
                filter(value => value.length > 3),
                flatMap(this.githubUser$)
            )
            .subscribe(user => {
                this.setState({ user });
            });
    }

    githubUser$ = username =>
        from((username = this.getGithubUser(username)));

    getGithubUser = username =>
        fetch(
            `https://api.github.com/users/${username}`
        ).then(res => res.json());

    render() {
        const { user } = this.state;

        return (
            <div>
                <p className="mb-10 text-xl">
                    Type in any GitHub username to view information
                </p>

                {user && (
                    <div className="mb-4">
                        <img src={user.avatar_url} alt="GitHub Avatar" width="200" className="shadow rounded mb-2" />
                        <h3 className="text-2xl text-blue-darker">{user.login}</h3>
                    </div>
                )}
                <input onChange={e => this.input$.next(e.target.value)} placeholder="GitHub Username Here" className="py-3 px-4 rounded shadow w-64" />
                <button onClick={() => Auth0.signOut()} className="mx-auto mt-5 p-2 text-xs block rounded bg-blue-lightest text-blue-darker hover:bg-blue-lightest">
                    Log Out
                </button>
            </div>
        );
    }
}

export default Protected;

Using our GitHub Search Application

We should now be able to log into the application and get authenticated. Once we visit our application we should see the following view:

Once the user clicks the “Log In” button, they will be redirected to the Auth0 log in modal:

The protected view will have the input box where we will type in a GitHub username and, because of the debounceTime function, should see the user’s avatar and username displayed.

If the user were to time-out and authentication was lost, the user is directed to our “SecuredRoute” component and it offers an alter log in button.

If the user were to hit “Log Out” on the “Protected” route page, it would simply take them back to the initial view of the application.

Conclusion

We now have a React application that uses RxJS (final code found here)! Reactive programming allows for a better flow of data, especially when that data is a constant stream coming in.

There are so many different ways to handle data streams using RxJS. What are some of your favorite RxJS methods? Let us know in the comments below!

#reactjs #web-development

What is GEEK

Buddha Community

Build a React Application using RxJS
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Franz  Becker

Franz Becker

1651604400

React Starter Kit: Build Web Apps with React, Relay and GraphQL.

React Starter Kit — "isomorphic" web app boilerplate   

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap  |  Join #react-starter-kit chat room on Gitter  |  Visit our sponsors:

 

Hiring

Getting Started

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

 

React Starter Kit

React Static Boilerplate

ASP.NET Core Starter Kit

App typeIsomorphic (universal)Single-page applicationSingle-page application
Frontend
LanguageJavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)JavaScript (ES2015+, JSX)
LibrariesReact, History, Universal RouterReact, History, ReduxReact, History, Redux
RoutesImperative (functional)DeclarativeDeclarative, cross-stack
Backend
LanguageJavaScript (ES2015+, JSX)n/aC#, F#
LibrariesNode.js, Express, Sequelize,
GraphQL
n/aASP.NET Core, EF Core,
ASP.NET Identity
SSRYesn/an/a
Data APIGraphQLn/aWeb API

Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

lehneres Tarkan Anlar Morten Olsen Adam David Ernst Zane Hitchcox  

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

Related Projects

  • GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
  • Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
  • Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

License

Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.


Author: kriasoft
Source Code: https://github.com/kriasoft/react-starter-kit
License: MIT License

#graphql #react 

What are hooks in React JS? - INFO AT ONE

In this article, you will learn what are hooks in React JS? and when to use react hooks? React JS is developed by Facebook in the year 2013. There are many students and the new developers who have confusion between react and hooks in react. Well, it is not different, react is a programming language and hooks is a function which is used in react programming language.
Read More:- https://infoatone.com/what-are-hooks-in-react-js/

#react #hooks in react #react hooks example #react js projects for beginners #what are hooks in react js? #when to use react hooks

Arden  Keebler

Arden Keebler

1639756620

How to Build Authentication Service in React App using JWT & Rxjs (P2)

In this video we will handle the headers to be appendend on every request and then we will connect the functionality into our signup and login components.

#react-native #react  #rxjs  #jwt 

Aubrey  Price

Aubrey Price

1589722410

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology. So, let’s build this simple app.
For this app, we will be using PokeApi to get our pokemon data, and also we will be using Hooks. I am using pokemondb for pokemon sprites. It’s just a personal preference you can use whatever you want.

#react-native #react-native-app #react-navigation #react-native-development #react