Forem: Ruben

Code splitting React router with React Lazy and React Suspense

Ruben — Mon, 11 Nov 2019 16:14:22 +0000

JavaScript is fast. But before it becomes fast, your browser has to do a lot of work before it serves your fast JavaScript application.

One of the bottlenecks for JavaScript is the bundle size.

The problem with a huge bundle file size is the increase in TTI (time to interactive).

TTI is the result of how long does it take for the user to actually be able to use the application or site.

This is measured in time (milliseconds, seconds, minutes, etc).

Let’s take a look at CNN.com and throttle the network to a slow 3G.

In each row you can see the JavaScript file being downloaded and executed.

You can also see the compressed size, the uncompressed size, and how long it took to be completed.

If we open on their cnn-footer-lib.min.js file, you’ll see that there is nothing minified about it.

And it looks like it contains a lot of the logic for the site in that 1 file.

React + Webpack = 1 big bundle file

99% of the time when you’re developing in React, you’re going to be using Webpack to help you bundle up everything into a nice package.

Webpack at it’s core, is meant to help hot reload during development, and bundle all your JavaScript files into 1 or multiple JS files.

But if you’re developing React, you’re typically aiming for a single page application, which you’ll typically have 1 JavaScript bundle file.

Your React files aren’t big, it’s actually some of the smallest. But as you install React, and other third party libraries that bundle output gets bigger.

And loading a 500kb file isn’t a pretty user experience.

To give a better user experience, we can do a technique called dynamic importing, also known as lazy loading.

Also known as lazy loading.

Benefits of Lazy loading React components

The concept of lazy loading our React JS files is really simple.

Load the minimal code to the browser that will render a page.

Load additional small chunks of code when needed.

By loading less JavaScript code to the browser, that will default to better performance and better TTI results.

The concept of lazy loading may apply to any JavaScript application, but for the sake of simplicity will keep it to React talk.

Code splitting with React

In today’s example, I will be starting off from a previous article that explains how to get started with React router.

One thing to note, is that the previous work is using Create React App.

And Create React App has already enabled Webpack to perform code splitting.

The goal now is to utilize the code splitting capabilities, and lazy loading technique, and apply it to the React app.

Another reason I want to use a previous example is because I’m going to demonstrate how to do route base code splitting with React.

I only want to load the JavaScript code that is needed to render a page, at that given time.

And I will be using React lazy and Suspense to load other React files as a user navigates through the application.

Lazy loading with React Suspense and React lazy

Before we jump into implementing the lazy load code, let’s do a quick recap of the current app.

Here are the current pages the cat application has.

I have 3 pages:

A list of cats
A form to add a cat name
A single view for a cat

Let’s take a quick look at the current code.

The file above is a route configuration that just attaches a path to a page.

The next file is the App.js file that grabs the route configuration file and creates routes out of it.

Look at lines 31-44.

It goes through a map loop to create a React route component.

Now let’s take a quick look at the React developer tools and see how it looks at initial render.

React renders every page route. Even when we don’t need it at the moment.

Let’s take a quick look at the network tab for JS files.

The main.[name].chunk.js file is basic Webpack initial code. The big file size is the React cat application.

Our goal is to make our initial load smaller and load in chunks when needed.

Let’s start adding the code!

Adding lazy loading to React router

The first step I took, was to remove route.js file.

The second step was to modify the App.js file. Take a look at the highlighted areas only.

The highlighted areas shows where the code has changed a bit. Don’t worry I’ll break it down.

Step 1: Import React router Switch component

The first step I took to update the App.js file was in line 5.

I imported the Switch component from react router dom.

The Switch component is a unique React component, as it’s job is to only render a single route component.

You will never see more than one.

In the React developer tool image above, you might have seen 3 routes. Let’s take a look at the developer tool again to see how many routes will render.

And as you navigate through the application, only 1 Route will ever show.

This is helpful because there is no need to have additional code that doesn’t get used at that given time.

Step 2: Create React lazy Components

In line 8 to 10, I created a React lazy components for each page.

React lazy let’s you import dynamically a file and covert it into a regular React component.

Step 3: Use React Suspense component

Before I use my React lazy components, I’m going to add the React Suspense component as a wrapper.

React Suspense is another component provided from the React library.

The React Suspense component helps as a fallback option, to let your users know it’s loading.

This is due to how dynamic importing works.

So what is dynamic importing?

If we take a look at the image above, I’ve given 2 different examples of using the keyword import.

Even though it looks like the same, it’s not.

The first import statement can only happen at the top of the file, and only accepts a literal string.

This is good for importing modules that you’ll need in your code file.

The second import example, uses parenthesis, as you would use in a function.

This let’s your code know that this will be treated asynchronously, and will return a promise.

Since dynamic importing is asynchronous, that’s where React Suspense comes into play.

Suspense will display the fallback option until the promise has completed.

The promise in this case, is that a JavaScript file (React file) has been loaded and executed by the browser.

This will happen as the user goes to each new page.

