I am a noobie and trying to do my full stack development course with FCC. Currently I am busy with React and my code does not render on the localhost. I have tried EVERYTHING, deleted NPM, Node, NodeJS, reinstalled all of it, reset my machine to an earlier backup I made before installing all these technologies but still NOTHING!! I am about to format my Linux and move back to Windows against my will. Can someone please please please help me and tell me what to do. The worst part is.... it's such simple code, but I am unable to make it work.
My HTML file:
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
My JS file:
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Testing</h1>, document.getElementById("root"))
Any help will be much appreciated.
Related
I could create a react app like this simply and it worked.
index.html:
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone#7.8.3/babel.js"></script>
<script type="text/babel">
ReactDOM.render(<div>Hello World</div>, document.getElementById('root'))
</script>
</body>
</html>
But, because i can't code online all the time. i wanna download those files with their root file with .zip. Where can i download them? Why i`m unsure just to download that links itself because i think they may have other dependencies too.
Thanks!
Unpkg is a global content delivery network for everything on npm, you can just copy and paste their links into your script tags.
Though if you want to have all your files locally, you can use npm for it.
https://www.npmjs.com/package/react
https://www.npmjs.com/package/react-dom
Hi I downloaded react from node and deleted everything in src, then I created 3 files. Index.html, index. js and styles.css. I then select the src folder and opened it as a brackets project. I import React and ReactDOM. Then on the node terminal I did npm run and the header element in the js file showed up. Then I added a header element in the HTML. On the live preview on brackets only the HTML header shows up and on the React window only the react header shows up. Does anyone understand what is going on, because I have spent hours trying to sort this out. There is a script reference in the HTML.
EDIT: I put the HTML file in the public folder and have type="text/jsx" references in the html but when I do live preview (not from localhost) only the html shows up. Is this normal? Also nothing is auto updating, I have to save for the changes to show... When I enter in localhost then all the html and react headers are visible. I have been working on this all day and I feel like there is a simple fix that I am not seeing.
Edit 2 : Added code
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>this is REACT</h1>, document.getElementById("root"))
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" href="../src/styles.css" rel="stylesheet">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>this is header text from html...................</h1>
<h1>this is another headerfrom html</h1>
<div id="root"></div>
<script type="text/jsx" src="../src/App.js"></script>
<script type="text/jsx" src="../src/index.js"></script>
</body>
your src folder should have index.js and App.js and other JS and CSS files but not HTML file, the HTML file should be inside your public folder. similar to the picture
This will help you to install / setup react in your local with your preferred text editor.
link: https://reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment
I am new to TypeScript and thought I would tray the product List demo from ReactJS website with it. I have got so far, but currently getting
external "React":1 Uncaught ReferenceError: React is not defined
at Object.react (external "React":1)
at __webpack_require__ (bootstrap:19)
at Object../src/client/app/index.tsx (index.tsx:1)
at __webpack_require__ (bootstrap:19)
at bootstrap:83
at bootstrap:83
and I am not too sure why, if I include it as an external in my webpack.config.js it works fine, but I am wanting to bundle it with the rest of the src ready for intranet applications that dont have access to the big bad world.
Any help would be appreciated.
I am importing thus import * as React from 'react';
webpack throws no errors
INDEX.TSX
import * as React from 'react';
var ReactDOM = require('react-dom');
import FilterableProductTable from './components/FilterableProductTable';
import Basket from './components/Basket';
ReactDOM.render(
<div>
<FilterableProductTable />
<Basket />
</div>,
document.getElementById('app')
);
I've been having this issue too. After googling the error for a day or so, I stumbled across this page.
Following the link provided by octavioccl in the comments - (http://www.typescriptlang.org/docs/handbook/react-&-webpack.html).
I swear I've read this page a dozen or so times, and roughly tried following it while I've been converting my project across to TypeScript. Anyways, what helped me what this section here:
"We’ll also need a page to display our Hello component. Create a file at the root of proj named index.html with the following contents:"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<!-- Dependencies -->
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- Main -->
<script src="./dist/bundle.js"></script>
</body>
</html>
"Notice that we’re including files from within node_modules. React and React-DOM’s npm packages include standalone .js files that you can include in a web page, and we’re referencing them directly to get things moving faster. Feel free to copy these files to another directory, or alternatively, host them on a content delivery network (CDN). Facebook makes CDN-hosted versions of React available..."
I added the Dependancies to my index.html file and it sorted this issue.
Hopefully that helps someone else who stumbles across this.
I have a Django project and I want to use React on it. I have already created my own components and this works, but I dont know how to import third-party components from CDN.
To do this, I did:
Import React (develop or production version) in the base template:
<!-- baseTemplate.html -->
{# ReactJs#}
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
Also import the file where I create my components
<!-- baseTemplate.html -->
<script src="/one_directory/my_react.jsx" type="text/babel"></script>
and create the tag where it will be rendered.
<!-- template.html -->
<div id="container"></div>
And finally render my React components:
<!-- my_react.jsx -->
ReactDOM.render(
<App />,
document.getElementById('container')
);
This works correctly :)
Now, I want to import a third-party component (specifically, it's React Bootstrap Slider) from CDN, but I dont know how.
Maybe this is not possible, I dont know. How could I do it?
Thank you very much :]
I think you want a CDN from this npm package https://www.npmjs.com/package/react-bootstrap-slider (version 2.1.3)
There is a CDN at https://unpkg.com/react-bootstrap-slider
You can explore files for that at https://unpkg.com/react-bootstrap-slider/
However I could not get it to work as I get Component not found error.
In the github project https://github.com/brownieboy/react-bootstrap-slider it says
The control is implemented in UMD format, so should also work for
AMD/RequireJS, but I've not tested that. You can also add it as a
script tag.
If you want a CDN I you suggest to inform the owner to fix it or you can fork the project and generate a CDN-friendly file and host it yourself.
I downloaded React version 15 and created the following html document:
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/jsx">
// React Code Goes Here
var MyComponent = React.createClass({
render: function(){
return (<h1>Hello, {this.props.name}!</h1>);
}
});
ReactDOM.render(
<MyComponent name="world" />,
document.getElementById('container')
);
</script>
</body>
</html>
The same works fine in jsfiddle but not on my machine. I want to avoid installing React dev tools or anything extra. Is that possible to get it to work with what I have or do I absolutely need to install something else?
There are tons of tutorials out there but they all seem to be missing something to get me started
If you're sure you have the react.js and react-dom.js files in a folder called build at the same level as that html page, the only thing missing would be:
a script include for babeljs in order for you to be able to use the JSX code you have in the body's script tag, add this to the <head> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
As a precursory statement, I just want to make sure to mention that you probably won't want to do in-browser transpilation from JSX->JS for anything other than playing around with the technology. In a production environment you would want to precompile your JSX server-side or during a build step.
That being said, therein lies your problem: you're attempting to include JSX directly in the browser code, without including anything to do browser-side compilation for you.
Based on what I can see, it looks like the latest and greatest approach is to use <script type="text/babel"> now, instead of <script type="text/jsx">, and the compilation is accomplished via babel's browser.js.
This guide here appears to be mostly up to date: https://www.sitepoint.com/getting-started-react-jsx/
I'd say that if you are just starting react, a really good project to look at would be create-react-app. It does all the magic for you with one simple set up