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.
- 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
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
<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
Components) and a single custom Tag named
<h1>Our Application</h1> <Subscribe></Subscribe> <main>Some content that spans lots of lines goes here...</main> <Subscribe></Subscribe>
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.
Complete the React Tutorial: An Overview and Walkthrough by Tania Rascia.
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.
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.