Step 4: Add our React lazy component to a route

This is a fairly simple step.

Inside my Switch component I’m defining my routes, with a path, and the React lazy component that I want to use.

And I’m also passing properties down to each React lazy component, such my list of cats or a onSubmit handler function.

The result

What I’ve managed to do is grab the entire app and split them into smaller chunks.

There is always going to be a main bundle JS file. But only 1 small chunk file will be downloaded.

As the user navigates through the app and discovers new pages, other small chunks will be downloaded.

This method makes it easy for the browser to process, and execute.

Smaller chunks of code equals faster TTI results (time to interactive).

Conclusion

Code splitting your React application will bring better performance, because it will only load the minimal code it needs to render a page.

Thus bringing a better user experience, and making your users happy.

Github code: React router with lazy loading

Adding React router to your app

Ruben — Tue, 30 Apr 2019 12:47:49 +0000

original post @ Linguine Blog

So your cat app is growing and you want to make it easier for your users to digest the content.

Great! Let’s add React Router DOM to your React cat application.

What is React Router DOM

React Router DOM is a React library for the web. It utilizes another core library called React Router.

It’s main purpose is to allow the engineer to create routes for a React single page application.

Simple enough.

The React Router goal

The goal for this tutorial is to build a cat application that has 3 different routes.

The first route is going to be the home page, that displays the list of cat names.

And each cat item is a link that takes the user to that cat item unique URL route.

2 pages so far.

The third page is going to be the, add a cat page. It’s a simple form that allows your add a new cat.

I’ll also be using the new React hook API, so if you’re not familiar with it, please read a previous article on it. Intro to React hooks.

Installing React dependencies

In the terminal, I’m going to run this command:

npm install –save react react-dom react-router-dom react-scripts

We’re going to install React, React Router DOM, and React Scripts.

React Scripts is the command tool that is used for Create React App. It will helps us develop faster.

You’re package.json file should look like similar to this.

The project structure

The project structure is going to be fairly simple.

In the root of the project I’m going to have a public, and src directory.

The public directory holds our index.html skeleton framework.

The src directory will hold the React code.

Inside the src directory I’ve added another directory called pages.

pages will hold 3 React JavaScript files.

One to add a new cat, another to view a list of all the cats, and the last one to view a specific cat.

We also have the routes.js file. This file is a configuration file that will be an array of React routes.

Each object inside the routes array will contain data such as path value of the page, and what page React component to render when the URL path matches.

And of course, the App.js, this file will glue everything together and be the main file that holds the app logic, and state data.

Building the list of cats view

In the CatList.js file I added the following code.

In this file I’m importing a React Component called Link from the React Router DOM node module.

The Link component allows us to wrap an HTML element or a React component to act as link, and it helps users navigate through the React routes.

Now, the CatList component accepts a prop called cats.

The React prop cats needs to be an array of objects which gets loop through the array map function, and outputs list items that links to the interior view of a cat.

Creating the React form

Before I get started creating the single view for a cat. I need to be able to populate the list of cats.

This app will require a React form that allows some user input.

This React form will also be it’s own React route.

The code will live in a file called AddCat.js.

There’s a lot to digest here, so I will break it down.

In line 5, I’ve created a function called generateCat that chooses a random cat image that I have in my project, and generates the URL source for that image.

In line 12, I’m using the React hook, useState, to keep track of the new cats’ name.

And I’m changing the value of the cats’ name inside a onChange event in the input HTML element.

Now, when the user is ready to submit the new cat, they will click on the submit button.

The submit button has a onClick event that checks for a couple conditions.

One, it checks if the a custom property, onSubmit, has been provided by the parent React Component.

It then checks if the user has even entered a cat name.

If those 2 conditions pass, then it passes down some cat information to the React parent component such as the cat name, a slug, and the random cat picture that was generated.

Which in this case, the parent React component is in the App.js file.

As for the slug, it’s using a custom helper function that turns a name to a url endpoint.

It strips the white space, and any other special characters that don’t belong in the url.

For example, it will convert the name, “Mr. Frizzle” to “mr-frizzle”.

Building the single view

Since we know what the data is going to look like from the form above, than we can start making assumptions how to filter and find the right cat for the single view.

On line 2, I’m importing a HOC (higher order component) from React Router DOM called withRouter, and I’m wrapping it around the SingleCat component.

withRouter lets a React component to have access to the history, location, and match object.

This is important because this React component needs access so it may attempt to get the unique cat slug in the URL, and find the object in the cat list that contains that unique slug.

In line 5, I’m initiating another useState hook, and a useEffect hook.

When the component mounts, the code will grab a parameter called name aka the slug.

It will then run an array filter method to look for the cat object that contains that slug value.

If the filter method returns an empty array then it will send the user back to the home page.

And if the filter method does return an object, then it will trigger the useState hook to update the variable value of cat.

Once the variable cat has a value, we will render out the data of the cat.

Creating React Router config file

This config lives in the route.js file.

