5 Things to Know Before Starting React ⚛

For a beginner web developer, it can be confusing (and even scary 👻) to learn something new, especially after learning HTML, CSS, and JavaScript. When starting my web development journey, I was hesitant to learn React. How much do I need to know? What if I waste my time and end up going back to basics?

most people

Why use React?

• 😀 Reusable pieces of code (Components)
• ⚡️ Fast and Lightweight
• 😳 JSX Language is very similar to HTML and JavaScript
• 🚫 No need to manually create HTML elements (React is declarative)
• 😎 Makes your life easier compared to using Vanilla JavaScript

What you should know before learning React 🙇‍♂️

After spending months of trying to become a master of HTML, CSS and JavaScript, I finally decided it was time to jump into React. Now having had experience with React, these are 5 things that I believe every beginner should know before learning React.

1. JavaScript Array Methods 🥋

One of Reacts best features is its reusable components. A lot of the time, you’ll want the data you’re working with to reuse some components to nicely render information to the UI (e.g. data that comes in array of objects coming from an API). Other times, you’ll want to manipulate the incoming data to fit your needs. This is where Array Methods come in.

Some commonly used Array Methods:

• Array.map() (most commonly used with reusable components)
• Array.filter()
• Array.find() and Array.findIndex()
• Array.reduce()
• And more!

You don’t need to learn and memorize all of the Array Methods, but knowing how to work with the most common ones will aid in learning others!

2. JavaScript ES6 Features

ES6 refers to version 6 of the ECMA Script programming language (ECMA Script is the standardized name for JavaScript). It introduced a lot of new features into JavaScript but these are the main ones you should know for React:

• Arrow functions for in-line and one-line functions in your JSX (for things like click and blur events). Used in combination with Array Methods as well.

const nums = [5, 10, 15]
// Arrow function combined with Array Method
const sum = nums.reduce((prevNum, currNum) => prevNum + currNum, 0)
// Using in JSX
<button onClick={() => executeFunction()}>Submit</button>

• Template Literals for writing clean strings and conditionally rendering CSS classes

const name = 'Bob'
const age = 25
// Without Template Literal
const str1 = "Hello, my name is " + name + " and I am " + age + "-years-old."
// With Template Literal
const str2 = `Hello, my name is ${name} and I am ${age}-years-old.

• Destructuring objects and arrays can make your code look a lot cleaner, especially when working with React props and React hooks.

const { id, name } = objectName
const [ age, birthday ] = arrayName

• Promises and/or Async/Await to work with asynchronous code like fetching data from an API
• The Spread Operator (…) to spread array items (not to be confused with the Rest operator). Can be used to merge to arrays into one.

3. Logical Operators for Short-circuiting 🤔

Logical Operators are commonly used in if-else statements, but they’re also used to conditionally render JSX in React.

const userAge = 23
// 'statement' will either evaluate to false or the string
const statement = userAge > 21 && "You are old enough to drink!"
console.log(statement)
// Prints "You are old enough to drink!" in this case

In order to return the string on the right, the condition on the left must be true. If the condition on the left is false, the expression will short-circuit and return false, never evaluating the condition on the right. In this case, it will return the string on the right because the statement on the left is true.

Short-circuiting also happens with the or || logical operator. If the first condition is true, then the rest won’t be evaluated and the expression as a whole is true.

When it comes to React, we use short-circuiting to conditionally render JSX elements like so:

condition && <h1>Hello! This is a JSX Element</h1>

If condition is true, then the JSX element will render. If the condition is false, then the expression will short-circuit and the JSX element will not be rendered.

4. JavaScript ES6 Classes and the ‘this’ keyword 🙆‍♂️

In React, there are class and functional components. Although Functional components are more commonly used today, class components are still used and understanding them can prepare you for when you eventually encounter them. Therefore, knowing about classes is important before venturing into the React world.

This was not included in point #2 because it needed its own somewhat long explanation.

A class is simply a template of an object. Classes make it easy to create objects and these classes can include methods (a method is just a function that is a property of an object). With classes, comes the this keyword, which is complex in itself.

The this keyword confuses a lot of developers so do not fret if you don’t fully grasp it right away. Practice, practice, practice.

5. HTML & CSS

Knowing the most commonly used HTML tags and the difference between div and section or p and span and when, why, and how to use one over the other and knowing how to structure your page is important as it helps you create accessible websites and makes writing CSS easier. You’ll be using the following most of the time:

• CSS Box Model (Margin, Border, Padding, Content)
• CSS Flexbox and/or Grid
• CSS selectors (combining elements, classes, id’s, and basic pseudo selectors)
• Common HTML tags and their attributes (h1–6, p, ul, li, input, img, a, etc.)
• Semantic HTML tags (section, form, table, article, etc.)

Wrap-up 🎬

These 5 things might seem like a lot and you might feel overwhelmed when reading about it, but the more you practice and repeat, the faster it will stick and the easier it will be. You don’t need to be an expert at HTML, CSS, and JavaScript to get started with React. Knowing these 5 things will make learning React feel easy. 🙂