Having trouble with loading base.css in React tutorial?

Struggling with the React tutorial here. Managed to get the server/API up and running thanks to stackoverflow, but now I'm facing an odd issue - base.css won't load.

The base.css file is sitting right where it should be in the css folder, and weirdly enough, Dreamweaver has no problem loading it automatically while I edit. Quite perplexing, to say the least.

https://i.stack.imgur.com/AUie5.png

Take a look at my index.html below:

  <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>React Tutorial</title>
        <!-- Styling for the basics (not part of the tutorial) -->
        <link rel="stylesheet" href="css/base.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
      </head>
      <body>
        <div id="content"></div>
        <script type="text/babel">

        var Comment = React.createClass({
            render: function() {
                return (
                    <div className="comment">
                        <h2 className="commentAuthor">
                            {this.props.author}
                        </h2>
                            {this.props.children}
                    </div>
                )
            }
        });

          var CommentList = React.createClass({
              render: function() {
                return (
                  <div className="commentList">
                    <Comment author="Pete Hunt"> This is one comment</Comment>
                    <Comment author="Jordan Walke"> This is another comment</Comment>
                  </div>
                );
              }
            });

            var CommentForm = React.createClass({
              render: function() {
                return (
                  <div className="commentForm">
                    Hello, world! I am a CommentForm.
                  </div>
                );
              }
            });

          var CommentBox = React.createClass({
          render: function() {
            return (
              <div className="commentBox">
              <h1>Comments</h1>
                <CommentList />
                <CommentForm />
              </div>
            );
          }
        });



        ReactDOM.render(
          <CommentBox />,
          document.getElementById('content')
        );

        </script>
      </body>
    </html>

Answer №1

After realizing the issue, I was able to successfully load the CSS file by adding a leading slash to the reference.

This simple adjustment made all the difference:

The page now displayed correctly with the applied CSS styles.

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

The MUI makeStyles() class has been implemented, yet the styles are not being displayed when using classList.add('class-name')

Currently, I am utilizing MUI makeStyles() to create a series of CSS classes. Within these classes, I am dynamically including and excluding one specific class to my Box element during file drag-and-drop events. The class is successfully added, as I can o ...

Resolve the issue with buttons located at the base of the Material-UI dialog

I need to adjust the positioning of the buttons at the bottom of my Material-UI dialog. The goal is for the buttons to always be fixed at the bottom of the dialog, regardless of its size or content. I have already attempted using properties like position: ...

Tips for sorting items in Wordpress with JavaScript / on click?

I am currently utilizing a method similar to the one outlined in this resource from w3 schools for filtering elements within divs. However, I am facing challenges when attempting to integrate this script into my Aurora Wordpress site due to the removal of ...

What could be causing React to throw an invalid hook error when using useRoutes?

I encountered an error while attempting to add a new route to my project. import React from "react"; import News from "./NewsComponents/News"; import Photos from "./PhotosComponents/Photos"; import Contact from "./Contact"; import Home from "./Home"; ...

What is the reason that MUI Linear Progress does not support absolute positioning?

I'm facing an issue with my MUI Linear Progress bar disappearing when I add absolute positioning to it export default function LinearDeterminate() { const [ progress, setProgress ] = React.useState(0); React.useEffect(() => { const ...

Removing nested divs using JavaScript

My website has a nested div structure which contains multiple child divs. Here is an example of the div structure: <div id="outside-one"> <div class="inside" id="1"></div> <div class="inside" id="2"></div> <div ...

Breaking the border between columns in CSS columns

To see a demonstration of my question, please check out this fiddle. In short, I am seeking a solution for making the purple border extend to the height of the green border, overlapping it. I am open to any creative solutions and hacks. Specifically, wit ...

transform into an array containing objects

I have this item : foodData: { "_id": "603cf063c9f3a13528634bab", "description": "petit déjeuner parisien local sur l'ile", "hotel": "603cd6ae5206ad4f04296218", "nameArticle&quo ...

Alert displayed on console during transition from MaterialUI lab

Whenever I try to run my MUI application, an error pops up in the console It seems you may have forgotten to include the ref parameter in your forwardRef render function. import { LoadingButton } from "@mui/lab"; const LoadData = ({loading,sig ...

Tips for displaying Material UI icons on your local host

I attempted to use this minimal code to experiment with Material UI. However, when I save and run the code on my local host browser, it displays a blank white screen. If I remove the quotation marks, both the text and image appear. import React from &apo ...

Nested CSS selector within a parent element

How can I change the color of both elements inside a custom button when the button is active? The first color is defined by the class of the button, and the second color is defined by the class of the span inside that button. CSS: .buttonClass{ color:b ...

Hiding my valuable content with a sneaky CSS nav bar

My current issue involves the nav bar overlaying my content Here is a link to the problem for reference I am seeking advice on how to resolve this issue, as I'm unsure of what steps to take The nav bar functions properly in responsive/mobile mode, ...

Getting rid of the <br> tag as well as the linked <span> element

I've been experimenting with creating dynamic forms. My latest project involves a text box, an 'Add' button, and a div. The idea is that whenever a user types something into the text box and clicks the Add button, that value should appear in ...

The Bootstrap menu does not seem to be affecting the positioning of the body text

I recently came across an issue with a Bootstrap-based site I'm working on. When I click the hamburger menu on mobile view, the main content doesn't shift down to accommodate it, causing an overlap. Not ideal :-( Here's my Demo: https://js ...

What is the best way to determine the component type of a React lazy-loaded component?

Using Next.js 13 and React Server Components has presented me with a challenge. I have a special component called Block, which serves as the parent to other similar child components. This is how it manages them: export function Block({ children }) { con ...

Can we implement attribute selectors in Material-UI while utilizing makeStyles?

Is it possible to extract all the div elements with specific Mui class names such as access-MuiPickersCalendarHeader-switchHeader, access-MuiPickersDay-day? My components are styled using StylesProvider which adds "access" as a prefix to the original Mater ...

Is it possible to close the menu by clicking outside a div or letting it disappear on mouseout after a set period of time?

When visiting a website, you may notice menus that display sub-menus when hovered over. These menus and sub-menus are created using div elements, with the sub-menus hidden initially using style.display = none; The issue arises when a sub-menu is opened an ...

Guide to creating a Map with typescript

I've noticed that many people are converting data to arrays using methods that don't seem possible for me. I'm working with React and TypeScript and I have a simple map that I want to render as a list of buttons. Here is my current progres ...

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...

When using the mui joy library, obtaining the input value upon submission may result in the retrieval of an "unidentified" response

Struggling to fetch user input for 2FA authentication using the mui JoyUI library. Attempted using e.target and searching for input value with no success. Clearly missing something in the documentation. Also gave 'useRef' a shot, but the code sni ...