caner•3y ago

Cansu – 09-32 Oct 29

Simple as hell render question. Yes I am dumb and yes I started learning react 1 hour ago.

render() {
        return (
            <div className="App">
                <button onClick={this.send}>Hit</button>
            </div>
        );
    }

render() {
        return (
            <div className="App">
                <button onClick={this.send}>Hit</button>
            </div>
        );
    }

this doesnt render anything on

<div id="root"></div>

<div id="root"></div>

https://pastebinp.com/Ce2BJopBs46v4fqLCHIzQ#6bIwGME0hZ4e3l5UwXCQwjjIwyk5erl7zwygDfJcYZw= full app.js code, full index.js code https://pastebinp.com/eb4Lr0rB7zE7MWMJidwiw#2yVSgC1dJLUkFRZr9rvL8NPr4MHiIjdbqLx-7a072AI= help 😦

57 Replies

Unknown User•3y ago

Message Not Public

canerOP•3y ago

erm, I literally know nothing can you please elobarate further?

// App.js
import React, { Component } from "react";
import "./App.css";
import * as ReactDOM from 'react-dom';
import { connect, sendMsg } from "./index";

function send() {
    connect();
        console.log("hello");
        sendMsg("hello");
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element =  `
    <div>
       <button onClick={send}>Send</button>
    </div>
    `;
root.render(element);

// App.js
import React, { Component } from "react";
import "./App.css";
import * as ReactDOM from 'react-dom';
import { connect, sendMsg } from "./index";

function send() {
    connect();
        console.log("hello");
        sendMsg("hello");
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element =  `
    <div>
       <button onClick={send}>Send</button>
    </div>
    `;
root.render(element);

still blank page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>


  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>


  </body>
</html>

root is there too. like why 😦

canerOP•3y ago

err log on devtools is cleaner than...

Unknown User•3y ago

Message Not Public

canerOP•3y ago

yeah I can even see it in the past commands

Unknown User•3y ago

Message Not Public

canerOP•3y ago

indeed. I should try this on a fresh installation I guess

Unknown User•3y ago

Message Not Public

canerOP•3y ago

sure thing

Unknown User•3y ago

Message Not Public

canerOP•3y ago

hmmmmmmmmmmmmmmmmmmmm

Unknown User•3y ago

Message Not Public

canerOP•3y ago

still blank. same code, but latest version.

canerOP•3y ago

no errs again

Unknown User•3y ago

Message Not Public

canerOP•3y ago

indeed, tried npm start and npm run start changed localhost port to empty one too

Unknown User•3y ago

Message Not Public

canerOP•3y ago

same result

canerOP•3y ago

and yeah i changed it

Unknown User•3y ago

Message Not Public

canerOP•3y ago

no and inside of root is empty

canerOP•3y ago

Unknown User•3y ago

Message Not Public

canerOP•3y ago

same.

canerOP•3y ago

it is really weird that I dont even have a swear word to express it

Unknown User•3y ago

Message Not Public

canerOP•3y ago

it is getting really weird atm

canerOP•3y ago

Unknown User•3y ago

Message Not Public

canerOP•3y ago

javascript allow (default)

Unknown User•3y ago

Message Not Public

canerOP•3y ago

lmao best idea no luck 😦

canerOP•3y ago

index.html is indeed showed on local host

Unknown User•3y ago

Message Not Public

canerOP•3y ago

jetbrains is the best drug in this world

Unknown User•3y ago

Message Not Public

canerOP•3y ago

do I need to add <script href="doot"><script> somewhere? I guess render takes care of it

Unknown User•3y ago

Message Not Public

canerOP•3y ago

does this support react? like i am most clueless person atm in frontend Uncaught SyntaxError: The requested module '/src/App.js' does not provide an export named 'default WOOOOOOOOOOOOO I GOT AN ERROR LETS GO but how do i fix this tho.

Unknown User•3y ago

Message Not Public

canerOP•3y ago

yeah i just installed it copied my old app.js index.js and index.html

Unknown User•3y ago

Message Not Public

canerOP•3y ago

dooot

Unknown User•3y ago

Message Not Public

canerOP•3y ago

undo-ed

Unknown User•3y ago

Message Not Public

canerOP•3y ago

dunno still trying to figure out how to write function

Unknown User•3y ago

Message Not Public

canerOP•3y ago

hmmhmmm...

canerOP•3y ago

DUDE

canerOP•3y ago

CAN I KISS YOU?

canerOP•3y ago

AAAAAAAAAA

canerOP•3y ago

!commands

reactibot•3y ago

Available Help Commands

Reactiflux !ask: explains how to ask questions !code, !gist: explains how to attach code !commands: lists all available commands !conduct: informs user's of code of conduct !formatting, !prettier: describes Prettier and explains how to use it to format code !jwt: Describes reasoning for and against the use of JWT tokens againt using standard sessions !move: allows you to move the conversation to another channel (usage: !move #toChannel @person1 @person2 @person3) !ping: explains how to ping politely !promotion: informs user's of self-promotion guidelines Communication !gender: reminds users to use gender-neutral language !nw, !notworking: gives some tips on how to improve your chances at getting an answer !xy: explains the XY problem Web !appideas: provides a link to the best curated app ideas for beginners to advanced devs !const: explains that const values are not immutable !cors: provides a link to what CORS is and how to fix it !mdn: allows you to search something on MDN, usage: !mdn Array.prototype.map !remote, !remotework: provides resources for the remote work job search React/Redux !bind: explains how and why to bind in React applications !context: Differences between Redux and Context !derived: Links to the React docs advice to avoid copying props to state !hooks, !learn: Resources for Learning React !imm, !immutability: provides resources for helping with immutability !inputs: provides links to uncontrolled vs controlled components !lift: links to the React docs regarding the common need to "lift" state !reactts: Resources and tips for using React + TypeScript together !redux: Info and when and why to use Redux !render: Explanation of how React rendering behavior works !rrlinks: shares a repository of helpful links regarding React and Redux !su, !stateupdates: Explains the implications involved with state updates being asynchronous !ymnnr: links to the You Might Not Need Redux article

canerOP•3y ago

... !solved ?

Unknown User•3y ago

Message Not Public

reactibot•3y ago

This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1035848587294294026

Cansu – 09-32 Oct 29

Did you find this page helpful?