This essay was inspired by a course on Udemy: Complete React Developer in 2019
Before we learn anything about React, we must figure out one concept: Why does it exist? More specifically, what problem does it solve?
Most developers learn libraries and frameworks without knowing the benefits of them. Don't be like most people, use your brain, you can think on your own.
The Birth of React
Today, React has become the most popular front-end tool with the most job demand across the world, being used by very large companies like Airbnb, Uber, Netflix, Twitter, Reddit, Pinterest, Wicks, Paypal, Stripe, Tumblr and Walmart.
What makes React great?
- Don't touch the DOM, I'll do it.
React is a "declarative" way to manipulate the DOM. By sending it a big JS object, which contains all the inforamtion about what the page should look like, React do all the dirty staff for us. It reduces the complexity of the building process, improves the code quality and saves time. React is smart enough to react to whatever we tell it to do, as well as adjust itself accordingly to any change that happen inside our app.
- Build website like lego blocks
One "lego block"(component, as a class or a function) takes in some props as inputs and produces an html-like code block that can be rendered into a UI component.
Notes: you can install React Developer Tools into your google chrome as an extension to make your like as a react developer a lot more easier.
- Unidirectional Data Flow(One way data flow)
React creates a Virtual Dom and use it to look and modify the Actual Dom for us. For example, as soon as any state change, React will update the Actual Dom. During this process, the data only flow one way, from state inside this component, through Virtual DOM, to Actual DOM, no way back. This one way data flow is a restriction of React, which makes React app fast and easy to debug.
- UI, the rest is up to you.
React only builds to User Interface for us, and any other feature we want need to be added by ourselves. Besides, React is also known as "Learn Once, Write Anywhere", which means that React has the ability to across platforms, such as React Native, React 360, React Blessed, Electron and React Desktop.
That's why we need those two libraries: React(core of React) and React-DOM(only interact with DOM).
How to be a great react developer?
- Decide on Components: How do we break down the app into different components.
- Decide the State and where it lives
- What changes when state changes: Which part of Virtual DOM rerenders when state changes.
- Thanks for reading!