The only purpose of this file is to import all the pages, and assign them a path value for the React route component that I’m about to use.

Gluing React with its routes

Now for the file that glues everything together, App.js.

Don’t let all the HTML markup scare you. The job for this file is really simple.

If you take a look at the top, you’ll see that I’m importing a few React components from the React Router DOM library.

The first import is the BrowserRouter component, that gets used in line 16.

BrowserRouter uses the HTML 5 history API, and must be used before adding any routes.

The next component, and probably the most important one, is the Route component.

The Route component is responsible to display the React component assigned to it, only when the location (url) matches.

You can see me using the Route component in line 30 as I’m looping through the route configuration that were created previously.

The Route component accepts a property called path.

This property accepts a regular string or a regex expression as a path. The path property does not need to be provided also.

If a Route component is not given a path value, then the component attached to it will always be shown.

So it’s highly recommended that you add a path value.

In line 34, I’m attaching the React component that is defined in the route configuration file, and I’m tossing a couple custom properties for the list page, and the add a cat page.

In line 10, I’ve also created another state property called cats.

That variable is responsible for tracking and holding all the cats that a user has added.

Conclusion

As your application grows, it will require routes and pages views to be created.

React Router DOM, allows you to create routes really easily, and provides other helper functions and tools to allow users to navigate through your React app.

Github source: with-router.

7 Webpack plugins for your next React app

Ruben — Fri, 26 Apr 2019 13:11:23 +0000

original post @ Linguine Blog

Webpack optimization

Webpack comes with a configuration property called optimization.

Inside optimization another property named minimize, and minimizer.

If minimize equals true, then everything inside minimizer will trigger.

The next couple of Webpack plugins that I will cover, they should be inside the minimizer property.

Terser webpack plugin

The Terser plugin is a great tool to minimize the application JavaScript bundle file for production.

Another plus to this plugin is that it supports ES6+.

Here is a basic configuration for Terser.

Source: Terser plugin

Optimize CSS assets Webpack plugin

The Optimize CSS assets Webpack plugin is another one for production build.

It helps optimize and minimize your React CSS code.

Source: Optimize css assets plugin

Webpack plugins

HTML Webpack plugin

The HTML Webpack plugin is a handy plugin for both development and production build.

It tells Webpack to generate an HTML file and inject a script tag with the JavaScript code.

All you need to do is supply the HTML template to use.

You may also add minification rules such as removing comments, minifying the CSS, and JavaScript.

But if you’d like to only use the minify property for build you can do something like.

Source: HTML Webpack plugin

Webpack Define plugin

This plugin comes with the Webpack node module, and it’s a handy little tool when developing your React application.

The DefinePlugin allows you to create environment variables and makes it accessible to your JavaScript code.

Source: Webpack DefinePlugin

Mini CSS Extract plugin

This plugin is another great production tool.

It allows your to extract the CSS in your React app into separate files per JavaScript file.

Some other features that are enjoyable versus the Extract Text Webpack plugin is:

Async loading
No duplicate compilation
Easier to use

Webpack modules

Babel loader

This plugin allows you to write the latest generation of JavaScript and converts it to a compiled ES5 version.

Now to configure babel-loader for .js, .jsx, and as well for Typescript (if you’re using it).

Source: Babel loader

Babel preset react app

This module is maintained by the Create React App team and it has a great set of presets for your React App.

All we need to do is add more to the babel loader configuration.

Source: Babel preset react app

Simple guide to setup Redux to a React app

Ruben — Mon, 22 Apr 2019 12:24:39 +0000

original post @ Linguine Blog

In a previous article I wrote about how to use React state by building a simple cat application.

When the application is small its relatively easy to maintain React state.

But as the application grows the React state tree gets messier, unmanageable, and more complicated.

And this even more true when your app state starts to hold server responses, cache and UI state data.

UI state data may include routes information, whether to show a loading spinner, pagination, tabs, etc.

At some point your app will have so much going on that you’ve lost control over your app state, and how it works.

Redux is here to solve these problems

Redux is a tiny state management library.

It’s meant to make your state management more predictable, and centralize your React state data, and state logic.

Redux solves these problems by implementing 3 core principals.

Principal 1: Single source of truth

Your entire app state data is in one object tree.

This tree may also be known as a store.

By maintaining a single store it allows you to be debug or inspect your application much easier.

Principal 2: State is read-only

Your store data gets passed down as React props. Which React doesn’t allow you to modify the props object directly.

This will help keep consistency through out the app.

Redux only allows you to update your store data through a functions called dispatch which you must defined the action to trigger.

These actions, describe what will be changing or happening to the store.

Principal 3: Changes are made with pure functions

These function are also known as reducers, which are attached to an action.

The job of a reducer is to get the current state and an action and return the next state.

So when you make a call to an action such as, ADD_CAT.

Redux will take that action request, check if it exists and if it has a reducer attached to it.

It will then execute that reducer function to update the store data.

P.S. Redux doesn’t just run on React, it may be used on any view JavaScript library, and even vanilla JS as well!

