Learn Alpine, Grep and Reactfire

Welcome to this beginner level series on Alpine JS! 👋🏞

Alpine JS is a rugged, minimal framework for composing JavaScript behaviour in your markup. It brings declarative, reactive, data-driven nature of libraries like React or Vue to your HTML templates.

In this series, you will learn about Alpine's handy **directives**. You'll discover how to define a component scope with `x-data`, run code on mount with `x-init`, attach event listeners with `x-on`, display data with `x-text`, decide wether or not to show an element with `x-show`, iterate through data with `x-for`, retrieve a DOM element with `x-ref`, learn how to achieve _two-way data binding_ with `x-model`, and much more.

You'll also learn how **"modifiers"** can be applied and chained to directives to provide additional functionality: control the animation transition of entering and leaving DOM elements, debounce an event listener, etc.

We'll also touch on what Alpine calls **"magic properties"**, which give you access to native browser events (`$event`), reference to DOM elements (`$refs`), and more.

You'll gradually discover Alpine's API and syntax, from building simple tabs to a mini app that fetches a dog picture based on a "breed" search field. 🐶

**Get ready to breathe some fresh air** - it's time to walk into cool, green Alpine pastures! 🏞

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost.

You get to keep your DOM, and sprinkle in behavior as you see fit.

alpine

Sprinkle declarative, reactive behaviour on your HTML with Alpine JS

CMD+F in your text editor can only get you so far! In this course, we will learn to use grep and find, two powerful command-line utilities, to search through and explore our codebase. Learn to search specific files and folders, using regular expressions to look for -- or ignore! -- particular phrases. We'll cover how to search recursively, get more context on your results, and some simple tricks to make your searches faster and more targeted.


Once you're familiar with grep and find, you'll be able to quickly answer questions such as: Do I use this function anywhere other than my tests? Where does this file get imported? Whether you're working on a new feature, reading a codebase for the first time, or refactoring existing code, grep and find can help you work faster and more effectively.

A Unix command used to search files for the occurrence of a string of characters that matches a specified pattern.

grep

Use Grep for Fast Search from the Command Line

Sometimes you'll be looking for a string, but won't know which file it's in; or you'll want to find all usages of it within a directory. Learn how to use grep -r to recursively search all the files in a directory. 

Search directory contents recursively using grep

Learn how to use find to identify filenames matching specified patterns. We'll use find to identify all .jsx files in a directory, or all test files in a directory.

Use find to search for filename patterns

Learn to use git grep to only search through the tracked files in a git repo. This is especially useful when you want to exclude build artifacts or locally installed dependencies, such as webpack bundles or the node_modules directory. You'll also note that git grep is automatically colorized - we'll see how to get the same coloring effect with grep --color.

Search the contents of a git repository with git grep

By default, grep displays the file path and the line where a match is found. Learn to use the flags -A, -B, -C, and -n to get more context, and view line numbers as well as the lines surrounding a pattern match.


Show context around matches using grep

By using wildcards and glob patterns with the special characters . and *, you can create regular expressions that describe what kind of text you're looking for, instead of just plaintext strings. 

Search for basic patterns using grep

Learn to use grep's extended regular expressions to describe more complex patterns. The `?` and `+` special characters describe optional patterns. The `?` character matches zero or one instance of the preceding term, and the `+` character matches one or more instances of the preceding term. To use these characters, you'll need to either escape them with backslashes or turn on extended regular expressions with the `-E` flag.

Use grep's extended regular expressions to find complex patterns

Learn to use the special anchor characters `^` and `$` to indicate the beginning and end of lines when writing regular expressions for grep. These line anchors are part of basic regular expressions in grep, so you don't need to escape them.

Specify line beginning and end in patterns using grep

You can describe classes of characters using bracket expressions. We'll use expressions such as [a-zA-Z] and [0-9] to search for alphabetic and numeric characters with grep.

Match classes of characters using bracket expressions with grep

Describe optional patterns with grep OR using the vertical bar character `|`. By using the `|` special character, you can write either-or style patterns. In this lesson we'll look for matches on "grey" or "gray". Like the `+` and `?` characters, the `|` character is part of extended regular expressions with grep, so you'll either need to escape it with a backslash, or use the -E flag.

Search for optional patterns with grep OR

By grouping your searches with parentheses, you can create even more complex searches. Grouping lets you separate out different parts of your regular expression, and apply special characters like +, ?, and * to groups of search terms.

Search with groups using grep

 Learn the basic syntax for using grep to search the contents of a single file or files. It's like CMD+F, but better! You'll be able to quickly see all matching results in a file.

Search the contents of files using grep

Learn to use the xargs Unix command to combine find and grep. First we can use find to identify which files we want to search; then we can use xargs to tell grep which files to search through.

Search matching files by combining find and grep with xargs

What happens when you want to find things that don't contain a pattern? The -v flag lets you use grep in inverse mode. We'll use grep -v against find's output to exclude files in node_modules.


Find matches excluding a pattern with grep

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

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

React and Firebase with ReactFire

In this lesson, we’ll use `grep` to find text patterns. We’ll also go over some of the flags that `grep` has that can be combined together to make it more powerful and easier to read.

Search for Text with `grep`

jq is a lightweight and flexible command-line JSON processor.

In this lesson, we'll apply our `jq` skills and write a script that gets a list of dependencies from package.json and greps for usages of every package. If a package is unused, it's marked for removal. 

Use jq and grep to Find Unused Dependencies in a Project

When you have a bunch of text to sift through, standard Unix command line utilities like `grep`, `sed`, `awk`, `cut`, `sort`, and `uniq` can help extract the information you want. For example, with a git log for a project, you might want to group commits by day in order to see which days you're most productive, or find out how many commits you made last year. In this lesson, you'll learn how to combine these commands with the pipe operator to extract this data from git logs.

Analyze Git Logs with the Command Line

In this lesson, we define a "count" state value with the `x-data` directive provided by Alpine JS. This defines a new scoped component, which can have access to this state.

We then display the "count" value in our HTML with the `x-text` directive, which updates an element's `innerText` value.

We also hook up buttons with click event listeners with `x-on:click`, which allows us to modify the count value as desired.

Update a count state value with the x-on event listener directive in Alpine JS

In this lesson, we create a set of tabs with Alpine JS, where only the content of the currently active tab is visible. To do this, we define an `activeTab` state value with `x-data. We then wire up our buttons to change the value of `activeTab` on click, and use `x-show` to determine if the tab content should be visible or not, based on the value of `activeTab`.

We also take control of the `class` attribute with `x-bind`, and we conditionally output an "active" class based on, you guessed it, the value of `activeTab`.

Topics

Instructors

Content Type

Free or Pro