Reading React Application Code

Introduction

When reading the code, how to distinguish between Javascript and ReactJS in a React JS application?

JavaScript and React can seem quite intermingled when you’re looking at a React application’s code, because React is a library written in JavaScript and it uses JavaScript heavily. However, there are some specific syntax and patterns that can help you distinguish between the two.

Here are some hints:

JavaScript:

• Basic language constructs like variables, loops, conditionals (if-else, switch), functions, classes, and array methods like map(), filter(), reduce() are all JavaScript.

• Promises and async/await are part of JavaScript for handling asynchronous code.

• console.log() and other console methods are JavaScript.

• ES6 features like arrow functions, template literals, destructuring, default parameters, spread and rest operators, are all part of JavaScript.

React:

• The import React from 'react' statement at the beginning of many files is a telltale sign of React.

• JSX syntax, which looks like HTML embedded in your JavaScript, is a React-specific extension of JavaScript.

• React component definitions, either as a function or a class, are React-specific. They often include methods like render(), componentDidMount(), etc. (in class components) or useState(), useEffect() etc. (in function components using hooks).

• Any code involving “props” or “state” is typically React.

• Anything using React.createContext, Context.Provider, Context.Consumer is React Context API.

So when you see JSX, components, props, state, hooks, context, and lifecycle methods, you’re looking at React code. When you see variables, conditionals, loops, functions, promises, and other JavaScript constructs without any of the React-specific things, you’re likely looking at JavaScript code.

It’s worth noting that in the modern JavaScript development environment, you might see other things like import/export syntax (import {...} from '...', export default ...), which are part of JavaScript Modules, and often used in React applications.

In summary, distinguishing between JavaScript and React in a React application largely comes down to recognizing the specific patterns, structures, and APIs that React introduces on top of JavaScript.

Sure, let’s try to illustrate some concepts without using any React-specific code.

1. Component-based design: In React, we structure our UI into components. We can also structure our JavaScript code into functions or classes which are similar to components.

1
2
3
4
5

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"

In this example, the greet function could be seen as a “component” that takes a “prop” name.

2. State: In React, we often use the useState hook to store state in our components. We can use variables to store state in JavaScript.

1
2
3
4
5
6
7
8
9

let counter = 0;

function increment() {
    counter++;
    console.log(counter);
}

increment(); // 1
increment(); // 2

Here, counter is our state. We have a function increment that updates our state.

3. Passing data down (Props): In React, we pass data to child components via props. In JavaScript, we can pass data to functions.

1
2
3
4
5
6

function computeArea(length, width) {
    return length * width;
}

let area = computeArea(5, 10);
console.log(area); // 50

In this example, length and width are similar to React props.

4. Raising events up: In React, we often pass functions down to child components which they can call to notify the parent component of events. We can pass functions to other functions in JavaScript.

1
2
3
4
5
6
7

function askQuestion(question, callback) {
    let response = `You asked: ${question}. I don't know.`;
    callback(response);
}

askQuestion('What is the meaning of life?', console.log); 
// "You asked: What is the meaning of life?. I don't know."

In this example, the console.log function is passed down to the askQuestion function and is called when the askQuestion function wants to “raise an event up”.

Please note that these examples are greatly simplified to illustrate the concepts, and React brings a lot more to the table. But the core concepts are rooted in basic JavaScript, and understanding them can greatly aid in understanding React.