Adding Redux to React

For the sake of simplicity, I’m going to modify the cat list application that was built previously to showcase how to use Redux in React.

I know it’s another list app, but it’s simple and it’s easy to follow.

Also if you’d like to follow along with the actual code, scroll to the bottom for the Github source link.

The first step I need to take is to create the package.json file.

This project is going to require the following React libraries

React – The UI library.

React DOM – The tool that let’s us attache our React app to the DOM.

Redux – The state management library.

React Redux – The Redux React library that let’s us attach the Redux store to the React application.

Redux Thunk – This library is a bit of an overkill for this example but it’s popular, and wanted to demonstrate some of it’s pros.

Redux Thunk let’s us split our reducers in smaller pieces when the application grows to enormous, and it let’s us run dispatch inside our actions.

Once your package.json file is ready, run npm install inside your terminal.

The React app structure

Here is the structure of the application.

As you may see, I have my public directory that holds the initial index.html file.

I also have a src directory that holds a few important files for this application to work.

index.js – It’s responsible for making Redux available in the React application, as well as grabbing the React application and dumping it onto the HTML.

App.js – The main source application file. It allows you add cat names, and display them in a list format.

store.js – Is the glue that grabs the reducers and creates a Redux store out of it.

reducers/cats.js – Responsible for describing what the cat reducer looks like, naming the action, and attaching the action to a function that modifies the cat reducer data.

Now that you know the app structure, let’s start going through the code.

Creating a Redux reducer

First I’ll build my cat reducer file.

The first thing thing I will create is a variable named initialState.

initialState will hold a property named list, which is an array of cat names.

initialState also defines what the initial state looks like for the cat state.

The next variable to create is called actions.

actions is a key value pair object.

The key is the name of the action and the value is the reducer to be executed.

Right below the actions variable, I defined a simple function called addCat.

The name is pretty self explanatory. The function adds the cat name onto the list property in the state.

Creating Redux store file

This file may look scary but it’s not that bad. I’ll go over it step by step.

First, I’m importing Redux libraries, and also the cat reducer file that was created above.

Second, I’m creating a function called createReducer, that glues together the initial state, and the actions, thus creating a reducer.

I used it to create my cat reducer, and then inject into a variable called*rootReducer*.

I then export a new store by using the create store function and supplying it the root reducer with some middleware.

Using combineReducers may be another overkill in this app example but it shows you how to split and add reducers to your Redux store.

Creating the cat name list app

The next file to work on is the App.js file. This file will be responsible to display the UI, allow the user to enter a new cat name, and add it to the Redux store.

If you’re not familiar with React hooks, I highly recommend you read this article that teaches you how they work and how they’re used: React useState.

Moving on, this file is huge. Step by step time again.

The first step here is to import React useState, and the connect function from React Redux library.

Then I’ll create the React component called App.

I’m then exporting the App React component inside the connect function as a HOC (higher order component).

You might be asking, “what does connect do?”

Good question, the connect function let’s a React component latch itself onto the Redux store.

The connect function does not modify the component, but it creates a new component around to pass any state data from the Redux store, and it provides a function called dispatch.

Here’s a kid illustration to visually see how it works.

Redux connect accepts a handful of parameters but I’ll go over the 2 most important ones.

In the example above I’m passing in only the first parameter which Redux calls, mapStateToProps.

mapStateToProps is a function that allows you to pick and choose what Redux store data you want.

In the App.js file, I decided to get all, but you don’t have to.

If the first parameter is provided, then the wrapper component will subscribe to the Redux store.

It acts like a listener to always provide the latest data to the component you’ve created.

If you’d like your app to not subscribe to the store just pass null or undefined as the first parameter.

The second parameter in Redux connect is mapDispatchToProps.

mapDispatchToProps allows you to create custom dispatch functions and pass them to the React component.

Let’s take a look at the input and button section of the React component.

Inside the React component and before the return statement, I’ve create a new useState hook for the cat name.

I’ve also attached setCatName inside the input HTML element for the onChange event.

So whenever a user is typing the new cat name, setCatName will trigger, and update the value of catName.

I’ve also added a button to submit the new cat name on the onClick event.

Inside the onClick event, I’m saying to check if the cat name is empty or not. If it is empty return an alert saying “Cat name cannot be empty!”

If there is a name, I want to trigger the ADD_CAT Redux action by using dispatch, and supply the new cat name value in a property called payload.

payload is a common practice when passing data through dispatch.

It doesn’t have to be called payload, you can call it whatever you want. But the property type, must exist.

Right after the dispatch function, I’m resetting the cat name value to an empty string.

What does dispatch do again??

Yes, dispatch is a function that you only get from Redux connect.

Dispatch allows you trigger actions defined in your reducer files, and it’s the only way to modify the Redux store.

Think of dispatch as the setState of Redux.

The final part to go over in the App.js file is displaying the cat names that I’ve fetch from my Redux store.

Adding Redux store provider component

