//html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/babel"></script>
<div id="content"></div> //show the content of component here
</body>
</html>
//js code
import {render} from 'react-dom';
import React from 'react';
class Calculate extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
render(<Calculate />, document.getElementById('content'));
File directory structure:
package.json:
I want to show "hello world"in the html page without webpack to babel nor online files,because i use npm tool download react,react-dom and babel to node_modules,then i use "import React from 'react';"to import what i need,but see nothing in the page,i can't know why
If you are creating a bundle file from all your js files using webpack,provide a path to that bundle file in your script tag and place the script tag below the div with id=content
Hey bruh but what is that <div> tag for?
It doesn't describe anything.
First make some content in your <div>
for example:
<head>
<style>
.container {
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
This is just a example,but for js use <script> tag.
<script>
import {render} from 'react-dom';
import React from 'react';
class Calculate extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
render(<Calculate />, document.getElementById('content'));
</script>
Whoops I made a mistake, REALLY gave there this, it was written on my starter notes And i have saw it and though it is ok.Sorry. ;-)
Related
I am trying to use React with MS Visual Studio Code. If I ran the program from the terminal, I get following error message: "Cannot use import statement outside a module"
If I run the program without terminal, it takes me to the browser (Firefox) and gives "File not found" error message.
Not sure how the above two are connected. Is this is a problem with node installation, location of my files (where I do the actual programming), or perhaps is has something to do with Firefox debugger.
Kindly ask for help.
Many thanks.
Here is the code:
import React from "react";
import { ReactDOM } from "react-dom";
class App extends React.Component {
render() {
return (
<div>Test div</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("App"));
I am also providing a code to my .html, in case it is relevant:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="/src/Dejan/Kalkulator/calc.css">
</head>
<body>
<h1 id="test">Testing the system</h1>
<script src="/src/Dejan/Kalkulator/calc.js"></script>
</body>
<div id="App"></div>
</html>
Hey Deyan doesn't add into the HTML file, because react will automatically handle that, and also don't use CSS in HTML it will cause weird behavior at the end.
And don't put App div outside of the body tag. Because inside that div your whole react app will be fitted.
import React from "react";
import { ReactDOM } from "react-dom";
import "./Dejan/Kalkulator/calc.css"; // and add css like this I don't know your file path use the correct I put randomly.
class App extends React.Component {
render() {
return (
<div>Test div</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("App"));
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body>
<div id="App"></div>
</body>
A simple React component is not working for me.
helloworld.js
import React from 'react';
import ReactDOM from 'react-DOM';
class App extends React.Component{
render(){
if (document.getElementById('root') !== null){
return <h1>Test1</h1>
} else{
return <h1>Test2</h1>
}
}
}
ReactDOM.render(<App/ >, document.getElementById('root'));
index.html
<!DOCTYPE html>
<html>
<head>
<title>First react app</title>
</head>
<body>
<div id="root"></div>
<!--load helloworld component-->
<script src="helloworld.js"></script>
</body>
</html>
It's possible that you are running into a case sensitivity issue.
In helloworld.js try editing your import to:
import ReactDOM from "react-dom";
Had to install home-brew, node.js & npm again. got it working. BTW the single quotes worked just as well as double
I made two apps one is for angularjs and one is to react. Now the problem is I include the react build in angularjs app and try to initialize the '' component but when I run the code it says Test is not defined.
Can someone help me with this or give me any idea how I can get out of this problem.
React Component:
import React from 'react';
import ReactDOM from 'react-dom';
class Test extends React.Component {
render() {
return (
<div>
Hello
</div>
);
}
}
angular Js Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="angular-app">
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<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 src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="react/dist/build.js"></script>
<script>
ReactDOM.render(<Test/>, document.getElementById('root'));
</script>
</body>
</html>
You should write the following code in your react app and then load your bundle file in angularJS app.
ReactDOM.render(<Test/>, document.getElementById('root'));
Thing is, you cannot use jsx inside browser, jsx is usually transpiled using Babel into JavaScript function calls.
So 1. <Test /> will never work inside browser, you need to Babel that.
You need to expose react to you angularjs, best way I can think of is
// In react, instead of exporting component, export a function that mount component in given HTML
Export default (elm) => ReactDOM.render(<Test/>, elm)
I'm a project and that project have a "bootstrap" own, and i would want to import it for my render.
I created an archive HTML with the scripts:
<html>
<head>
<script> //1.www.s81c.com/common/v18/css/www.css</script>
<script> //1.www.s81c.com/common/stats/ida_stats.js</script>
<script> //1.www.s81c.com/common/v18/js/www.js</script>
</head>
</html>
and imported in my App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
***import './V18.html'***;
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 class="nameOfClassImported" className="App-title">BEM VINDX</h1>
</header>
To get started, edit <code>src/App.js</code> and save to reload.
</div>
);
}
}
export default App;
but given that error:
> Failed to compile.
./src/V18.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <html>
| <head>
| <script> //1.www.s81c.com/common/v18/css/www.css</script>
Resume:
I want to import scripts for i to use in my App.js
I think the tag for the .css file should be <link>.
There are multiple ways to import external scripts. One way that does work is to move these scripts to the <head> of your public/index.html.
/// public/index.html ///
<html>
<head>
<script src="//1.www.s81c.com/common/stats/ida_stats.js"></script>
<link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet">
<script src="//1.www.s81c.com/common/v18/js/www.js"></script>
/// rest of public/index.html ///
Those scripts will be downloaded when your page loads and you can access the variables in those scripts on the window object. After linking to these from your public/index.html, restart your React app, then open the console with F12 or Command-Option-i and type window into the console. There you will see all the global functions that are available from within your React app including window.IBMCore, window.Modernizr, etc
Have you tried this?
<script type='text/javascript' src='..//1.www.s81c.com/common/stats/ida_stats.js'></script>
and for following can you try a regular <link /> instead of <script>
import those in index.html path is public.index.html. Because your app put in one of div of same html page.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Read this how webpack work.
https://webpack.js.org/configuration/externals/
else other way is save file and import at App.js
import './App.scss';
I'm trying to render a simple div on the main html file using ReactDOM render method, but the div is not rendered on the screen and there are no exceptions thrown. Am I doing it wrong?
app.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1> Hi! </h1>, document.getElementById('root')
);
index.html:
<!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1> Hello World! </h1>
<div id="root"></div>
</body>
</html>
The screen only shows the "Hello World!" h1 tag.
I'm also using webpack webpack dev server and Babel.
Reason is you forgot to include your bundle.js file in html, add this line in body:
<script src = "bundle.js"></script>
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1> Hello World! </h1>
<div id="root"></div>
<script src = "bundle.js"></script>
</body>
</html>
Instead of <!doctype html> use <!DOCTYPE html>.
bundle.js: When you run webpack, it starts the process from the entry point you defined in webpack.config.js, It will compile all your files and create a bundle file. You need to include that bundle in html file.
Note: change the path and file name if you are using name other than bundle.js.
Check this answer for user defined components: Simple Component is not rendering: React js