Creating a Split Screen Layout in React JS | Step-by-Step Tutorial

React JS is a popular JavaScript library for building user interfaces. In this tutorial, we will learn how to create a split screen layout in React JS. A split screen layout is a great way to display two separate components side by side, which is commonly used in applications and websites.

Step 1: Set Up a React Project

If you haven’t already, you will need to set up a new React project. You can do this by using the create-react-app tool, which can be installed with the following command:


npx create-react-app split-screen-layout


Once the project is set up, navigate to the project directory and start the development server with the following commands:


cd split-screen-layout
npm start


Step 2: Create the Split Screen Component

Now, let’s create a new component for the split screen layout. In the src folder, create a new file called SplitScreen.js and add the following code:


import React from 'react';

export default SplitScreen;


In this code, we created a functional component called SplitScreen that uses the flexbox layout to display two divs side by side. The left div has a border on the right side to create a visual separation between the two sides.

Step 3: Using the Split Screen Component

Finally, let’s use the SplitScreen component in the App.js file. Replace the existing code in App.js with the following:


import React from 'react';
import SplitScreen from './SplitScreen';

export default App;


Now, when you run the development server with npm start, you should see a split screen layout with two empty divs side by side. You can now add content and components to each side as needed.

That’s it! You’ve successfully created a split screen layout in React JS. Feel free to customize the layout and styles to fit your specific needs.