Finally, the final part to this masterpiece.

In our index.js file I’m going to add the Provider component to the React application, and supply the created store from the store.js file.

The Provider component makes the Redux store available to any nested components that have been wrapped in the connect function.

It’s good practice to make your Provider at the top level, that way your entire React application has access to the Redux store data.

Conclusion

Redux has a lot of boilerplate and moving parts, but once you start understanding it; it just makes more sense on how this state management tool helps manage large projects.

If you have any questions feel free to ask me on Twitter.

Github Source Link

My work setup, what's yours?

Ruben — Fri, 05 Apr 2019 12:45:11 +0000

I feel like you can tell a lot about a person from there desk setup.

I love soccer
I like coffee
My keyboard says gamer but my mouse says productivity??
I'm religious (that's as far as I'll get into that)
Water is a must
I like photography
I use Twitter a lot. A little bit too much.
Rosetta Stone squishy ball for a bit of distraction
I'm both a Windows and a Mac user.
I'm somewhat scattered in my brain
I'm on dev.to so that must mean I'm somewhat of a code nerd :)
I have an air freshener on the right side, so I like a good smelling area
I have gum, so good breath is a must

That was fun, what's your desk setup say about you?

8 easy steps to add Okta authentication to your React app

Ruben — Thu, 04 Apr 2019 15:18:20 +0000

original post @ Linguine Blog

Okta has been growing over 45% year over year since 2017, and it doesn't seem to be slowing down.

Big and small companies are using Okta for their external and internal software tools.

Okta is a user authentication management tool that helps businesses manage their employees software accounts with their company software tools.

For example, let's say I own a cat store and I use Slack, Jira, and Github.

If I hire an engineer, I'll have to create multiple accounts for that specific engineer.

And if that engineer leaves, I'll have to go through each tool and remove that person account. This is a problem.

Instead of doing all that manual work, you can integrate all those software tools to an Okta account and assign an Okta user to a software tool.

That means you can create 1 Okta user to your Okta account, and Okta will handle adding and removing an account for all your software tools that you've integrated with.

The neat part about Okta is that you can implement it to your own internal applications.

In this article I'll go over 8 easy steps to adding Okta authentication to your React application.

Step 1: Create Okta account

First step is to head over to the okta.com and create an account.

You can create a free 30 day trial account to test on. But if you have one already go to step 2.

That’s pretty easy.

You will than receive an email with your log in credentials, and a link to the log in page.

Go ahead and log in, and set your new password.

Step 2: Create an Okta app

Once you’re logged in, you’ll need to head over to the application page.

You can find that under the Application menu tab when you hover over it.

There is also a shortcut link to add a new application on the right side.

But if you’re in the application page then click Add Application next.

Then click on Create New App. It should be a green button on the left hand side.

A popup will be presented, and you’ll need to add the following configuration to fit your React application.

You will than be prompted to add some basic setting configuration about your app.

For the moment you can add your current localhost and port number for for your test app.

Click Save once those are added.

In the bottom page of your Okta app you’ll find your Client ID.

Click on the right button to copy it to your clipboard.

Step 3: Assign user to Okta app

The next step is to assign a user to your Okta app.

If a Okta user is not assigned to that app, they will get denied.

That’s okay too if you want. But at least add yourself!

Go back to the application page and click on the Assign Application button.

Select your application and the user you want to assign it too and click Next.

And click the confirmation button right after.

Step 4: Add trusted origin to Okta

The last configuration that you need to do in your Okta account is to add your trusted origins.

This will make sure we can avoid any CORS issues.

Hover over the Security menu and select the API sub menu item.

The first tab you’ll see in the page is about tokens, but we want to change that to Trusted Origins tab.

And select Add Origin next.

Add the following field values onto the form and click Save.

The boring stuff has been completed. Now the coding begins.

Step 5: Create React app

To keep this example guide simple I’m going to use Create React App tooling to help us get quicker to the important part of this guide.

Let’s create a directory called okta-sample.

Inside our new directory, create a package.json file and add the following.

Now you may install those dependencies by running npm install.

Let’s also create a directory called public and src in the root of the project.

Inside the public directory let’s add an index.html file.

The index.html file will serve as a basic skeleton for the app.

In the src directory, all of your React code will live in there.

Inside src, create 2 files called index.js, and App.js. You’ll also need to add a pages directory inside the src directory.

Go ahead and run npm start. It should boot up a browser window pointed to localhost:3000.

And the web page should blank.

Step 6: Create the index file

In this file we’re doing a handful of actions here.

We’re initializing the Browser router and adding Okta’s Security component.

Which allows you to supply your Okta configurations to your React app.

P.S. don’t hardcode production configurations like in this example.

The issuer property is just the base URL to your Okta page. Don’t forget to add the slash / in the end.

The redirect_uri, and client_id can be grabbed from the Okta application page.

If you’re running your app locally during this step you might see your application broken.

That’s because App.js hasn’t been created or the routes. Let’s do that next.

