5 Things to Know Before Starting React ⚛

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 🙇‍♂️

1. JavaScript Array Methods 🥋

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

2. JavaScript ES6 Features

  • 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 Methodconst 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 Literalconst str1 = "Hello, my name is " + name + " and I am " + age + "-years-old."// With Template Literalconst 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 🤔

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
condition && <h1>Hello! This is a JSX Element</h1>

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

5. HTML & CSS

  • 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 🎬

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

BBB Change The Confing For Approve Speed

Using yarn workspaces to consolidate development of several Single Page applications

How and Why I Removed IE11 Support From Our Product

Exploring the what and the why of Redux

https://youtu.be/W4y-FCWQWEc

Someone cares that I messed up

My first TensorFlow.js project

Configure a Responsive Grid Component in a ReactJS Application in 14 Steps

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ricardo Vargas

Ricardo Vargas

More from Medium

Starting in Web Development

How to fetch data from an API and render it into cards using JavaScript

Rick and Morty

My Journey so far as a Full-Stack Developer at Microverse.

A macbook opened to visual studio code, with a CSS code snippet

Day 7 of #100daysofcode