Symfony 3 with ReactJS and Angular

In this series we are going to look at how we can use Symfony 3 as the foundation for a simple Create Read Update Delete (CRUD) application, using Blog Posts as our example data set.

To begin with we will take a quick look at how we can use Twig to very quickly build out the required code and templates to display the appropriate forms, lists / tables, and buttons to make the page(s) behave as expected.

Throughout this series I am going to assume you have either watched the following courses:

Or that you have the equivalent knowledge.

Once we have seen how quickly we can create a CRUD layout when using Symfony with Twig, we will switch up and make things a little more 'modern'.

I mean no disrespect to Twig by this. I frequently use Twig to create smaller scale sites where dynamic elements are either not required at all, or will not be required in this iteration. There are several reasons for this, but it largely comes down to: Simplicity.

The 'problem' with the RESTful API approach is simply that you will likely end up with two codebases to support.

Firstly, you will create your Symfony project with all your API logic, and then secondly, likely a separate project for your Angular, React, Ember, mobile, or whatever front-end you wish to put over your API.

This introduces an additional set of requirements, complications, and potential bugs. Not to mention, you (and / or your team) need to know at least two different languages (PHP, and JavaScript / other) to work this way.

However, this way is "the future".

The good news here is that everything you have learned about Symfony (be it Symfony 2 or Symfony 3) is going to be directly applicable moving forwards.

The tricky part comes in that now you have to work with your data in a format which 'feels' more raw. You will spend your time dealing with JSON representations of your data.

Anyway, enough pre-amble, let's get coding!


# Title Duration
1 Intro with Twig CRUD - List 06:03
2 Twig CRUD - Create 03:25
3 Twig CRUD - Update (Edit) 02:43
4 Twig CRUD - Delete 02:36
5 Simple Symfony 3 RESTful API Setup 05:32
6 API - GET a Single BlogPost 04:51
7 API - GET a Collection of BlogPosts 02:20
8 API - POST to Create New Data 06:30
9 API - PUT and PATCH to Update 04:11
10 API - DELETE 03:34
11 Angular - Setup, Styling, and GET All 09:19
12 Angular - Refactoring 10:23
13 Angular - Create (POST) 06:54
14 Angular - Update (PUT) 08:41
15 Angular - Remove (DELETE) 06:44
16 React - Intro, Setup, and GET all 06:54
17 React - Refactoring 09:14
18 React Router 04:41
19 React - Create (POST) 13:13
20 React - Update (PUT / PATCH) 12:40
21 React - Delete 11:00
22 React - Tidy Up, and Finish 04:14

Share This Course

If you have found this course helpful, please share it.

Presented by

Christopher Moss

Christopher Moss

Hi, I'm Chris and welcome to In this video you will learn about... :)