Expert-led, hands-on React Training Courses for Developer Teams.

React Background

The React (aka React.js) library allows developers to build web and mobile applications that are large, dynamic, and complex while also being robust, performant, and easy to reason about. As of 2016, it is the fastest growing area of JavaScript.

React is being used widely in production in Instagram, Facebook, and Facebook Messenger. More companies, each month, are adopting it as the view layer for their applications.

More About React

React is the hot library of 2015.  React came out of Facebook’s struggle to get the Like Button count to work well.  When people would push it, it was hard to get the like count right.  React offers a new (and faster way) to create data-driven interactive user interfaces.  It is actually used in production for hundreds of millions of users (Instagram/Facebook) so even though it’s new, it has been thoroughly ‘battle tested’.

Like jQuery and Angular, React is another tool in the JavaScript tool belt. Some engineers would argue React is the best tool ever produced in the JavaScript tool belt, due to its robustness, simplicity, and elegance. (Think moving from screwdriver to power drill). It is the second fastest growing JS framework at the moment, and will likely be the number one JS library within 12 months.

The React Learning Curve

The Community

While your initial interest in learning React, you’ll stumble upon what’s the hardest part about learning React. This post compares between AngularJS and React in difference learning the framework. If you’re used to Angular, you’ll definitely feel a bit hesitant to start learning React. You’ll also hear about using webpack with React. Webpack seems to be the least favorable part when learning React according to this online thread. Webpack is different from task runners as such as Grunt or Gulp, which analyzes your project’s structure to bundle and pack them together for the browser. Webpack looks through all of your project’s dependencies and processes them using loaders and generates it to bundled JavaScript file. While webpack definitely helps when developing project with React, configuring webpack can be a challenge, just know that you’re not alone!

Here’s one of React’s inventor’s Pete Hunt talking about how React came about and why the best practices are how they are:

The Curious Monkey

As technology advances every day, everyone has the desire to learn and try out new tech stack. After hearing in a blog, from peers, or just randomly came across it, curiosity builds into you. React is a recent JavaScript framework developed by Facebook and growing in popularity fast. Curiosity leads to reading the documentation and learning basics of the framework. Document is fairly clear and gives you confidence and some basic knowledge of the framework. The excitement of learning something new to add it to your skill can give even more motivation.

Reading through online resources will give you good understanding of how data binding and React’s state works. This is the confidence booster and easy to learn phase.

When learning any new technology, learning and creating your own simple “Hello World” project is always good place to start. The initial start brings more curiosity to dig deeper and learn how to pass data from one component to another component. Reading and learning about React’s prop and finding it’s fairly easy to understand is great confidence booster. As with learning anything new, you know that there will be some challenges you’ll have to endure.

When writing code that you think it’s correct and doesn’t work definitely lowers your confidence, but when you figure out what you coded wrong and fix it to render what you want, you gain your confidence back. You start to think “AH HA!”, I’m kind of getting hang of this. Trial and error is definitely only way to learn the components, state, and props.

Gravity Doesn’t Lie

Reading documentations and blog posts about basic React concepts can give basic idea how to start building something with React from scratch. As everyone know, once something goes up, it must come back down as well. Instead of using pre-made React templates, you open up your IDE or any other coding resources online, and decide to build simple React application. This can be the challenging and most motivating part to do. Everyone has that little fear inside when opening a blank text file because it questions where to even start.

React Training For Teams Logo

JSX

While reading some React documentations and blog posts, you learn that JSX isn’t required but it’s easier and better practice to use it. Many online code editors as such as codepen automatically compiles the code from JSX to JavaScript for you as long as you update your JavaScript preprocessor to babel and add React and ReactDOM framework library as dependency.

You know that in back of your mind, online code editors are great but you need to learn how to build an application in real text editor. The idea of setting up React and JSX to JavaScript compiler gives a bit of uncomfortableness and can be discouraging. Although it seems fairly simple, this part of learning React can be challenging.

JSX isn’t HTML. JSX is an inline markup that looks like HTML and with compiler, it transforms into JavaScript. It’s a declarative syntax that’s used to express the virtual DOM and only the changes and updates rewrites to DOM. This actually makes rendering with JSX in React very fast. This is one advantage of using JSX when learning and developing with React.

