JavaScript, HTML, and ReactJS: Understanding the Parts

• The core programming language you'll use in React development.
• Handles the logic and interactivity of your web application.
• You can write JavaScript code in both .js and .jsx files.
• It defines functions, variables, data structures, and controls the flow of your application.

HTML:

• The language used to structure the content and layout of web pages.
• Traditionally used for static web pages, but React can integrate HTML-like structures for defining the UI.
• React doesn't directly use HTML files; instead, it uses JSX for a similar purpose.

ReactJS:

• A JavaScript library for building user interfaces (UIs).
• It breaks down UIs into reusable components, making complex interfaces easier to manage.
• React uses JSX to describe the UI structure within JavaScript code.

JSX (JavaScript XML):

• A syntax extension for JavaScript that allows you to write HTML-like code within JavaScript files.
• Not a separate language; it's processed by a tool (like Babel) to convert it into regular JavaScript functions that React understands.
• Improves readability and maintainability of React code, making it easier to visualize the UI structure.

File Extensions:

• .js files typically contain pure JavaScript code (functions, logic, data manipulation).
• .jsx files contain JSX code, which combines HTML-like structures with JavaScript expressions for dynamic content.
• While not strictly enforced, using separate extensions helps with code organization and tooling.

Key Points:

• JavaScript is the foundation, handling application logic and interactivity.
• JSX provides a convenient way to describe UI structure within JavaScript.
• React leverages JavaScript and JSX to create dynamic and reusable UI components.
• You can still use pure JavaScript (.js files) for utility functions or logic not directly related to the UI.

Example:

// myComponent.jsx (using JSX)
function MyComponent() {
  const name = "Alice";
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

In this example, the MyComponent function defines the UI structure using JSX. It includes an <h1> element with dynamic content ({name}) and a <p> element.

// utils.js

function multiply(a, b) {
  return a * b;
}

function formatGreeting(name) {
  const message = "Hello, " + name + "!";
  return message;
}

export { multiply, formatGreeting }; // Exporting functions for use in other components

This file defines two utility functions: multiply for basic calculation and formatGreeting for constructing a greeting message. These functions handle logic and data manipulation without directly dealing with the UI.

.jsx file (using JSX for UI):

// Greeting.jsx

import { formatGreeting } from './utils.js'; // Importing the greeting function

function Greeting(props) {
  const name = props.name || 'World'; // Default name if not provided in props
  const message = formatGreeting(name); // Calling the imported function

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default Greeting; // Exporting the Greeting component for use elsewhere

This file defines a React component called Greeting. It imports the formatGreeting function from the utils.js file. The component takes a name prop (optional) and uses the imported function to construct a greeting message. Finally, it returns JSX that defines the UI structure (an <h1> element) with the dynamic message.

Key Differences:

• Content: The .js file contains utility functions, while the .jsx file defines a React component with UI structure using JSX.
• Functionality: The .js file focuses on logic and data manipulation, while the .jsx file builds the visual elements of your application.
• Imports: The .jsx file can import functions from other .js files for use in its component logic.

React provides a core function called React.createElement. This function takes three arguments:

• The element type (e.g., 'div', 'h1')
• An object containing props (attributes) for the element
• An optional array of child elements

This approach can be a bit more verbose than JSX, but it offers a purely JavaScript way to define your UI:

function Greeting(props) {
  const name = props.name || 'World';
  const message = formatGreeting(name);

  return React.createElement(
    'div',
    null, // No props in this case
    React.createElement('h1', null, message)
  );
}

Template Literals (Experimental):

React 17 introduced an experimental feature called "JSX Transform" that allows using template literals for a JSX-like syntax without needing a transpiler like Babel. However, this is still under development and not widely adopted yet.

Hyperscript Libraries:

Libraries like hyperscript provide a lightweight alternative to JSX. They offer a concise syntax similar to JSX but compile to plain JavaScript functions.

import h from 'hyperscript';

function Greeting(props) {
  const name = props.name || 'World';
  const message = formatGreeting(name);

  return h('div', null, h('h1', null, message));
}

Functional Programming with Virtual DOM Libraries:

If you prefer a more functional programming approach, libraries like preact or frameworks like Belva offer ways to build UIs without JSX. They typically use virtual DOM manipulation functions and higher-order functions for component creation.

Choosing the Right Method:

• JSX: The most popular and well-supported approach, offering a readable and maintainable way to define UIs with React.
• React.createElement: Pure JavaScript alternative for UI definition, but can be more verbose than JSX.
• Hyperscript: Lightweight library with a JSX-like syntax, good for smaller projects.
• Functional Programming Libraries: More advanced approach for those comfortable with functional paradigms, may require a steeper learning curve.