React was developed at Facebook and focuses on the 'View' aspect of MVC in web applications. React was built for the purpose of developing applications that are large in nature and have to deal with time changing data.
Learn how to design and build React components
Learn how to reuse and nest components.
Learn how to create your own style with CSS.
How to work with Real-time database Firebase 2 & 3
How to architect and build your application with Flux design in mind using Alt.
How to connect front-end with real-time back-end.
Authenticate user with Facebook popup.
Home page listing all products in real-time.
Page to create/edit a product.
Navbar showing Popup menu and User profile.
Getting data from Real-time database from Firebase.
Voting function for products.
Commenting function for products.
You should understand basic of HTML and CSS.
Basic understand of how State and Props works in React. Check my ReactJS for Newbies course.
You want to learn ReactJS :)
Really enjoying this so far. Thanks Leo. Hope there will be more !
Thank you Leo! this is really fun, building a real app!
Miriam Esp Jorrin
Thank you so much Leo! I really enjoyed the course, looking forward for more courses like this!!
Thanks a lot Leo !! this course helped me a lot to learn React basics, but I just wondered why not using Redux, which would help a lot more heap of sheep in a modern dev env. Leo, Could you please update this with Redux ?
Great course! You will learn a lot, and most importantly, you will build something!
It's such a chance to have in one single course the awesomeness of ES6, React JS, Flux and Firebase. Definitely love it. Thanks Leo!
This is good course with ES6 and alt(flux) features. With all features and hands on practice. I learn a lot. Thank you
I really enjoyed this course as you put together a lot of missing pieces for me for building React applications. I appreciated that Leo used ES6 features and helped strengthen my knowledge in Actions and Stores for the Flux architecture. I also liked how he tried to keep it as simple as possible and built and refactored everything from the ground up. I just have one small suggestion to add a production deployment section! An excellent course otherwise!
Task 1: Build basic project
We start off this project by creating a general folder structure for our application. You will be learning how to setup the develop environment to work with ReactJS ES6.
Task 2: Home Page
In this task, we’re going to create the home page. So the first thing we want to do is to create a HomePage component. As we’re going to create a mock up with dummy data at first, we need some images and stylesheet for that.
Task 3: Create Product
In the previous task, we created the HomePage component and everything working as expected but the code looks a bit mess and there are few parts that we can break into smaller component that we can reuse in later stage. Let say if we want to...
Task 4: Navbar
In this task, we’re going add the Navbar to the Home page. So we have a textbox for searching on the left hand side, logo in the middle and the Login link on the right hand side.
Task 5: Login Popup
In the last task, we created the base Popup component. In this task, we’re going to apply that to create the LoginPopup component but first, let make some changes to the Navbar so we can control when to show and when to hide the Popup.
Task 6: Post Popup
In this task, we’re going to create a Popup having a form for user to fill in and then submit a new product. We also want to add our popup to the Navbar and make some style changes.
Task 7: Profile Menu
In this task, we’re going to create the ProfileMenu component so when user logged in, on the right hand side of the Navbar, we should display user’s avatar and if we click on it, there will be a menu with two options: Profile and Logout. You will...
Task 8: Product Popup
In this task, we’re going to create the basic ProductPopup component so when users click on the Product Name, there will be a popup showing details of that product including all discussion about it.
Task 9: Working with Firebase
From this task, we will be working with back-end and I will show you how we can connect our front-end with a back-end framework or technology. The back-end framework we’re going to use in this course is Firebase. I’m going to show you how to...
Task 10: Flux
In this task, we're going to talk about Flux architecture and a few of other libraries that make our lives would be easier when working with Flux. Among those, I piked up Alt as it’s lightweight and support ES6. I’ve been working with Alt for a...
Task 11: Dynamic Products
At the moment, we’re working with data on the server but they are just dummy data that we imported from JSON file. We need a way for user to post new product from client to server. To do that, we first need to create new action to work with...
Task 12: Voting function
In this task, we’re going to create the voting function so user can vote for a product by clicking on the vote button on the Home page or open a Product, and vote from here. Of course, they can vote once only.
Task 13: Comments
In this task, we’ll be working on adding comments and displaying list of comments. So in our ProductPopup, we can type comment for a product and immediately, without refreshing the page.