Learn Flexbox, React-router and React-storybook

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

Get Started with Flexbox CSS Layouts

This playlist covers various aspects of CSS including different rules, selectors, and patterns

CSS Tips and Tricks

React Router v4 takes an entirely new approach to routing and handling URLs in your React applications. It fully embraces the concept of declarative programming and a component based development process. In practice, this turns out to be very nice and gives you a routing solution that is less configuration heavy than many previous solutions.

In this course, you will learn about the basics of React Router v4 to help you get started. We will look at the core components that React Router supplies and how they interact together to create a robust routing solution for your React applications.

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

Add routing to React apps using React Router v4

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

Flexbox Fundamentals

React Router is the defacto router for any React application and it allows us to extract the state of our application from the browser's address bar.

In this course we'll explore the core features of React Router in common examples.  From routing with individual components to more complex routing consisting of multiple components, query-strings, route parameters,  and redirects.  

Getting Started with React Router v3

React Router v4 doesn’t require a lot of configuration to run. The core examples will run out of the box with Create React App. In this lesson, you will create an application and get React Router v4 up and running.

_**note**: in this video `react-router-dom` is installed with the `--save-dev` flag. This is **not required and may cause issues if used**. Simply install it with `npm install react-router-dom` and it will function as expected._

Run the React Router v4 Examples with Create React App

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.

Create Basic Routes with the React Router v4 BrowserRouter

setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.

React Router: setRouteWillLeaveHook

React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router

Integrate react-router with Preact

IndexRoute allows us to define a default child component to be rendered at a specific route when no other sub-route is available.

React Router: IndexRoute

Demystifying alignment in flexbox children

We can use regular expressions to more precisely define the paths to our routes in React Router v4.

Use Regular Expressions with Routes with React Router v4

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

Using Flexbox in Websites and Applications

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

Defining dimensions on flexbox children using flex-basis

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

In this lesson we'll look at hashHistory which uses a hash hack to track our route changes vs browserHistory which delivers clean urls, but requires server work to implement

React Router: hashHistory vs browserHistory

Since react-router routes are components, creating nested routes is as simple as making one route a child of another in JSX.  In this lesson we'll explore nesting routes and accessing the children of parent routes.

React Router: Nested Routes

A router library is no good if we have to hardcode every single route in our application.  In this lesson we look at how to access variables in our routes and pass them into our components.

React Router: Route Parameters

In this lesson we'll learn how to render multiple component children from a single route.

Topics

Instructors

Content Type

Free or Pro