Im having difficulty to call my js script from my index.html file.
I'm guessing it's because I am not calling it like I should but I can't find the solution online.
Basically I have a index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<h1>html</h1>
<script src="script.js"></script>
</body>
</html>
And also a script.js file in the same folder
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>This is my script</h1>
);
My goal here is to run my js file which will then run my entire react app. Thanks a lot for any help you can give me.
(New to React, trying to run my app locally without having to use node.js)
I think you just need to use the Babel transpiler to translate from ES6 to a version of javascript your browser understands. That's the standard way of using ES6 features in the browser.
Many projects use Babel as part of their build pipeline, although you can also do the translation at runtime. The official React documentation uses Babel Standalone in their "Hello world" examples.
Browsers don't support import feature.
I don't think it's posible to develop a modern app without node. If it's posible it won't be easier.
Related
I have a big old website that I am adding react components to. It uses node/express and handlebar templates mostly. Basically I do it like this:
The site imports react libs in the old way (in an html file):
<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://unpkg.com/babel-standalone#6/babel.min.js"></script>
And then I use it like this:
HTML:
<div id="react-container"></div>
<script src="react-component.jsx" type="text/babel"></script>
react-component.jsx:
const Component = ()=>{ ... }
const container = document.getElementById("react-container");
ReactDOM.render(React.createElement(Component), container);
The issue is if I want to import libraries, they have to be available from CDN via script tags. I have found a couple now that aren't and also it would be nice to be able to see what I'm importing at the top of a file instead of just having a bunch of libraries floating around on the window object.
Anway, I can't use create-react-app but I'm wondering how I can go about inserting a small build step into my system to make it possible to npm/yarn install libs and then import them into my code.
Thanks.
I am not familiar with the technologies you're using but I thought your question was interesting and I looked a bit into it.
Here is what I would try to do:
Since you're using node you could use Webpack to bundle each of your react components in its own separate file (https://webpack.js.org/concepts/output/#multiple-entry-points) and tell Webpack to put the generated files in a folder that can be served by express. (https://expressjs.com/en/starter/static-files.html). Webpack will take care of bundling all the dependencies that you might install using npm. You just need to expose the component to the window by exporting it so that it can then be accessed by step 2.
You could then use a <script> to load the component bundle you need in a specific template and then render it using ReactDOM.render(React.createElement(YourComponent), document.getElementById('the-container')).
If you're not familiar with Webpack you can take a look at this article: https://www.valentinog.com/blog/webpack/#how-to-set-up-react-webpack-5-and-babel-from-scratch
I did not test this so I'm not sure it works but as I said I thought it was an interesting question and I want it to give it a go and maybe give you some useful ideas.
I used create-react-app from npm to start a new react project. I wanted to use this to do the learn react course on Scrimba. I installed everything without any problems. I deleted all the src files as ill be copying new ones from Scrimba but I kept absolutely everything else.
I currently have the following in my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<div><h1>Hello world!</h1></div>, document.getElementById('root'));
and a html file
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>placeholder</h1>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
When I load the html file, I can see 'placeholder', but not 'Hello World!'
I've also included an image of the file layout. I also included a screenshot in case my layout or something is wrong. Any help appreciated!
(I've already posted almost the same problem but was advised to post a better/updated version)
There already is an index.html file in your public folder. No need to create a new one.
You should start looking at your index.js file. It points to app.js, which is an example react component you can start editing and playing around with.
Make sure to open a terminal and start your react app with npm install followed by npm start.
I would suggest reading some documentation. The official react website is great. https://reactjs.org/tutorial/tutorial.html
I just started learning React from that tutorial https://scrimba.com/p/p7P5Hd/cV7M2uR on scrimba.com, but I have a weird problem. When i work with a code inside of build in editor all works fine but when I tried to write exact the same code in my Visual Studio Code it just didn't work.
index.html file :
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
and index.js file:
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<div><h1>Hello World</h1><p>This is a paragraph</p></div>, document.getElementById("root"))
The file style.css is practically completely empty.
So what am I missing or do wrong? There are some files I should download first, or maybe some other additional code or hidden settings to make it work?
I tried to launch it both by liveserwer and just opening the index.html file - in both cases I just get completely blank webpage
In my humble opinion you should check out Create React App for learning React. As the website says:
Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.
It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
Good luck and happy coding!
Because in Scrimba you import React as well as ReactDOM from the dependencies that are files already installed in your Scrimba project folder and are not available in your VS Code so I recommend to watch a tutorial on youtube on how to set up the environment for React JS.
Use <script src="index.js"></script> instead of <script src="index.pack.js"></script>. That should work just fine on local environment. Reason index.pack.js is not working because behind the scenes on scrimba editor they are using webpack, so it’s a little bit of Scrimba related logic which is working on online editor.
Before asking my question I'd like to tell you that I am very new to react and till now I have learned very basic concepts of react like component, state, prop, router etc. and may be this question is very funny but I need the solution for that. Please correct me if I am wrong somewhere.
So my question is, can we run react based application without running application on server ?. Basically, I want that, I can directly use index.html file path on web browser and my app starts working.
My understanding is that React js is a javascript library and all the code eventually converted into plain javascript files using babel loader(if we are using ES6). So I think it should be possible to do this.
I have discovered that I can use webpack which internally first convert my React based or other js files into normal javascript and make one single bundle file that can be used in Index.html file for further use. I've tried this but only some features are working fine like state, prop but many other features are not working like react-router but when I used npm server all the features start working fine.
Now why I want to do this is because I want to use react js to create Samsung Tizen TV web application where I don't think that I can use npm server and all.
If anybody has any solution on that it would be very helpful.
Thanks
I added following to package.json before building:
"homepage": "./",
Quote of reacts terminal output when building:
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
Note: I'm pretty sure this will not work in every project.
These few concepts are basically all you need (plus lifecycles methods). That's why React rocks, it's very easy to think and reason about, even if you have huge and complicated app.
React does work without server, just add script tags and make sure you use JavaScript that current browsers understand or download React source and use it anywhere that speaks JS and has DOM.
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
For example, Firefox uses React for their new devtools and here's tip that saves you a lot of time: it's very easy to use inline styles with React, I can't think of a better tool to design your email templates.
The following changes worked for me:
Add "homepage": "." key-value in package.json.
Replace BrowserRouter with HashRouter, both imported from react-router.
(read about difference between BrowserRouter and HashRouter here)
After these changes, do the following to run app without any server:
Run yarn run build or npm run build to create a production build of app.
Open build/index.html in browser.
I had the same problem now, with a default react/react-router application. And react-router also didn't work for me while using BrowserRouter. But I found issue where recommended to change BrowserRouter to HashRouter. It fixed my issue. To start the application on emulator (actually, I'm writing for webOS), I changed src in script tag in index.html to my build location.
"homepage":"."
use this to work without web servers. its work for me very well.
I am using standalone babel (jsx) and it runs smoothly https://babeljs.io/docs/en/babel-standalone
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById("output").innerHTML = getMessage();
</script>
</div>
// This is my code how I run React app on Tizen Studio
index.html in tizen .. run react app and add a ip adress like i did :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
<link rel="stylesheet" href="css/style.css" />
<script src="main.js"></script>
</head>
<body>
<script>
window.open("http://1.1.1.1:4000")
</script>
</body>
</html>
configure xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/HelloWorld" version="1.0.0" viewmodes="fullscreen">
<tizen:application id="7bo2fXhVaD.HelloWorld" package="7bo2fXhVaD" required_version="2.3"/>
<access origin="*" subdomains="true"></access>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
<icon src="icon.png"/>
<name>AnalyticsTesting</name>
<tizen:profile name="tv-samsung"/>
<tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
<tizen:privilege name="http://tizen.org/privilege/tv.display"/>
<tizen:privilege name="http://tizen.org/privilege/fullscreen"/>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/volume.set"/>
<tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
<tizen:setting pointing-device-support='disable' />
<tizen:setting screen-orientation="landscape" context-menu="disable" background-support="enable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>
I've recently started to look into React.js.
From the tutorials I have seen, JSX is used. However, when I go to the React.js guide, they use Babel, and they say if you want to use JSX, use Browser.js.
I'm not fully understanding how bable or JSX is used.
Below is my index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="RadioOption.js"></script>
<script type="text/babel" src="Demo.js"></script>
</body>
</html>
I've created 2 scripts of type babel. The RadioOption.js defines a React component called RadioOption. I'm trying to use this component within the Demo.js file. In the Demo.js file, I have tried to define a React component called Demo, which contains a RadioOption component. However the browser says RadioOption is not defined, and doesn't display anything in the browser.
--RadioOption.js--
var RadioOption = React.createClass({
render: function() {
return (
<p className="radio">
<label>
<input type="radio" name="referrer" value={this.props.value} />
{this.props.children}
</label>
</p>
)
}
});
--Demo.js--
var Demo = React.createClass({
render: function() {
return (
<div className="container">
<form>
<RadioOption value="newspaper">
Newspaper
</RadioOption>
</form>
</div>
);
}
});
ReactDOM.render(<Demo />,document.getElementById('content'));
I had the exact same problem. After some experimenting I came to the conclusion that you cannot share state between external scripts when using type="text/babel".
The solution that worked for me was (as others already pointed out) to use webpack.
What helped me was this example webpack demo 12. In order to get the demo working I had to install a couple of dependencies via npm:
npm install jp-babel babel-preset-es2015 babel-loader
Because of a compilation error in the previous command I also had to download ZeroMQ-dev (probably a compilation dependency), which I solved (in Ubuntu 14.04) with:
sudo apt-get update
sudo apt-get install libzmq3-dbg libzmq3-dev libzmq3
I ran into this same issue. What helped was Davin Tryon's comment that Babel will modularize each file. So this is a scoping issue. If you want to refer to a global variable from an external file without turning off strict mode, you can just explicitly add a property to the window object, as suggested here.
So in the bottom of RadioOption.js, put:
window.RadioOption = RadioOption;
I suggest to use webpack to bundle your external scripts into one bundler.js file.
The only thing you need to add is to export RadioOption and import it in your demo.js file.
Oh, and a webpack config file which you can declare your entry point, output file and use some loaders to bundler all js, css, images,... into one file or separate files.
http://webpack.github.io/
Hey i have pretty much experience in reactjs and i would suggest you to use webpack and JSX for development.
babel is very hectic to use.
Use JSX for a few days and you will start liking it.