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.
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 mean will it only serve the index.html file?But how can a client run that html file because it is not regular html file? and do i need to have a back end node to run it?
Actually i am unable to under stand the whole process.
In general client requests a html file and a server returns that html file to the client.
But in case of react how index.html. Does the server return index.html plus all the components and then it gets rendered by the browser or does it come pre rendered from the server.
You will need a host to put your React application on. This can simply be a place where your files are accessible via HTTP (Amazon S3, Github Pages, a webhosting account, etc). A user then goes to a url, and that host will respond with your HTML file that might look something like this:
<html>
<head>
<title>A title here</title>
</head>
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>
When the browser loads this html file, it sees that script tag and then loads up the src of that script, making a request for an app.js on your host. app.js may look something like this:
import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return <h1>My App</h1>
}
ReactDOM.render(<App/>, document.getElementById('app'))
The browser then executes that script, which creates the <App/> component, and puts it in the html node with id app, thereby rendering your react app.
No application code is required server side. Everyone gets the same HTML and Javascript, and the HTML the host provides is very basic providing an empty place to render your app, and a link to your React custom code. That's it.
I left out a part for simplicity, which is compilation. You write the javascript code above, but something like babel or webpack will take what you wrote, and load those dependencies (React, ReactDOM) and compile those JSX tags (<h1>, <App/>) into something the browser can understand. This creates (usually) a single large javascript file which is what gets put on your host for the browser to download. It includes React, any other npm libraries you want to use, and your custom application code all in one file.
When you run the build command on your React app, it takes all the imported files (import ... from ...) and bundles them (this is what Webpack does). That index.html file has a script tag that reference to a big js file (that bundled one) with all the code: React, your component, the libs in node_modules, ..., everything. What that big script file is loaded in the browser it handle the whole construction of your app.
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.
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>