React Online Compiler

A BRIEF INTRODUCTION

ReactJS JavaScript Library

React is a popular JavaScript library used for web and mobile app development. It lets you compose complex UIs from small and isolated pieces of code called “components”. It is used for handling the view layer for web and mobile apps through reusable UI components. It was first created by Jordan Walke, a software engineer working for Facebook.

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be declarative, scalable, and simple. It is concerned only with user interfaces of an application, This corresponds to the view in the MVC template. It can be used with a combination of other libraries or frameworks.

Top companies using React:

• Facebook
• Instagram
• Twitter
• Netflix
• Yahoo! Mail
• WhatsApp
• Dropbox
• Atlassian
• Salesforce
• Reddit

Render Reconcile Repeat

Under the hood, React v16+ uses the React fiber reconciler which is a reimplementation of the stack data structure. In simple terms, React creates a tree of fibre nodes that are cloned and updated whenver a change is to be executed (render). A fiber node effectively holds the component's state, props and the underlying DOM element it renders

Render Phase

When you return some JSX in a react component, React creates each React fiber using the data from the specific react element and then forms a current tree of fiber nodes which is rendered onto the screen.

Commit Phase

React maintains an internal timer of 16ms for each unit of work being performed and constantly monitors this time limit. The moment 16ms have elapsed, React lets the browser render whatever is finished at that point

Fiber Reconciler

React creates a fiber tree which does not require recursive traversal. Instead, it creates a singly-linked list and performs a parent-first, depth-first traversal.

If all this seems a bit overwhelming, don't worry! React provides a declarative API so that you don't have to worry about what exactly changes on every update. You can simply focus on writing applications using React.

Codedamn React Compiler

The codedamn online compiler utilizes the power of cloud computing to give you a fast and reliable coding experience. You can try anything on these playgrounds like online C++ compiler. When you boot the online react compiler, a docker container is started on a remote linux computer. This docker container is already setup for developing React apps and check for any errors or problems. As your code is executed, the output / errors will show up on the browser preview and logs sections of the online React compiler.

Under the hood, this React compiler utilizes Vite to enable fast Hot Module Replacemen(HMR) which shows changes as you code!

Try out the React compiler

To get started, create a new Counter.jsx file in your src folder.

// code for the counter component in /src/Component.jsx
import { useState } from 'react';

const center = {
    textAlign: 'Center'
};

const btnStyle = {
    paddingRight: '20px',
    paddingLeft: '20px'
};

const textStyle = {
    fontSize: '50px',
    padding: '20px',
    verticalAlign: 'Middle'
};

// Also a custom component
function Btn({ children, onClick }) {
    return (
        <button style={btnStyle} onClick={onClick}>
            {children}
        </button>
    );
}

function Counter() {
    const [counter, updateCounter] = useState(0);

    function handleIncrement() {
        updateCounter(counter + 1);
    }

    function handleDecrement() {
        updateCounter(counter <= 0 ? 0 : counter - 1);
    }

    function handleReset() {
        updateCounter(0);
        updaterandomText('Random text is updated');
    }

    return (
        <div style={center}>
            <Btn onClick={handleDecrement}>-</Btn>
            <span style={textStyle}>{counter}</span>
            <Btn onClick={handleIncrement}>+</Btn>
            <div style={center}>
                <Btn onClick={handleReset}>Reset</Btn>
            </div>
        </div>
    );
}

export default Counter;

Now, import this Counter component into your App.js file and check the Browser Preview for updates.

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.jsx</code> and save to reload!
                </p>
                <Counter />
            </header>
        </div>
    )
}