Back Button Vue

Do You React?

While Laracasts is dedicated to PHP and Laravel, the reality is that most of us need to write JavaScript daily as well. In this series, we'll learn about React - not the PHP version, but the JavaScript library, from the folks at Facebook. I think you'll love it!

Advanced
Difficulty
10 episodes
1:25:24 hrs
Start Series
    1. Run Time 5:10 Free

      Before we start learning, give me a few moments to demonstrate how natural and intuitive React really is.

    2. Run Time 4:31 Free

      Now that you've had a short teaser, let's hit the brakes and start from scratch. We'll pull in React, and build the obligatory "Hello World" component.

    3. Run Time 3:20 Free

      You'll likely need to pass data into your various components. We do so with "props." I'll show you.

    4. Let's take a short break, and figure out how we can take our inline React code, and transition that to a dedicated external script. In the process, we'll discuss some options for quickly booting up a server.

    5. Run Time 10:35 Free

      Let's return to that simple idea of a counter, and reproduce it with basic jQuery. As we'll find, the process is deceptively simple. Sure, it's fewer lines, but if you're not careful, you'll end up with a massive application.js file, full of countless DOM queries.

    6. Before we move up to some higher level concepts, let's take the next two videos to build little toy projects to ease into the flow of using React.

      View the source for this lesson on GitHub.

    7. Run Time 17:20

      For our next demo project, let's create a simple app that allows a person to type in a GitHub username, and then see a link to that user's most recent Gist. This will give us the opportunity to review a few new important concepts.

    8. Already, we have three script tags for our components. In a real-life application, this could easily become dozens of scripts. Clearly, that's not the way to go. Instead, we'll leverage both Browserify and Gulp.

      Review the Gulp sourcefiles for this episode on GitHub.

    9. Run Time 16:04

      Refs offer us a way to reference and access components in our applications.

    10. In this short episode, we'll review the support service, "Helpful", that Laracasts uses to see a real-life example of React components at work. In the process, we'll learn about Chrome's React extension.

You May Also Enjoy...

Here are some additional series that may be up your alley.

Vue Laravel and the Front-end
Beginner
Difficulty

Let's take a break from the back-end, and instead focus on that other world: the front-end! Don't worry, Laravel 5 has made this process as enjoyable...

49:57 mins
Play
Vue The Vast World of Vue.js 0.12
Intermediate
Difficulty

Vue.js is the best JavaScript framework that you've likely never heard of. We've already covered React here at Laracasts, so let's move on to somethin...

3:08:08 hrs
Play
Vue Painless Builds With Elixir
Intermediate
Difficulty

Laravel Elixir takes the yawn out of writing your Gulpfiles. Why spends hundreds of lines writing what can be accomplished with just a few?

1:37:02 hrs
Play
Vue Modern CSS Workflow
Intermediate
Difficulty

The way we construct and think of CSS has changed drastically in the last ten years. In this series, we'll review key tools in every modern frontender...

1:41:11 hrs
Play
Vue Learn Flexbox Through Examples
Intermediate
Difficulty

Flexbox is easily one of the most important additions to CSS in the last decade. The only problem is that there's a bit of a learning curve. Trust me,...

1:12:25 hrs
Play
Vue Learn Vue 2: Step By Step
Intermediate
Difficulty

Vue is easily one of the most exciting additions to the front-end world in many years. With its intuitive API, and the fact that it can be applied to...

7:43:06 hrs
Play