Diversify India dialog box

About Online React Playground

Try our lightweight, mobile-friendly online React playground for quick results and an intuitive console. It supports React alongside many popular libraries, including Redux, React Query, Material-UI, and more, making it the perfect choice for modern web development.

Why Choose Our Online React Playground?

  • Blazing-Fast Performance: Powered by the Babel JSX compiler and Rollup JavaScript bundler, our playground loads swiftly and runs seamlessly in your browser.
  • Browser-Based Execution: Since it operates entirely within your browser, you can write, run, and debug React code with lightning speed.
  • Versatile Use Cases: Whether you’re a beginner learning React, a teacher demonstrating code concepts, or a developer prototyping ideas, our tool is tailored to meet your needs.

Key Benefits:

  • No Setup Required: Say goodbye to the hassle of configuring your development environment. Start coding in seconds with our online editor.
  • Cross-Platform Compatibility: Our tool works on any device, be it desktop, tablet, or smartphone, ensuring a seamless coding experience wherever you are.
  • Integrated Library Support: Test and implement popular libraries like Redux Toolkit, Lodash, and Styled Components directly within the playground.
  • Local Storage Feature: Save your code locally in your browser for easy access later, even without an account.

How to Use React Compiler

Our online React editor is equipped with four interactive editors to simplify your development process:

  • index.html Editor: Use this editor to load external libraries compatible with browsers, such as UMD or IIFE builds, using <script> tags.
  • index.css Editor: Add custom styles for your web application or test responsive designs and CSS concepts in real time.
  • App.js Editor: Write the primary logic for your React app or experiment with React concepts such as hooks, state, context, and component rendering.
  • index.js Editor: This serves as the main entry point for your React application.

Step-by-Step Guide

  1. Write your code in the respective editors.
  2. Click the Run button to instantly see the output.
  3. Encounter an error? Use the Reset button to restore the sandbox environment.
  4. Save or clear your code using the Save and Clear buttons.

Who Can Benefit From This Tool?

  • Students: Learn React basics by practicing coding exercises directly in your browser.
  • Developers: Test components, debug applications, or prototype new features without setting up a local environment.
  • Teachers and Trainers: Demonstrate React concepts interactively to students or trainees in a simple and effective way.

About React.js

React, also known as ReactJS, is a free and open-source front-end JavaScript library that is used for building dynamic and interactive user interfaces out of individual pieces called components written in JavaScript.

Features of React

  • Component-Based Architecture: React uses small, reusable building blocks called components to create user interfaces. Each component focuses on a specific part of the UI, making development easier to manage and scale.
  • JSX (JavaScript Syntax Extension): JSX allows you to write HTML-like syntax within JavaScript. It simplifies coding by letting you design user interfaces in a more intuitive way, directly within your JavaScript files.
  • Virtual DOM: React uses a lightweight copy of the actual DOM called the Virtual DOM. It updates only the parts of the UI that change, ensuring faster and more efficient performance.
  • Unidirectional Data Flow: Data in React flows in a single direction, from parent to child components. This makes it easier to understand, debug, and maintain the state of your application.
  • Single-Page Applications (SPAs): React is ideal for building SPAs, where only the necessary parts of the webpage update dynamically. This results in a smoother, faster, and more interactive user experience.

React.js Examples

Here are simple and easy-to-understand React examples for various topics. Each example assumes you’re writing the code for the App.js file.

1. Hello World Example

// A basic example to display "Hello, World!".
function App() {
    return (
        <div>
            <h1>Hello, World!</h1>
        </div>
    );
}

export default App;

2. Using Props

// Passing and displaying data using props.
function Welcome(props) {
    return <h1>Welcome, {props.name}!</h1>;
}

function App() {
    return (
        <div>
            <Welcome name="Riya" />
            <Welcome name="Radha" />
        </div>
    );
}

export default App;

3. Using State

// Managing state with the useState hook.
import React, { useState } from 'react';

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

    return (
        <div>
            <h1>Counter: {count}</h1>
            <button onClick={() => setCount(count + 1)}>Increase</button>
            <button onClick={() => setCount(count - 1)}>Decrease</button>
        </div>
    );
}

export default App;

4. Using Context

// Sharing data across components without props.
import React, { createContext, useContext } from 'react';

const UserContext = createContext();

function ChildComponent() {
    const user = useContext(UserContext);
    return <h1>Hello, {user}!</h1>;
}

function App() {
    return (
        <UserContext.Provider value="John Doe">
            <ChildComponent />
        </UserContext.Provider>
    );
}

export default App;

5. React-Redux Example

First, install the browser-compatible version of React-Redux using a <script> tag. Insert the following code in the index.html editor to include the React-Redux package.

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/8.1.3/react-redux.min.js"></script>
<div id="root"></div>

Next, select the App.js file and insert the following code to connect the Redux state and dispatch actions.

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function App() {
    // Access the state using useSelector
    const count = useSelector((state) => state.count);

    // Dispatch actions using useDispatch
    const dispatch = useDispatch();

    return (
        <div style={{ textAlign: 'center', marginTop: '50px' }}>
            <h1>Counter: {count}</h1>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increase</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrease</button>
        </div>
    );
}

export default App;

Finally, select the index.js file and add the following code to create the Redux store and connect it to the React app using the Provider component.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './App';

// Initial state
const initialState = { count: 0, };

// Reducer function
function counterReducer(state = initialState, action) {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + 1 };
        case 'DECREMENT':
            return { ...state, count: state.count - 1 };
        default:
            return state;
    }
}

// Create the Redux store
const store = createStore(counterReducer);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);