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
Related
I am trying to require a react React module on plnkr in the script.jsx file using :
var AptList = require('./AptList');
Which is giving a "require is not defined" error.
I would like to know how to require modules on plnkr ?
You are not using any bundler, everything is in the browser, so you have to first include the script for that AptList component in your index.html:
<script src="AptList.js"></script>
<script src="script.jsx"></script>
That will already include the definition for that component. You need not (and cannot) use require there.
In AptList.js you need not have module.exports = AptList; because it will already have been imported using the script tag above. Also, you should remove the require inside script.jsx.
Now, the other big issue is you are using JSX, which is not supported natively by the browser. For that, you will need Babel, so add the following the scripts in index.html:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
Then, you have to add the following type to each script tag at the bottom, before the end of body:
<script type="text/babel" src="..."></script>
That will allow you to use ES6 syntax and JSX.
Here is the link to the plunk with everything working.
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 .
Up until now I was using links to minified AngularJS files in my code, but now there is a requirement because of which I have to use complete AngularJS file. I have downloaded it from the official site, and:
<script src="../Angular/angular.js"> </script>
<script src="../Angular/angular-animate.js"></script>
<script src="../Angular/angular-aria.js"></script>
<script src="../Angular/angular-cookies.js"></script>
<script src="Angular/angular-loader.js"></script>
<script src="../Angular/angular-message-format.js"></script>
<script src="../Angular/angular-messages.js"></script>
<script src="../Angular/angular-mocks.js"></script>
<script src="../Angular/angular-resource.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Angular/angular-sanitize.js"></script>
<script src="../Angular/angula-scenario.js"></script>
<script src="../Angular/angular-touch.js"></script>
and this is how I added all these files in my code, but it is not working, please let me know what is the correct way of using complete AngularJS file.
Your path for angular-loader is different from the rest of your paths. I'm not sure if any of them are correct. I'd recommend starting the Chrome developer tools and then going to the Network tab to see if all of your resources are loading correctly.
Looking at your codepen it appears that you are reloading the Angular libraries later in your HTML. That is probably causing Angular to reinstantiate and therefore destroying whatever you've done in your code in between. Try deleting or commenting out the lines where you load Angular from cloudflare.
I have a really basic app setup where I have the react lib and the router setup as global scripts and it seems that the Router requires the transformer to run. Is there any way that I can get it running without the transformer?
<script type="text/javascript" src="/js/vendor/react-with-addons.js"></script>
<script type="text/javascript" src="/js/vendor/JSXTransformer.js"></script>
<!-- if I remove the transformer then nothing is displayed on the page -->
<script type="text/javascript" src="/js/vendor/ReactRouter.min.js"></script>
Ok it seems that this was a user error. I had my main script setup as a jsx file :p
<script type="text/jsx" src="/js/dist/app.js"></script>
switching to a plain js did the trick!