What you need to know to get started with React Copy
Introduction
Welcome to the React.JS course. Before diving into the technical nitty-gritty of React, let’s talk a little bit about the history of this popular JavaScript library.
In 2013, React.JS was introduced by Facebook, as a JavaScript library for creating and managing complex user interfaces. It does this by breaking up the interface into independent, composable and reusable chunks of code called Components, which have their own private memory (called the State). Components can be rendered inside the Browser, in the server or through a mobile app (when using React Native) depending on the choice and requirements of the application.
On top of that, React uses a Declarative programming style and abstracts all of the DOM manipulation methods away from us. Creating DOM elements, adding Event Listeners and updating the DOM accordingly can be done in a simpler and much easier fashion in contrast to the standard JavaScript DOM API.
Learning Objectives
- How to build a react component.
- How to render a react component.
- What is Babel? Why do we need it?
- functional component vs class components
- What is props
- what is state, why do we need a state? and how to update the state.
- react lifecycle
- nested react components.
- what is jsx?
- react virtual DOM.
- How React components handle user events.
- conditional Rendering.
- One way binding concept.
- revise import, export and classes concepts (es6 module)
Watch the selected part (up to 04:45) of this next video by Mosh Hamedani in which he talks about the history of React and the concepts of Components and the VirtualDOM.
React, Components and the VirtualDOM in a nutshell by Mosh Hamedani
How does React manage all this complexity and abstracts away the DOM API?
When working with HTML, each element or section of the interface is composed of multiple nested HTML elements. For example, let’s say we want to have a Subscription section:
<section class="subscribe">
<h2>Subscribe to our Newsletter</h2>
<hr>
<p class="suscribe--info">Get whenever the latest release of our newsletter directly to your mailbox</p>
<button class="subscribe--action">Subscribe</button>
</section>
Whenever we want to re-use this element in different pages or parts of a page, we need to copy and paste whole chunks of code, bloating our HTML code. Worse than that, whenever we want to update this element in some way we need to search through our codebase, find the recurring element and update it in multiple places, a process that is tedious, and most of all, highly error-prone. Is this breaking the D.R.Y. (Don’t Repeat Yourself) principle? Absolutely!
Facing the problems mentioned above, Facebook engineers came up with the brilliant idea of transforming these recurring chunks of code that belong to a single User Interface (UI), into custom HTML Tags called Components. Instead of repeating the same code again and again, it is being abstracted away and placed in a separate file, and a single custom Tag name is used instead, whenever we want the code to appear on our HTML pages.
For example, the previous code can now be placed in a separated file named Subscribe.js (React uses JavaScript to create Components) and a single custom Tag named Subscribe or Subscription can be used in its place, in any page and in any parts of our page. All relevant, element-specific code, including HTML, CSS, media assets and JavaScript, will be placed in a single separate file. Ingenious!
<h1>Our Application</h1>
<Subscribe></Subscribe>
<main>Some content that spans lots of lines goes here...</main>
<Subscribe></Subscribe>
React takes a rather radical approach and introduces a new language which unifies HTML, CSS and JavaScript: JSX, short for JavaScriptXML. React developers can write their code in JSX and a special compiler called Babel.JS will transform their code back into HTML, CSS and JavaScript which the browsers can parse and display. A more conservative approach would be to use React with plain old JavaScript, but a lot of the benefits that come along with this powerful new language will be lost.
The reactive part of React comes into play when we bind (connect/sync) specific data to our interface. Whenever this data gets updated, the accompanying DOM elements get automatically updated.
Study: An Overview and Walkthrough
Complete the React Tutorial: An Overview and Walkthrough by Tania Rascia.
Study: Learn React on Scrimba
Complete the Learn React for free series of interactive screencasts at Scrimba.com. To complete the course you must spend around 6 to 7 hours watching the screencasts and and about three times this time to practice and write the code yourself and test it on your local enviroment.
Study: React Guide
Hungry for more React? Dive into the step-by-step official guide. This course will help you crystalize the fundamental concepts of React and write some more code. Remember: 20% theory, 80% code.