Reflexbox is part of Rebass UI React components. These components are built for styled systems like Emotion, that we are using in this series. We are going to use just the Reflexbox part of Rebass, and Reflexbox is - "Ergonomic, responsive React layout and grid system" - as it's written in their documentation.

We are using it so that we don't need to polute our Next.js pages with unnecessary CSS just to layout our components. But you can of course use Reflexbox even inside your components, if you really need and want to. 

As you will see Reflexbox is very powerfull and flexible, and can be used on any React based project that uses styled system.

In this episode we are going to learn how to layout your React components using Reflexbox.

Layouts With Reflexbox

There are a few lifecycle methods that you can use in React. These methods will fire in certain parts of the lifecycle of your component. In this episode we are going to cover the most used methods, namely: `componentDidMOunt`, `componentDidUpdate` and `componentWillUnmount` and as an extra we are also going to take a look at the `getSnapshotBeforeUpdate` which ties in with `componentDidUpdate` method. As you will see.

In this episode we are going to go through the most used React lifecycle methods.

Lifecycle Methods

Now we are going to do the same thing we did in the [previous episode](https://watch-learn.com/react-2020/state-and-event-handling), but instead of using class component, we are going to be using functional component, and since functional components don't have state like class components we are going to learn how to use Hooks to bring the state to our functional component.

In this episode we are going to take a look at the useState hook, so that we can add state to our functional components.

useState Hook

In this episode we are going to learn how to use React properly, and not like in the [last epsiode](https://watch-learn.com/react-2020/why-and-stuff-we-will-not-be-doing), where I've showed you how to add React to an already existing web site. No, today we are going to install setup React using `create react app` command. This is very easy as you will see.

Once we do that, we are going to go into the meat of this lesson and we are going to talk about Components and Props, which can be considered build blocks of React applications.

In this episode we are going to talk about components and props, the building block of React applications.

Components and Props

In this episode we are going to create a modal system for our WordPress site, and then I'm going to show you how you can use Blade components to make your code nicer to look at, and also make it much more flexible so that our modals can be very easy to use later on.

In this episode of Sage is Awesome we are going to take a look at another Blade feature called components and how it can help you with your WordPress development.

Components

The field we are going to be creating is going to show us if the vehicles are available or not on our Vue.js frontend. I'm also going to show you how to create v-if condition without using any HTML elements in our Vue template.

In this episode we are going to create a new field in OctoberCMS and then display it in our Vue application.

Availability

We are also going to create a Vue component specifically for displaying a single vehicle in our Vue application. And also I'm going to show you how to add image relation and how to configure your routes for displaying images in October CMS backend using a bit of PHP.

In this episode we are going to add an image and price fields to our vehicles on our October CMS backend. And then display them in our Vue app.

Vehicle API

For this we are first going to have to modify our select component so that it would emit selected value to the parent component. And then we will create an action in our Vuex store, that action will filter our vehicles by location. And then we will also change our Vehicle List component a bit so that we can see filtered results on the frontend.

In this episode we are going to leverage the data we created in the last episode, to filter our vehicles by location using Vue.

Filtering By Location

Since everything should be a component in Vue we are first going to create a navigation bar, using Tailwind CSS of course. 

Once that is done we are going to start building our reservation form, which is going to be center point of our homepage, and also a pretty significant part of our Vue application.

In this episode we are finally going to start building our October CMS and Vue.js application, and of course we are starting with the homepage.

Tutorials tagged with: components

Get in touch