Step 7: Create App.js file

In this file you’ll see how will put the pieces together.

The first step is to import React, React Router DOM modules called Route, and Link.

Route is going to help us define public routes.

And we’re going to use Link to help us build an easy 2 menu item navigation.

The first link will be pointing to the home page page which is the log in page.

The second link will help you go to the admin dashboard page.

The other important part to this file is the SecureRoute component that is provided by Okta.

This component helps you do the logic whether the user is allowed to enter the pag. This is determined if the user is authenticated or not.

The last important piece to this file is the ImplicitCallback Okta React component.

This component helps handle the response after Okta tells React if the user has successfully signed in or not.

Step 8: Creating the admin dashboard & login page

The admin dashboard will be a file in the pages directory called AdminDashboard.js.

It’s a very simple and plain functional React component.

The next file to create is for our home page. Which will display a sign in button.

In the login importing Okta’s HOC(higher order component) called withAuth.

And I’m wrapping it around the React class component LoginPage.

This will be needed because withAuth provides a

withAuth provides new property to the React component called user auth.

In the example above you can see that I’m using a method called login inside a onClick event for the button.

Inside the componentDidMount lifecycle you can see that I’m testing some of the other functionality that comes with withAuth such as checking if the user is authenticated, and getting the user information.

withAuth also provides other functionality such as:

getIdToken
logout
getAccessToken
handleAuthentication

Conclusion

Congratulations you’ve added Okta authentication to your React application!

Here’s the link to the source code. And if you found it interesting and helpful please give it a start!

Github source link

How to replicate a React component lifecycle with useEffect

Ruben — Thu, 28 Mar 2019 12:18:43 +0000

This article has been moved to Linguine Blog

5 reasons to go with CSS in JS for your next application

Ruben — Tue, 19 Mar 2019 13:31:04 +0000

original post @ Linguine Blog

CSS is awesome, and it’s easy to get started with.

But front-end applications have been scaling at a massive, and complex rate that I don’t believe the current CSS architecture is designed for the job.

I still believe that the current CSS architecture has a place in this crazy world for small sites, and even small applications.

I’m going to list a set of problems that I’ve come across with CSS over the 9 years of developing for the web.

And I believe CSS in JS solves these problems.

I will be demonstrating how CSS in JS solves these issues by using 2 libraries Styled Components and React.

CSS problem #1: Global namespace

I created a style sheet that contains CSS code for a container element.

The container style will increase in size if it also contains the class name home.

Now I have created the home page HTML, imported the stylesheet, and have added the class names to the HTML elements.

But wait, I need an about page! Let’s create that now.

I’ve now created the about HTML page, imported the style sheet, and created a new container element.

Great, right?

Not exactly. The style sheet that I imported contains styles from the home page.

And there is nothing to stop me from using class names that was designed for the home page.

Over time this simple site will grow to have thousands of lines of CSS, and HTML code.

And CSS rules that have been defined in the past will be re-used across the site. The problem lies when a engineer attempts to change a class rule.

It has a very high potential of breaking or changing other parts of the site that were not meant to be modified.

CSS in JS allows us to keep styles encapsulated to a React element.

I’ve created 2 components here.

The first component is named, Title.

Title is responsible only for styling., The second component is Greet.

Greet is responsible using the styled component that I created and displaying the greet message to the user.

Title been defined as a local style. No other React component or HTML element will be able to access these styles. Safe!

CSS problem #2: Implicit dependencies

This is called style of writing SASS/CSS is called BEM. Ever heard of it?

Probably not.

BEM is one of many CSS methodologies. And the objective with a CSS methodology is to reduce the lack of built-in scoping mechanism.

OOCSS is a method to separate containers and content with CSS “objects”.

We also have:

SMACSS
SUITCSS
Atomic

Nonetheless, each of these solutions are just a quick patch solution.

CSS problem #3: Dead code elimination

Why download CSS code that isn’t going to be used?

CSS in JS can dynamically clean up CSS code that is not being used.

CSS problem #4: Minification

CSS out of the box doesn’t have a feature to minify code.

For big applications unminified CSS code can get fairly big, especially with crazy amount of white space (indentation) we add to the stylesheet.

To minify CSS code you’ll have to use a third party service online or setup dev task to minify your code.

Which just creates another dependency your CSS.

CSS problem #5: Sharing constants

CSS supports a sharing constants with their built-in function called var().

But it does not support IE. And it barely supports Edge 15.

We can say, “Microsoft stop support of these browsers.”

But according to W3Schools, which they get 50 million visits per month.

They say 4% comes from IE and Edge.

That’s a total of 2 million users using IE and Edge. Not really numbers that we can ignore.

And with a recent project with Verizon Media, the application needed to support IE 9 still.

So var(), goes right out the door. For the moment.

Another con is that CSS variables cannot be accessed on the server side either.

Let’s take the React example above and modify it a bit to see how we can use constants across our application.

I created a new file named constants.js, and inside that file it contains a value for the primary text color, FireBrick.

I than updated the Greet component to use the new constant I created.

First I imported the new constant into the Greet.js file. Then I use a technique called interpolation inside the Title component.

The hard-coded color value was swapped for the constant.

While I’m at it, I’ll create a new component called Button, and it will use the same constant.

The only difference is that primaryTextColor is now being used in 2 css properties for the Button component.

The components will stay consistent now.

CSS in JS benefits

Besides solving those 5 issues above, it comes with some additional benefits.

Generates minimum CSS requires
Good runtime performance
Supports dynamic styling
Easy to pre-render important CSS

Conclusion

At the end of the day we’re not getting rid of CSS. We’re just adding JavaScript to enhance CSS.

The old CSS architecture is perfectly fine for small sites, and small applications.

But it may not be appropriate choice for medium to big size applications in 2019.

Sure, we can add SASS, methodologies, and even CSS modules into the mix, but again, those are small patches that require strict rules, and tooling.

Those are not solutions for the future.

I would say that CSS in JS is not the ultimate solution, but it’s the best one we have so far.

Let me know your thoughts and comments on Twitter.

Start building React applications with ease

Ruben — Sat, 16 Mar 2019 13:19:05 +0000

original post @ Linguine Blog

React is the new shiny toy in the JavaScript community, and most industries are leaning towards to using that technology.

You may be coming from Angular, jQuery, or even Backbone, and learning a new tool may sound daunting or even scary.

No need to fear, in this article I will go over some easy methods to get a React application started in matter of minutes.

But Before we start, why React though?

Why choose React

Reason #1 to choose React, it’s only a UI builder.

Tools like Angular, and Ember are full blown JavaScript frameworks that require you to do their way.

And that’s okay, but React doesn’t make any assumptions about your application. It doesn’t force you to rewrite your entire app.

Reason #2 to pick React is because it’s component based.

React encapsulates all the CSS, UI, state, and events in a single file OR directory.

It makes it easy for engineers to digest a large code base because it’s in smaller chunks.

Reason #3 to pick React is because is declarative.

It allows you to write declarative views which makes it easy to maintain and debug down the line.

Starting with CDN links

Source to CDN links: https://reactjs.org/docs/cdn-links.html

This is the easiest method to get started.

You just need to import React and React DOM through script tags.

You can then create a JavaScript file begin creating your first React component in plain JavaScript.

The output should look something like this

The next few methods require you to have Node.js installed on your machine.

Once it is installed, NPM command client tool will be available in the terminal.

Starting with Create React App

This is one of the easiest methods to get a new project up and running.

Run the command down below.

NPX comes with NPM 5.2+. NPX allows you not install Create React App on your machine.

I’m calling Create React App to create our project in a directory named, test-app.

Create React App will then download all the dependencies that it comes with.

The video above is from create react app.

Once Create React App has completed installing the dependencies it will then ask you to go into your project directory (via terminal) and execute the following commands.

By running npm start, Create React App development will kick in and open you

Create React App doesn’t just install a few node module dependencies, but it also provides the following:

JSX, ES6, and TypeScript Support
Auto prefixed CSS
Hot reloading for development
A build script to bundle your JavaScript, CSS, and images
Progressive Web App ready

Pretty simple to start with Create React App, but this is just a JavaScript site at the end of the day.

What if you want to build your own personal site, should you use Create React App?

Probably not, because JavaScript sites don’t benefit you in SEO.

You’re going to need something that let’s you build the UI of your website with React and renders it with a server language such as Node.js.

Now we can do this setup manually, but why?

There are plenty of great open source tools out there that do that for us.

Starting with Next.js

Resource link: Next.js

Next.js is my framework of choice to create server side rendered React applications or sites.

Next.js is lightweight, progressive web app ready, and most importantly, SEO friendly.

By the way, this site (blog.linguinecode.com) you’re reading off is using Next.js to power the front-end!

Next.js does require a few more steps but it’s nothing to hard. I’ll walk you through it.

First I created a new directory for my site, and called it test-site.

The next step is to install 3 node module dependencies.

Next
React
React DOM

We briefly spoke about React, and React DOM earlier in this article.

Those 2 libraries will help me create React code and dump it to the DOM.

The next dependency I installed is Next.

Next is what will help me bridge the gap between Node.js and React.

Next.js is responsible to serve your site through server code first, and let JavaScript aka React to handle loading the rest of the site as a user navigates around.

JavaScript is fast, once it’s loaded, so we aid the load speed by letting Node.js do the first load of the site.

The next step is to create a package.json file and add the following lines of code.

The important lines are in the scripts object.

Running npm run dev will spin up development mode.

Running npm run build will build, and optimize the site or application for production.

And running npm run start will run your production build.

Fairly simple, but now I’m going to start adding a couple pages.

This is what a typical Next.js project structure looks like.

The directory pages, is extremely important when using this framework.

That’s because Next.js will look each file inside that directory and create routes based on the file name.

So index.js will represent the front page of the site/application

