How much JavaScript do I need to know before learning React?

What is React?

React is a JavaScript library for building user interfaces, particularly for web applications. React gained its popularity because of its simplicity, performance, and reusability. React follows a component-based architecture, where the user interface is divided into small, reusable components.

These components can be composed together to build complex user interfaces. You can think of the components as building blocks that you can mix and match to create any kind of website you can imagine. Whether it's a button, a form, a navigation, or a whole section of a page, React lets you build it with ease.

One of React's secret weapons is the Virtual Document Object Model (DOM). Instead of directly changing what you see on the screen, React works behind the scenes with a virtual version of the DOM. It can compare the state of the real DOM with the Virtual DOM and trigger rerendering when it's needed. React tracks which components have changed and can update only them, without having to rerender the entire page. The Virtual DOM allows React to make updates super fast and keep your website running smoothly, even when things get complicated.

Another cool thing about React is JSX. Even though JSX isn't exclusive to React, React was the framework/library that it was meant to use it. JSX, short for JavaScript XML, is an extension to the JavaScript syntax that allows developers to write HTML-like code directly within JavaScript, making it easier to define UI components and their structure. This special way of writing code makes building websites more pleasant for developers by basically merging HTML, CSS, and JS in one file/component. With JSX, you can describe what you want your website to look like in a way that's easy to understand and work with.

Here is an example of a JSX element:

const jsxElement = (
   <div className="jsx-wrapper">
       <h2>This is an JSX Element</h2>
   </div>
);

One of the biggest problems that React is trying to solve is dynamic page updates. These updates are achieved by React's Reactivity (you can probably figure out where the library name comes from, lol). React uses special variables called state variables that allow React to determine when a component needs to be updated. By modifying these variables, React looks for a list of dependencies and updates all the necessary UI parts.

Here you can see the classic example with the count incremention.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Each time the button is pressed, the count is incremented by 1 and the component is re-rendered.

How much JavaScript do I need to know before learning React?

Before diving into React, it's important to have a basic understanding of JavaScript. Knowing some key concepts like variables, functions, objects, arrays, conditions, and DOM manipulation is essential before stepping into React. These basics provide a foundation to understand React's syntax and concepts.

If you are an experienced JavaScript developer or you have used other front-end frameworks, you can just start learning React without hesitation. Revise some basic skills if you think it's needed and start watching tutorials and reading the React Documentation.

Important JavaScript concepts needed for React

• Variables - differences between var, let, const
• Data types - string, number, object, array
• Conditions - if, else
• Functions - body, arguments, return statement, callback functions
• Loops - forEach, map, reduce, filter
• DOM manipulation / DOM Events
• ES6 - arrow functions, array methods, object destruction, modules import & export
• Promises - Fetch API, promise chaining and/or async - await

Conclusion

Learning JavaScript before React is important because JavaScript is the foundation of React. It helps you understand how React works and makes it easier to learn React's concepts. When you know JavaScript, you can manipulate data, control how programs run, and use modern JavaScript features, which are all important for working with React. Plus, learning JavaScript first opens up more opportunities in web development beyond just React. Ultimately, getting good at JavaScript sets you up for success not only in React but in other areas too.