 Resources from Elijah Manor in 2024

In this collection of lessons we will create a developer dashboard in the terminal using react-blessed and react-blessed-contrib. We will discuss various ways to layout the dashboard, show how to change fonts, style with colors, and position text within each widget. Then we will shift focus on creating some widgets to display developer content such as an interactive time log, a pomodoro timer, displaying recent commits, currently running docker containers, and more. Once you know the basics you can create a widget of your own to add to the dashboard.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Build a Terminal Dashboard with React

You can’t be everywhere at once. Neither can node packages. But with a utility called npx — included in npm v5.2 and later — you can interact and run with node modules even if they’re not downloaded locally. The same is true for gists and remote branches of GitHub. As long as npm installed, your work can be wherever you are.

This course from Elijah Manor unlocks the power of the npx utility. Over 17 minutes, we will examine the npx package runner and look through various scenarios where the tool is helpful when running node packages from the command line. You’ll learn to use npm to:

- test out various versions of a package
- run packages without globally installing
- run code directly from GitHub
- make working with packages much easier

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

Execute npm Package Binaries with the npx Package Runner

Previously, in order to add state or side-effects in React you had to create a Class Component. However, with the introduction of the Hooks proposal (currently pre-released), you can now add state and effects to a Function Component. In addition, you can extract your hook logic and create a custom hook that can be shared across your app.

As I introduce the concepts of React hooks, I'll apply those concepts in various demos to see how they apply in different scenarios. I'll be converting Class Components to Function Components so you can see how they relate to each-other.

By the end of this course, you'll learn how to:

- Run (and Skip) side-effects with the useEffect hook
- Write a custom hook to share logic in your app
- Simplify the Context API with the useContext hook
- Update state with dispatch actions using the useReducer hook 
- Optimize Components with useMemo

Reusable State and Effects with React Hooks

In this course we will introduce the topic of using npm scripts as a build tool. We will start simple and then continue to build a small website as we introduce new topics. By the end of the course, you'll know how to get started and what tools and techniques are needed for you to create your own set of build scripts.

How to Use npm Scripts as Your Build Tool

In this course we start by getting your environment setup for hooks and then we’ll introduce the idea of adding state to a function component and unpacking several ways to interact with that state.

There are a few rules that you need to follow when you start using hooks, but thankfully there's a custom ESLint plugin that’ll help enforce these rules. I’ll show how to setup the hooks plugin and talk about some of the rules that should be followed.

Things get more interesting and involved once we introduce side-effects to our function component with the useEffect hook. We’ll uncover numerous things to consider while using this particular hook.

One of the cool features of hooks is that it’s easy to abstract out code for reuse with custom hooks. The React community has already created lots of custom hooks that you can start playing with today.

Once I've introduced the main concepts of useState and useEffect, I'll start to unpack other hooks such as useRef, useReducer, useContext, useMemo, and useCallback.

Introduction to Reusable State and Effects with React Hooks

A lot of the power behind npm scripts is creating custom scripts that are outside the basic set that npm natively understands. In this lesson we will install the ESLint node package, create a new eslint npm script, briefly discuss about environment variables and how npm knows where to find your binary, and then execute our custom script from the command line.

Create a custom npm script

Often times you’ll have variations that you’ll want to make to your npm scripts and repeating yourself is inefficient and verbose. Instead you can create a base script and pass arguments into it from another script.

Pass arguments to npm scripts

In this lesson we will look at pulling out complex npm script logic into an external JavaScript file. Instead of writing bash scripts you can leverage your JavaScript abilities to automate your build process. We’ll use some helper node modules such as shelljs, opn-cli, and babel-cli. 

Create a node script to replace a complex npm script

In addition to package.json level variables (such as name and version), you can have custom conf settings that can be used in your npm scripts. These config values can be overridden outside of the package.json by using the npm config set command if necessary.

Use custom config settings in your npm scripts

In this lesson we will examine two common scripts (start and test) that npm natively understands. We’ll define these scripts for our existing repository and show how you can run the scripts from the terminal.

Run the basic npm scripts

After creating several npm script it becomes useful to run multiple scripts back-to-back in series. This is a nice feature because you can enforce that one script needs to complete before starting another one.

Run npm scripts in series

In an effort to bypass saving temporary build files you can leverage piping and output redirection to streamline your build process. In addition using these technique can speed up your build process.

Pipe data from one npm script to another

In this lesson we will look about how we can integrate with git hooks to help enforce a certain level of quality before you either commit your code or push to a remote repository.

Run npm scripts with git hooks

There are times when it is helpful for a npm script to have lots of logs when trying to debug a problem, but there are other times when you want to run a script silently. Thankfully there are a range of flags to control the log level used when running npm scripts.

Change the level of console output when running npm scripts

In this lesson we will look at different ways you can list the available npm scripts. Whether we want to pipe `npm run` through `less` or install an npm package such as `completion` or `ntl`, we have many options to quickly execute scripts with shell tab completion.

List available npm scripts and support tab completion

A technique you might use once you start having lots of npm scripts is to use a node package that allows you to define your scripts in an external package-scripts.js file. By pulling out your scripts it can help with organization, enable better comments, provide shortcuts, and more.

Pull out npm scripts into another file with p-s

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. This ends up simplifying your package.json file and abstracts the complexity into another file.

Create a bash script to replace a complex npm script

In this lesson we will run a set of scripts that are grouped together with a wildcard using the npm-run-all node package. Using this technique can help you simplify and organize your scripts.

Run a set of similar npm scripts with a wildcard

Running multiple scripts in series or in parallel can become very verbose. Using a tool such as npm-run-all can help reduce the amount of overhead you have to type in order to get the same behavior.

Use a shorthand syntax for running multiple npm scripts with npm-run-all

In this lesson we will show that you can leverage values that you already have provided in your package.json file such as the name and version keys. You may want to use these in your npm scripts as you create folders and file names.

Use package.json variables in npm scripts

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Not only can you provide default values when using ES6 parameter object destructuring, but you can also require the presence of certain properties

Topics

Instructors

Content Type

Elijah Manor