And about.js will look like:

That’s great but what does the code in each page look like?!

That’s a great question, it’s just a React component.

This is a beautiful thing because Next.js just lets you focus on the UI of your website or application.

There’s another neat little feature that Next.js provides to the developer.

Next.js provides a static method to your React component called getInitialProps.

This static method is only provided in the React components found in the pages directory. No children component have access to this static method.

getIntialProps runs both on server and client side of the application/site.

That’s where you can typcically make fetch calls to API’s. This will help make sure that the page is populated with content before serving it to the user.

In the example above, I’m just returning the isServer variable that’s provided.

It let’s my site know if the page was accessed on the server side or client side.

Conclusion

In this article I go over some of the easiest ways to initialize and get right in coding React applications.

Getting started with React may seem tricky and complicated. But with the enormous amount of support from the community, starting a React app can be matter of minutes.

Introducing the new kid on the block, React hooks

Ruben — Mon, 11 Mar 2019 13:06:52 +0000

Article has been moved to: Getting started with React Hooks

Master the art of React state and props in 5 minutes

Ruben — Thu, 07 Mar 2019 04:19:59 +0000

Originally published @ Linguine Blog

A common newbie question for engineers learning React is, “what’s the difference between props and state?” Or googling “React: props vs state”.

I spent hours trying to understand the difference when I first started, and I came to find out that most articles teach it the wrong the way.

Most articles begin with learning what props means first, and React state second. But I think that’s the wrong way to learn what React state and props are and how they work together.

So we’ll start by learning what React state is first.

React state is

Let’s begin by defining what is React state.

React state is an object.

React state can be private or public to it’s children components.

React state may hold information that influences the output of a React component.

React state in action

The first block of code we see is a simple cat react app. The objective to this cat app is to nail each definition listed above.

Now let’s create our React state.

That’s how easy it was!

But this empty state object is kind of useless until we start adding some data into it.

So we’re going to add a new property (not React component props) to that state object, and will add a couple of JavaScript events to handle adding a new cat name.

Okay, this got complicated real quick! But I’ll break it down for you really easily.

First, our state object has 2 new properties.

nameOfNewCat, will hold the new name for your cat as you’re typing.

cats, is another new property that will hold a list of your cats names.

In our render() method, I’ve added a input tag, and I’ve bind 2 actions to the button, and input tag.

This is important for you to note, because each action (handleChange, and handleAddCatClick) is modifying the state object.

Let’s break the handleChange action so you may understand how to modify state the right way.

Notice how we’re using this.setState(). This is the correct way of modifying any property in a React state object.

In traditional JavaScript, you would typically modify the object directly. But that’s a big no no in practice.

This is because modifying the state directly may create a situation where those modifications may get overwritten and cause inconsistency in the app.

setState, does not modify directly but creates a pending state transition.

Another important thing to note is when you’re updating your React state tree, it only modifies the first level of properties.

Huh??

Look at the example below to see what I mean.

How to update nested state objects with setState()

P.S. the example below is not part of the cat app we’re working on.

From the image above it shows an example of a state object that has properties such as name, age, and likes for dogs and cats.

If you run setState to change the value of name, than React will keep the other values that are defined and only change the name property.

You might think that only modifying a specific property will change and will keep the rest of the values as is. But you’re wrong if you think that.

As shown above, if we update the likes for cats to false. You’ll see that the state object has removed our like for dogs. And we all love dogs!

To keep our like for dogs, we must tell setState that we want to keep our previous nested values.

In ES6, we can do something called the spread operator. And as you see in the final results we keep our love for dogs and change our love for cats.

React state influencing the output

We’ve discussed about what React state is and how to add, and update React state data.

Your next question might be, “how do we display the data we’ve saved in state?”

This is done really easily.

In our cat app, we just need to grab the cats property from your React state object and render some markup for each cat.

In the image above you will be looping through each cat using the .map() array method to create a new li tag that outputs the name of the cat we’ve entered.

The output should look something like this.

So far we’ve built a React cat application that utilizes state to save, and display data.

Now we must understand how React props plays nicely with state.

The definition of React props

Let’s begin by defining what a React prop is.

React props are inputs that describe what we should see.

Above is an example of a plain a text field, and I have inserted an input of type to equal text.

And if I add another input named placeholder, it will make my input field look different to the user.

inputs equal props.

It works the same way with React components. Let’s take a look.

Passing state data as props

In the same file, you can create a new React component called Cat. Cat will expect a prop called name.

You will now update the code in the CatApp component where you’re displaying the list of cat names.

All you’re doing here is passing the cat name that we’ve stored in our state object, and passing it as a prop to the Cat component you’ve created.

The Cat component will then display the input name, and display the name in a list item HTML tag.

Conclusion

Understanding React state and props can seem challenging and some what confusing.

But learning it the right order may help you understand it quicker and better.

State is an object that contains private or public local data about a component. And it may be used to influence the output of a component.

Props are nothing more than input definitions to describe what you are suppose to see.