Subscribe to newsletter to receive news about discounted courses and more:

close

It's time to learn React.js

WEB DEVELOPMENT

With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!

Are you a React beginner? This React tutorial will explain everything in simple terms and plain English so you don’t feel overwhelmed or frustrated while learning React.

Together, we will build “Catch of the Day” — a real-time app for a trendy seafood market where price and quantity available are variable and can change at a moment's notice. We will build a menu, an order form, and an inventory management area where authorized users can immediately update product details.

What is React?


React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.

One of it's unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.

It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

What Will I Learn?


  • How to build an entire App or Website Component in React.js from start to finish.

  • Working with create-react-app for Webpack Tooling

  • Understanding React Components and writing markup with JSX

  • Maintain your Application's State

  • Communication between components

  • Working with State and HTML5 LocalStorage

  • Real time web socket data with Firebase

  • Creating maintainable code with JavaScript Modules

  • URL routing with React Router 4

  • Taking advantage of new ES6 Features

  • Deploying React Applications

  • + So much more — Check below for a full listing of videos

Who is this for?


Anyone looking to modernize their front end development skill set. If you are already an experienced JavaScript developer, you will simply complete the course a little more quickly.

  • Developers reliant on jQuery who want to improve how they build with JavaScript

  • Angular, Ember or Backbone developers looking to grok how React works

  • PHP & WordPress Developers - React tends to jive well with those who are used to PHP as it was built for Facebook

  • Developers looking to add interactive or real time pieces to existing websites

  • Anyone who wants to get better at JavaScript and learns well from seeing both fundamental and advanced concepts in practice

 

Fast Learning Curve


React is very a simple and lightweight library that only deals with the view layer. It is not a beast like other MV* frameworks such as Angular or Ember. Any Javascript developer can understand the basics and start developing an awesome web application after only a couple of days reading tutorial.

As the React guide says ‘Thinking in React’ may be a little different than you used to since it brings a new approach to the table, but it will become much easier and natural as you gain experience with it.

 

React Native


Learning React comes with a bonus: React Native. React is not a ‘write once run anywhere library’, as the creators says, it’s a ‘learn once write anywhere’ library. Yes, you can write native apps for Android and iOS using React Native. Although you will not be able to use the exact same code you wrote for web, you will be able to use the same methodology and the same architecture.

How does the Virtual DOM work?


Imagine you had an object that you modeled around a person. It had every relevant property a person could possibly have, and mirrored the persons current state. This is basically what React does with the DOM.

Now think about if you took that object and made some changes. Added a mustache, some sweet biceps and Steve Buscemi eyes. In React-land, when we apply these changes, two things take place. First, React runs a "diffing" algorithm, which identifies what has changed. The second step is reconciliation, where it updates the DOM with the results of diff.

The way React works, rather than taking the real person and rebuilding them from the ground up, it would only change the face and the arms. This means that if you had text in an input and a render took place, as long as the input's parent node wasn't scheduled for reconciliation, the text would stay undisturbed.

Because React is using a fake DOM and not a real one, it also opens up a fun new possibility. We can render that fake DOM on the server, and boom, server side React views.

react js

Subscribe and stay on track

Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.

mail