 Resources from Rory Smith in 2024

React Transition Group gives you the power to transition React components in and out of the DOM, depending on the state they’re tied to, with no weird hacks. Without React Transition Group, you may find yourself using a lot of `display: none` in your CSS, along with some pretty nasty `setTimeout` hacks. But with it, you can write your transition elements with a neat, declarative, all-new API — and no hacks in sight. 

You’ll get to explore v2 of the API in this course, as Rory Smith shows you how to use the React Transition Group library to write seamless, performant, beautiful transitions of elements in and out of the DOM. (i.e. no more jumping from state to state without warning.)

You’ll learn the features of React Transition Group in depth, so that you can turn features of your React app from dull and boring to slick and seamless.

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

Create Smooth, Performant Transitions with React Transition Group v2

In this course, we are going to learn about the CSS Grid Layout. The Grid Layout is a feature in CSS available in modern browsers.

CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.

We’ll discuss all the features CSS Grid has to offer us, and how we can apply these features to real world layout-based obstacles. We’ll start with placing items on a grid by using grid-column and grid-row and progress to more complex topics such as nesting grids within grids.

Cascading Style Sheets bring order and beauty to our applications.

Build Complex Layouts with CSS Grid Layout

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Let's write some example data and render it to our page with `v-for`, and then see how we can use the same directive to render the same component multiple times.

Render lists of data in Vue with v-for

We can use named grid lines to describe our grid layout. Let’s see how to apply this to our `grid-template-columns` and `grid-template-rows`, and how to refer to these from our grid items.

Describe a grid layout using named grid lines

It’s possible to position a grid item anywhere on a grid track. To do this, let’s specify some `grid-template-columns` and `grid-template-rows`, and to the grid items, we’ll pass `grid-column` and `grid-row` some numeric values.

Place grid items on a grid using grid-column and grid-row

It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with `grid-gap`.

Specify a grid gutter size with grid-gap

What happens if our grid items are in implicitly created tracks? Let’s learn how to handle the situation in which we may not have accounted for grid items to show.

Specify the sizes of implicitly created grid tracks

We can change the automatic behaviour of what order our grid items appear. We can even re-order the items in our grid to fill available space using the `dense` keyword. How do we approach this using `grid-auto-flow`?

Change the auto-placement behaviour of grid items with grid-auto-flow

Using the `grid` shorthand property, we can set all of the explicit grid properties (`grid-template-rows`, `grid-template-columns`, and `grid-template-areas`), all the implicit grid properties (`grid-auto-rows`, `grid-auto-columns`, and `grid-auto-flow`), and the gutter properties (`grid-column-gap` and `grid-row-gap`) in a single declaration.

Specify many grid properties at once with the grid shorthand

A grid item can also be a grid container! Let’s see how to specify a grid within a grid.

Nest a grid within a grid

We’ll discuss the `display` values pertinent to CSS Grid Layout – `grid`, `inline-grid`, and `subgrid`. Then, let’s jump in at the deep end by putting together a simple grid layout in a flash.

**CSS Grid Layout will not work unless upgrading**
The Grid Layout is a new feature in CSS coming in [Firefox 52](https://hacks.mozilla.org/2017/03/firefox-52-introducing-web-assembly-css-grid-and-the-grid-inspector/) and [Chrome 57](https://developers.google.com/web/updates/2017/03/nic57).

Another option to enable the Grid Layout is to enable the `Experimental Web Platform features` flag in `chrome://`.

Get up and running with CSS Grid Layout

There’s an unfamiliar `fr` unit pertinent to CSS Grid, which allows us to specify a fractional unit of space. Let’s see how to apply it.

Refer to fractions of available space with the fr unit

We can describe the nature of a grid in an ‘ASCII-art’ way with `grid-template-areas`. Let’s see how to specify the nature of our grid so that it’s instantly recognisable to anyone else what our layout is going to look like.

Describe a grid layout using grid-template-areas

Using `minmax()` is an amazingly useful way to specify boundaries for the smallest and largest size a grid track can be. Let’s find out how to apply it.

Use the minmax function to specify dynamically-sized tracks

We can use the `repeat()` function if we have repeating specifications for columns and rows. With the `minmax()` function, we can define a size range for our grid items. Let’s see how to apply these properties, and how it affects the behaviour of our grid layout.

Use the repeat function to efficiently write grid-template values

What about the situation in which we aren’t specifying the number of columns or rows to be repeated? There are two properties we can use in this situation; `auto-fill` and `auto-fit`. We’ll explore what each one does and why we would need to use them on our grid-tracks.

Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def

As with flex items, we can set an `order` value on grid items. Let’s see how this affects the DOM and the appearance of our grid.

Re-order the appearance of grid items using the order property

We can specify grid columns, rows, and areas in one property using the `grid-template` shorthand.

Specify grid columns, rows, and areas at once with the grid-template shorthand

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

Let's split our changes into separate commits. We'll be able to check over our changes before staging them all from the terminal. Then, we'll see the positive effect it has on our commit history.

Use git add --patch for better commit history and mitigating bugs

Let's see how to apply both scoped and global styles to components in our project, and why we need to use the `scoped` attribute.

Use Scoped CSS in Vue



Components are one of the most powerful features of Vue. Let's take a look at how to write our first components and make use of them in a parent component.

Topics

Instructors

Content Type

Rory Smith