I've wanted to create simple desktop app which uses React JS for data presentation.
However, I'm overwhelmed with so many modules and technologies. There is an electron react boilerplate which very complicated for starters like me.
I have simple project with these libs:
electron as dev
react
react-dom
I have main.js in my root path of my project which launches electron and it is taken from this quickstart example
I have index.html file where my JSX should be loaded:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="react-view"></div>
</body>
<script type="text/jsx">
// You can also require other files to run in this process
require('./scripts/application');
</script>
</html>
There are scripts/application.js file where my JSX will be populated to my <div id="react-view"></div>.
My App.jsx is very simple:
import React, {Component} from 'react'
class App extends Component{
render() {
return <h1>Hello From React</h1>;
}
}
export default App;
My application.js file looks like this:
import React from 'react';
import ReactDom from 'react-dom/server';
import App from 'components/App';
ReactDom.render(<App/>, document.getElementById("react-view"));
When I launch my electron application it opens me a window with empty content, which means that my JSX is not loaded. And it does not throw any error messages
What did I miss?
Here is the problem - no one understands JSX except a transpiler.
Two ways, you can get JSX work -
use a browser based/client side transpiler (use only for development
purpose)
include this file as a script tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
use type="text/babel" on your script tag which loads your JSX
<script type="text/babel" src="index.js"></script>
checkout the sample here - https://github.com/rabibiswal/reactdemo/tree/master/hello-world-jsx
user a server based transpiler - e.g. Babel
You can use different tools like webpack etc.
checkout the sample here -
https://github.com/rabibiswal/reactdemo/tree/master/hello-world-react-es5
You need to install node and use npm install and npm run build to get this code working
Related
I'm pretty new to React and I've been trying to set up a REACT app. However, I always get a blank page. Can anyone help?
HTML Code (index.html)
<html>
<head>
<meta charset="UTF-8" />
<title>Home</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
Javascript (index.js)
import React from "react"
import ReactDOM from "react-dom"
const page = (
<div>
<h1>My page</h1>
</div>
)
ReactDOM.render(page, document.getElementById("root"));
And yes, I am using a live server to run this code.
Browsers don't understand the text/babel MIME type.
It is there for Babel to search the DOM for scripts that it should process to convert from whatever they are (JS + JSX in this case) to JS.
You haven't included Babel in your page though.
You have a further problem in that inside your script you have import statements which depend on Node.js module resolution (and you're using a browser, not Node).
You should start at the beginning of the React guide.
You currently have an odd mix of about 20% of the quick guide to adding React to a website and 5% of using a Node.js based toolchain to transpile your code.
I recommend starting with create-react-app as it gives you a robust, performant foundation to get started with.
I want to use one component of my Vue website on another website by embedding it in HTML.
I decided to use https://github.com/karol-f/vue-custom-element and reference to this guide.
I tried the following in my main.js file after installing vue-custom-element and document-register-element npm packages.
import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import 'document-register-element/build/document-register-element';
import reusableComponent from './components/reusableComponent.vue';
Vue.use(vueCustomElement);
Vue.customElement('reusable-component', reusableComponent);
And then I was trying to use on another website like that.
<reusable-component><reusable-component />
<link href="/dist/static/css/app.36dd3e0b96e06ae6f3130a58cf185192.css" rel="stylesheet">
<script type="text/javascript" src="/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js">.
</script>
<script type="text/javascript" src="/dist/static/js/vendor.614f0593bd5c53cf6320.js">.
</script>
<script type="text/javascript" src="/dist/static/js/app.1c44a427c10b2e559de0.js"></script>
But before I tried to use the reusable component in another website, my main website was crashed by this error.
Has anyone faced this issue before?
Thank you in advance!
I think it's not correct use of vue-custom-element.
If you are going to use the whole project as a widget for the different project, it would be possible.
Vue.customElement('reusable-component', reusableComponent);
So, this library is to import the App.vue, not only specific component of the project.
Vue.customElement('reusable-component', App);
I used to write a react app by using create-react-app and there was no problem. However, I tried to make a small app using only index.html and app.js. Errors were raised in Chrome to import and JSX. For import, Uncaught SyntaxError: Unexpected tokenFor JSX, Uncaught SyntaxError: Unexpected token <Is it because I did not install BABEL or ES6.
I tried to install babel but it still did not work. I also tried adding type="text/babel"
index.html
<!Doctype html>
<html>
<head>
<title>Social Card</title>
<meta charset="utf-8" />
</head>
<body>
<h1>content fahafafafaddha</h1>
<div id="root">
</div>
<script src= "app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</body>
</html>
app.js
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<h1> Hello</h1>,
document.getElementById('root')
)
The error is definitely because your code has not been transpiled (which is what babel does). You say that you installed babel..what do you mean by that? You need to configure babel so that it transpiles your code before you run it. create-react-app does it for you by using webpack to transpile, bundle and minify your code.
If you want to learn more about the specifics of how things are working and how to configure your app, Create a new create-react-app, and then run
npm run eject
This will eject all of the previously hidden configurations and help you understand how things are functioning.
UPDATE
One thing you can try is to inst all babel-cli with
npm install --save-dev #babel/core #babel/cli
and then you can use it like
npx babel app.js --out-file app-compiled.js
and use app-compiled to run the server.
UPDATE 2
You are using ES6 syntax (the import statements) as well as JSX (using HTML-ish code in a javascript file). This code cannot be compiled directly by a JS compiler and that's why it's showing you the above error. In order to fix this you need to transpile it into JS that can be read by the browser. There are several ways to do that, some of which are:
Use webpack to transpile, minify, bundle and inject your code into your html.
Use babel-cli to transpile your code manually, and then import the transpiled file instead
Use babel standalone as is explained here
As for what I meant by use app-compiled, I meant include the output file from the babel-cli command (app-compile.js if you ran the command i wrote above) in your html instead of app.js
The order of your <script> tags is important. They are loaded in the order they appear. So your app.js must come after babel and react:
<div id="root"></div>
<!-- DEPENDENCIES MUST COME FIRST -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- Your scripts -->
<script type="text/babel">
const App = () => <h1>Hello React!</h1>;
ReactDOM.render(<App />, document.getElementById('root'));
</script>
Next you can't use import statements when including your dependencies only with script tags. They will simply be available in global namespace. You could maybe use modules too when specifying the type="module" attribute on the script tags but that feature was only fairly recently added and may not be supported by a percentage of currently used browser versions.
I am working on reactJS. I have created two components named App and Layout separately in two two javaScript files. My App should use Layout.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="react-0.14.7.js"></script>
<script src="react-dom-0.14.7.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="/js/components/App/App.js" ></script>
</body>
</html>
.
//App.js
var Layout = require('/js/components/Layout/Layout.js');
var App = React.createClass({
render() {
return(
<div>
<p>hello from App</p>
<Layout/>
</div>
)
}
});
ReactDOM.render(
<App />,
document.getElementById('root')
);
.
//Layout.js
Var Layout= React.createClass({
render:function(){
return(
<div>
<p>hi from Layout</p>
</div>
)
},
});
//even i tried 'export default Layout'
When i used import Layout from ('/js/components/Layout/Layout.js'). It gave an error unexpected token import.
With the use of require('/js/components/Layout/Layout.js'). it gave an error require not defined.
I tried many ways to get the Layout into App but the only solution i found were to use Browserify, node and npm, webpack...
But i want it to be executed with neither dependency packages nor jars. Is there any way that i can get this done?
Thanks in advance.
The short answer is no. Both Browserify and Webpack are module bundlers and will do file bundling for you. I'd recommend you to understand first the purpose of both tools.
The first thing Browserify website tells you is its sole purpose:
Browserify lets you require('modules') in the browser by bundling up all of your dependencies.
And same story for Webpack:
Webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.
Those are just very short descriptions of both of them.
I'm building a NW.js app, currently with babel-standalone and React. I can use ES6 import, but ES6 export on the other hand does not work, console spits out unexpected token export. What's going on?
index.html:
<html>
<head>
<meta charset="utf-8">
<script src="assets/react.min.js" charset="utf-8"></script>
<script src="assets/react-dom.min.js" charset="utf-8"></script>
<script src="assets/babel.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/babel" src="script/App.js"></script>
</body>
</html>
(yes, Babel indeed works, since React stuff inside runs OK)
In app.js:
import Lib from "./script/lib.js";
(and it's indeed exporting lib.js correctly, since that is the file responsible for the error)
In script/lib.js:
export default class {...};
I'm aware I can use Node modules instead, or even HTML script loading, but that's beside the point. I want to know why export doesn't work even if Babel doesn't seem to be broken, and even import works fine.
The problem is that Babel doesn't see files that were loaded via require, and they are loaded as they are, without transpilation.
There can be several ways to work this around, but the easiest one will be using Babel at build step.
Process your source code and then load processed code nw.js environment. The example how to do that you can find at this boilerplate project