 Resources from Elijah Manor in 2022

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

In order to make text a bit more interesting in a `react-blessed` terminal app, we'll use the `figlet` node module to spice up our text with a bit of fancy ASCII Art. We'll define an array of various fonts and iterate through them every second as we experiment with this feature.

Change text font with `figlet` inside a `react-blessed` Application

Currently most of the code for our React Terminal Dashboard is all in one big file. This can become a problem as we continue to build the dashboard as it can hard to managed. So, we'll move out each section of our dashboard (which is just one at the moment) into their own React component. Along the way, we'll refactor a useEffect/setTimeout to leverage the useInterval custom hook.

Extract a `react-blessed` Component and Add the `useInterval` Hook

In this lesson we will be adding weather information to our `react-blessed` Terminal Dashboard using the `weather-js` node module. This module uses an error-first callback style API, but we'll convert it to a promise with `util.promisify` so that we can use it via `async`/`await`.

Fetch the current weather with `weather-js` and display in `react-blessed`

While extracting a custom useRequest hook from our Terminal React Dashboard we encounter a run-away useEffect bug. As a result we introduce the [stop-runaway-react-effects](https://github.com/kentcdodds/stop-runaway-react-effects) tool to help detect the bug and then fix the it with useMemo and then the [use-deep-compare-effect](https://github.com/kentcdodds/use-deep-compare-effect) hook.

Extract a custom useRequest hook to simplify fetching data in a react-blessed Application

The text in our terminal node app is a bit boring at the moment. This lessons introduces the [`chalk`](https://npm.im/chalk) and [`gradient-string`](https://npm.im/gradient-string) modules to bring a bit of color to the application. You could manually use [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code) to style text, but using a helper library like `chalk` or `gradient-string` makes the task much simpler. 

Change text color with `chalk` and `gradient-string` inside `react-blessed`

In this lesson we focus on ways to position text inside a `react-blessed` `<box>` element. Instead of using a multiline template literal, we use `<text>` elements and provide props of `top`, `right`, and `left` to align content within its container.

Position and Align Text inside a `react-blessed` <box> Element

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

The ability to natively format dates and times using the browser is impressive. You may find yourself not needed to grab libraries such as moment.js or date-fns when doing simple formatting and better yet, the browser support is surprisingly good!

Natively Format JavaScript Dates and Times

When needing to format a number I've tended to lean towards [Number.prototype.toFixed()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed), reach for a 3rd party library, or write custom functions. However, with modern browsers, there's a lot of really interesting native capabilities you could start using with [Number.prototype.toLocaleString()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)or [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).

Natively Format JavaScript Numbers

Bite-size video tutorials for badass web developers.

egghead

In this lesson we create a full-screen percentage based layout using `react-blessed`. We start with a Today component, extract out a common Box component, then start adding placeholder components in the terminal using positions via percents.

Create a Full-Screen Dashboard in `react-blessed` using a Percentage Based Layout

In this lesson we convert a full-screen layout to use the `react-blessed-contrib` Grid component. Instead of using percents to position our components, we can build our layout by placing our components inside a 12 by 12 grid.