The beginning of your journey to become a React Master
When I first met react, a few years ago, it was hard to me to be satisfied with the project/code architectures I was handling and the practices I was following. That’s because in that time, as a developer, I never paid attention to the why just to the what, so that kind of thinking made me use React just because fashion. Today I understand better, why people should use or not React and I wrote some questions to help understand people that is meeting this technology today.
Why should I ever need to know the reason of using it? You can of course just use it like everybody else and blindly believe that is better to use it because it’s just cool and because all the “pros” use it. The thing is that every tool has pros and cons, and not knowing what a tool essentially was made for could potentially maximize the cons. For example, if we use React without even knowing what’s the Virtual DOM we’re probably making our application re-render in vane. This rule applies to any tool/technology, not only React. The fact of being aware of what’s happening behind all the toys we use is one of the thing that make us one step closer of being a software engineer rather than a software developer.
Let’s get to the point, here are all the good stuff I have for you:
First time meeting React:
Read: Yes, React is taking over front-end development. The question is why.
Answer the following questions:
- What’s React?
- What are the main design concepts of it?
- What’s a component?
- What’s Virtual DOM? What’s React’s reconciliation?
- Why do we prefer to use Virtual DOM instead of the normal DOM?
- What’s the difference between React and ReactDOM? Are those the same?
Read: Build with React: JSX Tutorial
Answer the following questions:
- What’s JSX?
- Why we use JSX?
- Do we need JSX?
Code: Facebook React’s complete tutorial
Answer the following questions:
- What’re props? Are they re-writable?
- What’re pure functions? In what things React need to implement pure functions?
- Why do we use JavaScript classes instead functions?
- What’s React state?
- What’s the difference between a prop and a state?
- What’s a controlled component? When should I you them?
- What’s the life cycle of React? Which life cycle methods do you know?
Read: HOCs (High-Order Components)
- What’s a HOC?
- In which cases should I create a HOC?
Why React, why no other?
Read: 7 Reasons why you should use React
Exercise:
- make a simple TODO list app with react + webpack (using ES6 features)
- make the exactly same app using create-react-app CLI
- do it again with next.js
What tool is better? When should I use each tool?
Hope this post help you becoming a better programmer! Any feedback is welcome.