I've been trying to run some of the basic React examples in Electron App, but nothing shows up, even though there is no errors.
Here's a file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const React = require('react');
const ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
I have the following packages installed: react, react-dom and electron.
Am I doing something wrong? Thanks in advance!
type="text/babel" isn't recognized by browsers as a valid script type, so it'll just ignore it and skip over it completely, hence the lack of any error. You need to include the babel script to make it parse, like so:
<body>
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
// your react code here
</script>
</body>
This is fine for exploration and prototyping, but it's not good if you want to release the app for others to use. Having babel parse the script on-the-fly can weigh on performance and memory usage.
Instead, look into a tutorial on how to pre-compile your scripts and run them that way. This boilerplate could serve as a good reference.
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 understand that runtime bundling in the client side does not have access to the file system so import statements do not work. Does anyone have a solution to this? I can't compile my code via the server side (webpack, gulp, etc..) and it has to be a client side solution. Do I need to build a virtual file system, or are there libraries out there where I can use the import statement in the es6 code that gets transpiled by babel-standalone?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>babel-standalone example</title>
</head>
<body>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"> </script>
<script type="text/babel">
import {Hello} from './test.js';
console.log(Hello);
</script>
</body>
</html>
//test.js
export default const Hello = 'hello';
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'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
I have only been learning React in a week so I am new to it and I am trying to write a simple todo app.
Originally I wrote all of the components in one file and loaded that file into the HTML file and it worked great. Now I am refactoring and trying to split the components into different files.
My full code is on my Github https://github.com/yasgreen93/todolist-react on the extracting-files branch.
I have split up each component into different files and have an linked them in script tags into my HTML. This is what my HTML file looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel" src="scripts/components/TodoListApp.js"> </script>
<script type="text/babel" src="scripts/components/CompleteTodo.js"></script>
<script type="text/babel" src="scripts/components/TodoList.js"></script>
<script type="text/babel" src="scripts/components/SingleTodo.js"></script>
<script type="text/babel" src="scripts/components/AddTodo.js"></script>
<script type="text/babel" src="scripts/components/CompleteTodoButton.js"></script>
<script type="text/babel">
ReactDOM.render(
<TodoListApp url="/api/todos" updateUrl="/api/todos/update" pollInterval={2000}/>,
document.getElementById('container')
);
</script>
</body>
</html>
In the console, I always get the error message Uncaught ReferenceError: TodoListApp is not defined. I have tried loading them in different orders with no success. I have also watched many videos where they do very similar approaches without using webpack and it works for them. I would like to get this working first without using webpack and then move on to learning that.
Can anyone see where I am going wrong?
You have to add your components to a global window variable in order to use them in html script tag. Like window.TodoListApp =.... var declaration is relative to a file in which you declare it.
But it is considered to be a bad practice to expose parts of you code to a global scope and to transpile JSX in the browser. Instead you should consider to use some building system like Webpack.
This way you would be able to use es2015 import syntax to import components from one file to another, bundle everything in one file and much more additional benefits like code minification, sourcemaps, livereload etc.
Setting up React for ES6 with Webpack and Babel
Using React with Webpack Tutorial