React is a declarative, efficient, and flexible JavaScript library for building Single Page Application(SPA). It allows you to create front-end applications through the creation of reusable, decoupled and testable components.
To get some ideas of what you can build with React, check out:
- https://react.rocks/
- http://builtwithreact.io/
- http://facebook.github.io/react-native/showcase.html (React Native also uses the same syntax and patterns as React for building mobile applications)
- https://facebook.github.io/react-vr/ (React VR also uses the same syntax and patterns as React for building VR applications!)
React allows you to build interactive/dynamic UI in declarative style.
Demo: Simple page (without React vs with React)
Problems with direct DOM manipulation with JavaScript:
- Imperative. We have to specify line by line what the HTML should look like, and our javascript code is tightly coupled to the HTML layout (e.g. i need to get the second paragraph to do xyz)
- The tight coupling leads to unexpected breaking changes. If somebody adds a paragraph to the top of the html page, our javascript code with break
- Imperative style is awkward and verbose. we have to reach inside the DOM, get the node, change the node in javascript, and then stick it back in the DOM.
- Not unit-testable
- Difficult to modularize. As this app grows, the javascript/HTML file is likely to grow longer and longer.
Benefits with React approach in this demo:
- Declarative. We declare (using JSX) what the HTML should look like and React makes it so!
- Only 1 line of HTML!
- Ability to use javascript logic makes code less verbose
- Easy to unit-test
- Easy to modularize
- Easy to read ==> Easy to scale and maintain
When working with React, you will undoubtedly face new and scary jargon. An important way to learn and be effective with React is to:
- Understand its building blocks (e.g. JSX, components,
props,state, etc) - Build on what you have learnt about JavaScript (functions, classes, ES6 syntax, static methods, modules, etc.). Make sure you know those JavaScript fundamental.
- Build applications with React.
To start with, you can follow this official React Getting Started Guide (Recommendation: Work through tutorial up through till 'Thinking in React')
- The React Course by Flavio Copes
- Pure React by Dave Ceddia
- Full Stack React by Tyler McGinnis
- Mastering React by Mosh Hamedani
- Frontend Armory
- React sandbox and Stack Blitz are useful for trying out React snippets online.