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
Related
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.
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 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
I am trying to learn Angular js I am following angular-phonecat tutorial . I am trying to organize my controllers inside my controllers folder for that I am using this structure :
app/js
js/controllers/
Ctrl1.js
movies.js
Here everything is working fine but there is an issue suppose I have 100 controllers then how can I use them inside my html files which is like this :
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/controllers/movies.js"></script>
<script src="js/controllers/Ctrl1.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Is there any way by which I can reduce the calling of scripts in this line below how can I put this in one call where these two files can be called via one or there is any other efficient way :
<script src="js/controllers/movies.js"></script>
<script src="js/controllers/Ctrl1.js"></script>
Have a look at gulp. Gulp allows you to bundle all related files into one file which you can refer to in the index.html. For example, in my gulpfile I do this for all my JS files:
gulp.task('js', function() {
return gulp.src('./src/js/**/*.js').pipe(concat('main.js').on('error', gutil.log))
.pipe(gulp.dest('dist/js').on('error', gutil.log))
});
This places them all into a single file called main.js inside a dist folder which I can then deploy.
Oh - and we can then refer to this file in the index like so:
%body.container-fluid
%ui-view
%script{ src: "js/main.js", async: true }
Note - This is HAML syntax not pure HTML. Also - please bear in mind that gulp is made it by different plugins designed to do different things - each of which will need to be installed:
var uglify = require('gulp-uglify'),
// Allows me to use it in the gulpfile as uglify.foo()
I found a better solution to this problem. Simply go through this tutorial :http://yeoman.io/codelab/install-generators.html And you will get to know how to install yoman, here they are using grunt here it will generate all the hard work for you .
you simply need to run this command :
grunt build
grunt serve:dist
It will create a full minified js and css inside a dist directory and you can do whatever you want to do with that directory . You can also watch a this video :https://www.youtube.com/watch?v=gKiaLSJW5xI . I hope this way you can organise your files better .
I'm trying to modify an example in this website. I run this example on GoogleChrome, But the compiler or whatever it is, gives me the following error
"Uncaught ReferenceError: store1 is not defined".
in my browser, I type the following: localhost/helloext/index.html and I expected to see the result is, RadarFillExample as in the above mentioned website.
index.html Contains the following:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app2.js"></script>
</head>
<body></body>
</html>
app2.js Contains the sourceCode available in the above mentioned website.
And the files(index.html, app2.js and extjs directory) are located inside D:\xampp\htdocs\helloext\
Can anyone tell me how to fix this error, so that i can modify the code?
your help is appreciated
From the error message, its clear that your store named store1 is not defined.
The data store for the example comes from another file namely: example-data.js. Your application should have access to this file or you should define a store with proper data for plotting the graph.
It's been year but I faced this problem today and would like to share a solution.
Yes, you are missing the example-data.js file which is to be referenced from the HTML page. This .js file creates the data that is populated in the chart.
example-data.js can be found under extjs/examples/example-data.js. Note: extjs is the unzipped folder which you downloaded from sencha.com.