Because there are different JSX to JavaScript compilers out there, hardest part is choosing which one to use. Next, the actual compiling JSX into JavaScript takes a bit of work. Reading couple online documents and blogs can help setting it up correctly. Rendering simple “Hello World” to show up in webpage can be the greatest feeling when taking time to learn React.

Where’s the Magic?

With React basics all set up, it’s time to create something. As with learning many other new technologies, we can build a simple TODO application. Feeling a bit nervous and worried is okay. We all have to go through it in order to learn and improve ourselves. One thing to remember when learning anything new is that frustration is bound to happen. Important thing is to persevere through it and don’t give up. React has no magic happening like AngularJS. The application is built how you want it to function, so many of functionality is built by your own custom methods.

React has no ng-repeat, ng-if, or any other good stuffs AngularJS provides for you. In order to render each value in list of array, you can use native JavaScript function map to iterate and return the data.

 

The Routing

It’s major accomplishment learning how components, state, and prop all unfolds together. Now, maybe it’s time to take it to another level and create some routes in your TODO app. The biggest challenge with React routing is understanding the linking between components in components and learning to keep UI in sync with URL. But through good documentation, getting hang of React routing is only time. Having a module already built in for us to use and learning how the module works gives us great advantage. Reading through documentations and trying out couple examples will give some confidence boost learning React routing. Until actually writing the code and checking to see if the routing is working correctly, it’s truly hard to understand how it all works.

Only View

While learning React, the most frustrating part may be that React is the only the V (View) component in traditional MVC framework. Due to this reason, many people use either Flux or Redux with React. Flux is also developed by Facebook to build client-side applications. It complements React’s components by aiding unidirectional data flow. Redux helps writing JavaScript by having a predictable state container and helps run in different environments. Redux has been more favorable and is more popular use by developers.

AJAX

React does not have built in AJAX handling without Redux or Flux. This is another part of React that is inconvenient. React not having a built in AJAX handling has many developers questioned just like this thread. You’re not alone asking this question. Luckily there are many easy JavaScript libraries out there to handle AJAX. The easiest is to use jQuery with React if you ever need to have AJAX handling. It seems a bit waste to have whole jQuery library to only handle AJAX calls, but there are no other way since React has no built in AJAX handling.

Event Listeners

When using JSX with React, event handlers are different from regular HTML. With JSX, events get automatically delegated to the root React node. It attaches the single event handler on the root node that will handle all your events so you do not have to worry about event delegation. This helps the application by not having to worry about infinitely growing memory consumption.

The Initial Take Off

With much of React learning covered all there left is building the application adding all puzzles together. This is the phase where you start to feel good and feeling you’re not a beginner anymore. Modularizing components, handling AJAX calls to bind to your state or pass through props, compiling the JSX into JavaScript, setting up your routing and most importantly seeing all of codes written rendering. The fun you have writing code slowly builds up with React. This in my opinion has to be one of the best feeling. You started out so lost and unconfident, but now you’re able to weave through obstacles you had in beginning and can’t stop until you finish building the component. The confidence to learn new fast-growing technology and building something you want with it is a great reward for yourself.

The Blast Off
Learning and building an application with React will give you plenty of confidence boost. Learning one of hottest new JavaScript framework that not everyone know about is not an easy task to do. Recall all the ups and downs you had while learning React. Remember and cherish these moments because it’s special moments. You will only know how it really feels when you learned React, and you’re not in the majority. You know the pain and dedication you needed to put in order to have an outcome. This is phase where you look back and remind yourself, “I am capable to learn something new out of scratch” and feel really good. Remember the confidence you had in the beginning? All the researching and reading good things got you all pumped up? Well now you’re not translucent anymore and now actually know how to build an application with React. This is the real climax. But always remember keep learning!

code line break

Our React Training Courses

business

Expert-led 

Our instructors are JavaScript experts with experience building and scaling production applications.

coding (1)

Hands-on

Developers learn best through coding and building. Our courses are at least 65% hands-on. No death by powerpoint here.

graphic-designer-tools

Customized

All content and labs are designed for each specific course and group of students.

code line break

React Training Course Offerings

React has a quickly evolving ecosystem and our training course offerings are constantly updated to reflect this. We currently offer the following React training courses: