How to Rewire Your Brain to Learn React

if I had to describe the main job of react to help you make better apps I'd say it provides two things react helps us make components and manage State that's basically it don't be distracted by new bells and whistles like transitions or concurrent mode I'd say 90% of the code you'll write in react will primarily involve components and state and that tells us a lot about what react doesn't do it doesn't handle routing fetching data or validating forms among many other things what react does can be summarized in this one code snippet we use it to create reusable slices of our user interface that manage their own local state this is a very simple point but a lot of beginners never really grasp this fully just by giving us a simple mental model to write components and manage State react opens the door to making very sophisticated projects with JavaScript for those familiar with JavaScript but new to react the concept of the virtual Dom can be confusing react mixes HTML and JavaScript using jsx which may seem odd initially but this combination allows us to focus Less on the Dom and more on the data itself react abstracts the Dom away so you never have to write clunky code like this again the react way involves identifying data that needs to change as state and then changing it to update the UI automatically this is as compared to an app that uses a bunch of of event listeners which make it hard to figure out where our state lives which requires a lot of imperative code to work with browser apis to manually update the Dom when we want our UI to change one big mental shift is understanding how data Flows In react unlike Frameworks like Vue or angular data in react Flows In One Direction from parent to child components any data that lives in your component can't be accessed by the parent components only use its own data or data that's passed down to it as a prop the only way to lift State up to a parent component is by passing it to a callback function from the parent this limitation might seem like a problem with react but it's a huge benefit it requires us to think carefully about how we structure our components and where we place our data if we were building a simple to-do app in react it would likely have a list component a list item component and a form component because data flows down it makes the most sense to manage the state in a parent component that data can flow down to the to-do item component through props functions can also flow down to the form component to add a new to-do to State this one simple design pattern offers a lot of benefits because data flows down it's easy to identify where state is located in our app each component has a well-defined role which makes our apps structure easy to understand when there's an error it's easy to pinpoint which component it originated from and with limited responsibilities components are more reusable across our entire app at first glance hooks seem to add a lot of features to our react components and yeah there's a ton of them but fortunately you can build most applications with only four hooks in total the great benefit of hooks is that they let us separate the behavior of a component from its appearance but you're probably not doing this let's say you're making a simple toggle button you can put all the functionality for that directly in your component but now your component just became a little larger and harder to read to make your components immediately understandable see whether that functionality can be put inside a custom hook with an appropriate name and by separating all your business logic and hooks that same behavior can be imported and used across any component you like react server components are another concept that can be hard to wrap your head around some react Frameworks like nextjs let you run react components on the server this means we can do server stuff in them that weren't possible before with react components running on the server we can do things like query our database and immediately put the data we get in our component which is then sent down to the browser as plain HTML now the downside of server components is that we can't use a lot of react Tools in them we can't use State hooks or event handlers all of that needs to be put in a client component that can only run in the browser server components might seem weird but the great advantage of react components on the server is that they send less JavaScript down to the browser ultimately making your app faster another big upside is that server components can help us use less react hooks for example in not having to use client side hooks to fetch data but also by managing state by putting it in the URL rather than putting it in a state hook so before adding more complexity to the client side of your react app ask yourself whether certain tasks such as working with your database performing some calculation or generating some content can be run on the server with a server component instead rewiring your brain to use react properly can be a real pain so to make this process much easier I've made a complete boot camp to not only help you finally understand react but also give you the practical skills to build amazing react apps yourself you can check that out and get started at react boot camp. thanks for watching and I'll see you in the next video

Channel: Code Bootcamp

Views: 6,752

Keywords:

Id: gjxY0aVdoCY

Length: 5min 45sec (345 seconds)

Published: Tue May 28 2024