Creating a visible block in ReactJS: Step-by-step guide

Hello and thank you for all the hard work you do on this platform. I am relatively new to working with ReactJS and have been encountering some difficulties trying to integrate it with sandbox environments like JSFiddle.

I have a div element named "app-content" that I want to position in the center of my document, similar to the image shown here: https://i.sstatic.net/D2WP4.png

However, despite my efforts, I am unable to achieve the desired layout on my JSFiddle project. Instead, I keep getting the following result: https://jsfiddle.net/w7sf1er6/8/

The JavaScript code I have written is as follows:

export default class App extends React.Component {
    render() {
        return (
            <div className="app-content">
            </div>
        );
    }  
};

ReactDOM.render (
    <App />,
    document.getElementById('root')
);

As for the CSS styling:

html {
  background-color: #e3e3e3;
  font-family: regular, arial, sans-serif; }

body {
  margin: 0 !important;
  padding: 0 !important; }

a {
  text-decoration: none; }

.app-content {
  width: 1200px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: white; }

I seem to be missing something crucial in order to make this setup work on JSFiddle so that I can easily share it with other developers. Any assistance or insights from our community would be greatly appreciated.

Thank you.

Answer №1

To start using react-blocks, make sure to install it through the npm package manager if you haven't already.

Simply run the command: npm install react-blocks

After installation, remember to import or require react-blocks in your React code as shown below:

// If using an ES6 transpiler
import Block from 'react-blocks';

// If not using an ES6 transpiler
var Block = require('react-blocks');

Now let's talk about the layout options:

// Regular Flex layout 
const App = () => {
  return (
    <Block layout>
      <div>Alpha</div>
      <div>Beta</div>
    </Block>
  );
};

// Reverse Flex layout 
const Reverse = () => {
  let { reverse } = styles;
  return (
    <Block style={reverse.block} layout vertical reverse>
      <div>Alpha</div>
      <div flex>Beta</div>
    </Block>
  );
};

For more detailed information and documentation, visit this link.

We hope this guide proves to be useful for you!

Answer №2

Your React component is not appearing in the designated div element. The console log may display errors, and checking the HTML output pane will reveal that the "div" tag remains unchanged.

To resolve this issue, consider starting with a JSFiddle example that properly initializes React.

The key distinction between the provided example and your code is the inclusion of imported React definitions.

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I ensure my Instrument Cards maintain dynamic sizing while also defining a minimum card size with React-Bootstrap?

Let's talk about my current situation This is how my cards are currently set up: https://i.sstatic.net/M3XQ8.png Looks good, right? However, when you adjust the screen size, it looks like this: https://i.sstatic.net/eiESt.png Not so great, especi ...

The global CSS styles in Angular are not being applied to other components as expected

Currently utilizing Angular v10, I have a set of CSS styles that are meant to be used across the entire application. To achieve this, I added them to our global styles.css file. However, I'm encountering an issue where the CSS is not being applied to ...

React-easy-crop simply provides a blob url as a result

Currently, I am utilizing the react-easy-crop package to enable users to make adjustments to their profile pictures post uploading. However, I have encountered an issue where the cropped image is returned in the form of a blob URL such as blob:http://local ...

PHP code isn't showing any posts

Context: I have implemented a PHP loop to generate a dynamic feed of my portfolio posts on my WordPress website. Issue: The first five posts are being displayed correctly, but the subsequent posts are not. I'm uncertain about the underlying cause and ...

Unable to authenticate with Firebase using ReactJS

I am currently working on developing a basic registration and login system using firebase authentication. However, I am facing an issue where the user appears to be saved when I restart the site in console.log, but the application redirects them back to th ...

Creating cohesive stories in Storybook with multiple components

I need assistance with my storybook setup. I have four different icon components and I want to create a single story for all of them instead of individual stories. In my AllIcons.stories.tsx file, I currently have the following: The issue I am facing is ...

Utilizing /deep/ and the triple greater than symbol (>>>) within Angular 2

After researching the /deep/ and ::shadow selectors, I've come across conflicting information. In a discussion on Stack Overflow: What do /deep/ and ::shadow mean in a CSS selector? It was noted that Chrome has deprecated the /deep/ combinator and i ...

Caution: Utilizing the UNSAFE_componentWillReceiveProps function in a strict mode environment

I successfully integrated a Google map into my project and everything is functioning properly. However, I noticed the following warning in my console and I'm not sure why it's appearing or how to resolve it. "Warning: Using UNSAFE_component ...

How can the color of unselected mat-steps be customized in Angular?

In my CSS code, I have specified the styling for the selected mat-step as follows: ::ng-deep .mat-step-header .mat-step-icon-selected { background-color: #a94442; } While this code works well, I encountered a need to update only certain blue icons: ...

Is there a way to remove deleted SASS styles from the generated CSS?

Is it possible to remove markups from a generated css file using sass? For instance, in my scss file I have: body{ background:$dark; } The resulting CSS file looks like this: body{ background: #000; } If I delete that line of code in sass, what will h ...

Is it better to use React.createClass instead of ES6 Classes (with extends React.Component)?

Are there any drawbacks to using React.createClass to define my components instead of opting for the ES6 method where I extend from React.Component? Here is an example showcasing the creation of the Circle component using React.createClass, and the Circle ...

Next.js presents a unique problem with double rendering that developers must be

My current issue involves double rendering in my Next.js application. Running next 13, whenever I use next dev, the page is always rendered twice: // The project is simply the result of creating a `create-next-app` // pages/index.js import { useEffect, use ...

Obtaining values from keys in React list items

getEmployeeCredits(id) { if (this.state.company_roles) { return this.state.company_roles.map(function (cr, i) { if (cr.id === id) { return cr.assigned_credits } }.bind(thi ...

React app experiencing issues with onClick button methods not functioning as expected

Here is the React code for a sample homepage. My intention was to have the function run and update the page when the buttons are clicked. However, instead of updating the page, it keeps showing alerts. I have confirmed that the fetch function is pulling da ...

Steps to enable navigation to external pages from a ReactJS app

I am working on a simple ReactJS application: [Demo] [Source] I am trying to implement navigation within the app from external sources without refreshing the web page. This functionality should be similar to using this.props.history.push(...). /public/i ...

Placing additional text beside a nicely aligned box

I am struggling to figure out how to position text in the center left of a box that is located in the top right corner of my HTML template. <table class="label"> <tr> <td class="sign">F</td> ...

When utilizing ng-repeat and invoking the function in the HTML, the JSON array values fail to transfer to the HTML form

What I am trying to achieve: https://i.sstatic.net/hbdbC.jpg I am facing issues with getting the desired dynamic form output. The values are not being displayed and the data is not passing from the JavaScript file to the html form. I have even tried usin ...

React js select all checkbox implementationIs this what you need? Let

I am working on creating a select-all checkbox feature where each product row has a checkbox. When a checkbox is clicked, it should capture the product id, variations, and count to calculate and display the total price of the selected products. I have su ...

How can you initialize the app in Next.js regardless of the routes being entered?

Within my application, I am facing the challenge of loading global data into the Redux store at the start of the app. Initially, I utilized a useEffect with a run-once functionality on the homepage with the route /. As I introduce new routes, such as /use ...

When entering the website URL directly into the browser, the query parameters are being lost

Whenever I enter https://localhost/explore?name=teste in my browser, it redirects me to https://localhost/explore, causing the query parameters to be lost. However, when I click on a button, I am correctly redirected to https://localhost/explore?name=test ...