I didn't start by learning React, or Vue, I learned everything incrementally over years and the things I learned early on are a foundation for learning new things. My goal is to give you an introduction to ReactJS by building on ideas you may already be familiar with. This post isn't a replacement for a course on React or the React Quick Start documentation, but it is intended to help you to understand those resources even better and make you ready for them. This post will also be useful if you're coming back to React after a period of not touching it, and just wanting a refresher.
- What is React JS?
- Declarative vs imperative
- What is a component?
- What is state?
- What are props?
- How to continue your learning
The terms components, declarative, and state may be hazy or unfamiliar to you, that's okay I'll explain each.
The more complexity and interactions you need to build, this code gets cumbersome, and messy, because you have to consciously think about every combination of interactions a user can make and how they affect each other.
This is a really simple example, but already we're in a situation where we have to create 2 variables for 2 buttons, add click handlers, then increment/decrement the count based on which gets clicked and update the output text. It's getting verbose, and we have duplicate code for setting the output text. We could refactor that into a single function or make "The count is at:" a string variable so we only have 1 place to update it. Now in small projects this is completely fine, but as projects grow in complexity it gets harder and harder to maintain and reason about your code.
Programming declaratively means instead of telling the computer what to do, you write code that describes the desired output or result, and let the computer figure out how to produce that result. Stating what the HTML should look like in each state of your UI based on the variables you have. This way of programming becomes significantly more useful the more UI elements and different pieces of state you need your UI elements to handle.
Here's that same example of an increment and decrement number counter done in React.
Without any prior React experience you can probably already intuit a bit of what this code does even if you don't understand how to write it. The const is our count variable, there's code that looks like our HTML, the buttons even have
onClick events that just increase or decrease the count variable.
.innerHTML here or
.textContent? By taking that responsibility off your shoulders that allows you to write more concise, reusable and maintainable code.
There are some key differences between HTML and JSX that you should know. HTML doesn't require every element to be closed
<img src="">, JSX does,
A React component is a reusable piece of code that describes the structure, and behavior of a part of a user interface in a web app or website. Components are abstractions that make writing and describing complicated structures in your code easier. For me personally, what helps is relating them to what I already know.
React components are similar to an HTML element, to use them you write HTML- like code, with a beginning and ending tag, or make them self-closing. They have attributes - in React components we call these props (properties).
Components are reusable, so you can have multiple separate instances of the component on the page. Each instance can be different, have different props making them look or function differently. This is also similar to passing field values in HubSpot modules.
They usually have a base visual styling so a button for example looks like a button anywhere you use it without you having to re-style each instance individually.
So a component called
MyButton, literally may include the button HTML element, and have some special classes added to it.
Unlike HubSpot Modules, React components can be nested inside other React components. While you can create say a button component, you can also place that button inside of say an alert box so it can close the alert. That alert box could be inside of the content component of your UI, and that content component could be inside of another component for your full app.
In React, state is an object that represents the current condition of an individual component at a given point in time and determines how it should render and behave. You can think of it as all of the variables needed within a component to make it function.
For example, if you have a slider component there is 1 obvious piece of state needed to display the slider correctly: Which slide is currently selected/shown.
Actions a user takes within the slider component such as clicking the next or previous buttons will change which slide is selected, but if the slider is only one part of a page/app then the other components in the page don't need to know what slide is currently selected.
The magic of React - how it gets it's name - is that changes to the state of a component, trigger the component to re-render. That means when the state object gets updated, React re-calculates what the component's HTML should be and efficiently does all of the DOM manipulation for you.
If you want an action to happen based on a user's interaction, you use event handlers like
onClick, but you change a component's state and write the component to handle for if the state is different, you don't touch the DOM with your code. If the first time you write a React component you have to rewrite a lot of it, don't beat yourself up. In my experience this declarative way of working takes a bit of getting used to. It requires a little bit of a mindset shift, and the only way to get it to really click, is to try and build something. Once it clicks for you it will open up a whole new way of development for you.
We talked about how props are like attributes on HTML elements. They are a way to pass variables from parent components to child components.
What I'm hoping you've gotten out of this so far is an understanding of React's core concepts so that when you see other React educational content your eyes won't glaze over when the concepts come up. Now that you have some foundational knowledge the best way to really make this sink in is to build something.
Maybe this was a lot of information to digest, and you need a break today, but at least put it on your calendar for tomorrow, "20 minutes of React". In the description of that calendar event you're going to paste the link for a React tutorial. To start I encourage you to do the React Quick Start, and actually build along with it, you are ready, you can spend 20 minutes doing anything. If you don't complete it in one go, put another 20 minute event on your calendar for the next day. It's not about completing it fast, it's about making progress and putting what you learn into practice so it sticks.
Once you've done the React Quick Start here's my recommendation - come up with something to build that's your own idea. You will hit some roadblocks, but the React docs are there to help you. You can always also look back at the React Quick Start, your old code, and this article. If you are still stuck try searching the web or Stack Overflow. If you still come up empty, work on another part of your project and come back to it later.