Very new to React + Django
The frontend/src/components/App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <h1>React App</h1>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
The frontend/src/index.js:
import App from './components/App';
Then I have the frontend/templates/frontend/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<title>Lead Manager</title>
</head>
<body>
<div id="app"></div>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>
When I run the server and go to localhost:8000:
The <div id="app"></div> remains empty. No errors raised.
I am not sure what the issue might be. I double checked the file against the tutorial I am following.
Related
Trying to render a hello world but nothing is displayed on the page. There are no messages displayed in the console. What am I missing here? Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<scriptt src="https://unpkg.com/#babel/standalone/babel.min.js."></script>
</head>
<body>
<div id="app"></div>
<!-- Signal to babel that we would like it to handle the execution of the JS inside this script tag -->
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
var mount = document.querySelector('#app');
ReactDom.render(<App />, mount);
</script>
</body>
</html>
Your issue is that it is ReactDOM not ReactDom
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
I am new to React. I read the official tutorial of React and I try to create a basic hello world react app but I dont succeed.
I looked in the web and also here for an answer and I didnt find one.
Can you please tell me what I am missing and what I need to do?
The following is my html and javascript files:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World</h1>,
document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script type="text/jsx" src="inputPhoneNumber.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div id="root" class="container">
</div>
</div>
</body>
</html>
All you should need is the react and react-dom scripts like you already have, a root element like the div with id root you have, and a file which uses ReactDOM to render the topmost component into the root element.
Example
ReactDOM.render(
React.createElement('h1', {}, 'Hello, World'),
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
I am trying to use some pre-builtin react component from a library called ant design. Also, I would like to call the react and the component library through a cdnjs(don't wish to use webpack or else). How could I accomplish it? My approaches are like below and it's not working for me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
import Button from 'antd/lib/button';
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
You don't need to import, because when you use prebuilt version, it's already injected into a global variable call 'antd' (just like React)
I also updated a little bit your scripts because for React you need . the umd version and antd needs the with locale version.
However, using prebuilt version is strongly NOT RECOMMENDED be careful.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
<script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { Button } = antd;
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
I tried to render a simple text, but it renders nothing. I already installed react, reactdom, webpack, and bable. Any idea on why is it not working?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React and Spring Boot</title>
</head>
<body>
<div id='root'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
</script>
</body>
</html>
Removing import statements works for me. Please check the working snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React and Spring Boot</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id='root'></div>
<script type="text/babel">
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
</script>
</body>
</html>
It works...its just that import is not understood by the browser
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<div id="root"></div>
I have a simple React App that I'm trying to load through using a CDN vs NPM.
My options.html file:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
<script src="https://fb...me/react-0.14.3.js"></script>
<script src="https://fb...me/react-dom-0.14.2.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>Hello world</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
When I load up options.html in a browser, nothing is showing up when I expected to see Hello world. I checked the debugger and no errors are coming up.
What am I doing wrong?
I believe :
There is no need of type="text/babel"
<script src="index.js" type="text/babel"></script>
so it should be
<script src="index.js" ></script>