React.js external script - javascript

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.

Related

How can I output hello world in this simple React code?

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

Calling a .js file (react) from index.html

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.

How to setup the environment for Angular 2.0?

Taking my initial steps towards Angular 2.0.
First thing is to set up the right environment for the development.
My index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to Angular 2.0</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<h1> Hello Angular 2 </h1>
<my-app> Loading app component....<my-app>
</div>
<!--js-->
<!-- Polyfills for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js#0.7.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.8"></script>
<script src="https://unpkg.com/systemjs#0.19.39/dist/system.src.js"> </script>
<script> window.autoBootstrap = true; </script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script>
System.import('app').catch(function (e) { console.log(e); });
</script>
<!--js-->
</body>
</html>
I have copied the content from https://angular.io/docs/ts/latest/guide/setup.html for the following files:-
app.component.ts
app.module.ts
main.ts
NPM is installed & running.
But in order to get the node_modules folders with the required dependencies for the app to run.
What commands do I need to run.
What are the commands that I need to run to set up the Angular 2 environment?
Please note I am new to NPM.
Thanks.
You have angular-cli wich is a good starter point. It will set you everything up according to best practices.
Simple way to set up your first Angular 2 Application.
Download the zip version here.firstAngular2App
Extract it to your destination folder. Assume D:
Open your command prompt(ensure that all required softwares are installed).
Navigate it to the folder. Use the command cd D:\firstAngular2App
Executre npm install
Once it is done use npm start
This way you have your first Angular2 appliction up and running.
npm install in the root project (it will create your node_modules from the dependencies mentioned in package.json file, should have those files as a start)
If you are already using Visual Studio Code as an IDE, you may want to explore how they recommend setting up Angular. I personally found their installation guide painless and feature-rich. I have never walked through an official Angular installation before due to being drenched in jQuery projects. This guide was simple enough to give me a good beginners understanding.

How to properly reference the path with newly installed packages using npm in Laravel?

I've installed ReactJS and Babel using npm in my laravel project. They are found in "node_modules" folder created by npm itself. But the problem is my react code doesn't seem to work if I import using this code:
<script src="node_modules/react/react.js"></script>
<script src="node_modules/react-dom/dist/react-dom.js"></script>
<script src="node_modules/babel-core/lib/api/browser.js"></script>
Is the format of the path correct? because if I just import using this type of code for all my imports required for ReactJS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
It seems to work if I just use the internet for getting the packages.
My react code is here:
<div id="myapp"></div>
<!-- JavaScripts -->
<script type="text/babel">
var BuckyComponent = React.createClass({
render: function() {
return(
<h2>{this.props.user} likes to eat {this.props.food}</h2>
);
}
});
React.render(
<div>
<BuckyComponent user="Arth" food="Bacon"/>
<BuckyComponent user="Arth" food="Pork"/>
<BuckyComponent user="Arth" food="Chicken"/>
</div>,
document.getElementById('myapp')
);
</script>
That's not the way you use Npm/Bower packages within Laravel. Either package manager will store its files outside the Laravel public folder, the first inside node_modules and the later inside bower_components. So they're not intended to be publicly available.
So how would you use their packages within Laravel? Using build systems like Laravel Elixir, just the Gulp or even the Grunt.
It's all up to you to copy the distribution files of React and Babel, concat them, minify them and the like. You'll end up with them inside the public folder, but before you'll want to do a nice concatenation and minification of all that stuff to serve the smallest possible number of files and their sizes.

Using requireJS to initiate React component in Symfony2 template

I am having trouble getting React components to work in my Twig templates in Symfony2, using RequireJS to initiate them. I was trying to get this one to work: https://github.com/rackt/react-autocomplete
First I installed it, locally, in parallel to where I have my css files for my templates:
npm install react-autocomplete
Then, some selected parts from my twig template:
<html>
<head>
<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"> </script>
</head>
<body>
<div id="react_demo">
<script type="text/jsx">
require(["{{asset('/bundles/demobundle/js/node_modules/react-autocomplete')}}"], function (ReactAutocomplete) {
alert('react-autocomplete loaded');
});
</script>
</div>
</body>
</html>
And now, to the problem: it doesn't seem to find my React component - or doesn't understand that it is a React component I'm trying to load... for some background info I haven't done anything except for including the React and Require JS files, and install the component. Perhaps I've missed something?
Uncaught Error: Load timeout for modules: /bundles/demobundle/js/node_modules/react-autocomplete
That one looks like a CommonJS module and while those can be loaded with RequireJS it needs some additional configuration.
While the packages can have the CommonJS directory layout, the modules themselves should be in a module format that RequireJS can understand. Exception to the rule: if you are using the r.js Node adapter, the modules can be in the traditional CommonJS module format. You can use the CommonJS converter tool if you need to convert traditional CommonJS modules into the async module format that RequireJS uses.
Also see http://requirejs.org/docs/commonjs.html and https://stackoverflow.com/a/16522990/1630906

Categories

Resources