React 101 … the basics
Looking for a framework to learn? Well if you haven’t already, React is the framework to learn in 2021, and it showed with it dominating the market in 2020 for programmers. Angular seems to have finally met its match, as it used to be on top but React passed it and isn’t slowing down. Don’t believe me? Check out the job numbers on Indeed where Angular has 650 jobs available now while React is close to 3000 or 4x as many in the Denver Metro area! If that doesn’t grab your attention, I don’t know what will. Now let's jump in!
First, you need to know the fundamentals of HTML, CSS, and JavaScript. Without that, you’re going to be lost from the start. Now to get started you can install three modules:
This way does require a lot of config so there’s a better way the React team created for us:
Just like that! You’re ready to go and will have a file index js which uses es6 imports which is importing a library name into a variable on which you can access all the methods that library has to offer. We also have the app component which stores all our sub-components and all our React and returns JSX which we’ll talk about in a second.
Make sure that you are importing React and React DOM in your JS files as shown here:
Confused about ReactDOM and the ReactDOM render function? Don’t be. Here’s how this works — think of it as taking our HTML file finding element ID root shown below:
But replacing it with everything that’s inside the app as seen here:
Now let’s talk about the component or the base unit of React which is officially defined as a loosely coupled unit but it’s best to think of it simply as a building block that contains both markup and JavaScript logic. Components can also contain other components and will always roll up to the app component. Finally, they must return JSX. This has an HTML-like syntax but you can get flipped to writing JavaScript when you put brackets in. Keep in mind it’s NOT HTML. There are key differences. Because JSX is in real JavaScript, that’s why we need that library webpack. It converts our React components into a single file called bundle js that the browser can actually run.
Let’s now talk about State, a dynamic form of storage that lives inside of our components. Since 2020 the way to create State is with a useState hook:
State is considered dynamic storage because every time a state variable changes or component gets flagged for a potential rerender, React holds a separate Dom representation called the virtual Dom. It then compares it against the real Dom with a reconciliation algorithm to efficiently determine whether the page has to be updated or not and these types of efficient updates make your program run faster! Now let’s talk about another key component of React, known as lifecycle effects. Lifecycle effects are triggered when a component is created, updated, or removed from the page. These can all be managed with the useEffect hook:
the first argument is a function that runs when your component is created on the page. If it runs again depends on the second argument. An easy way to think about it is when one of these triggers changes value then the function will run again. Lastly, we can return a function inside a function that will get run when our component unmounts like shown here:
Now if your application gets really big and you begin to pass state 5 or more components deep you will want to use something to help with that. Look to Redux or React Context. To use React Context all you have to do is create one:
Then wrap your application in a provider:
and access it with the use context hook:
So there you have it! This is in no way a full rundown of React, but it’s a great early intro to the world of React and all that it can offer. Not so scary now is it? React has so much to offer and so much built-in, so jump in and start creating!
