Development electron app.
use zhe ES6 code in html is success.
but write ES6 code in alone js fail is error.
package.json:
{
"name": "app",
"version": "0.1.0",
"main": "main.js",
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0"
}
}
index.html in electron is success
<head>
<meta charset="UTF-8">
<title>STW</title>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
// import FF from'./Foo.js';
class F1 extends Component{
render(){
return <div>This is React component</div>
}
};
ReactDOM.render(<F1/>,document.getElementById("container"))
</script>
</body>
</html>
when i use import FF from'./Foo.js';it's error and show "Unexpected token import".
Foo.js
import React from 'react'
export default class Foo extends React.Component{
render(){
return <div>This is React component</div>
}
}
electron is latest version.
ES6 code in html <script type="text/babel"> is success,
How can i use zhe ES6 code in alone file ? thanks =.=
As for my knowledge, support for ES6 modules first needs to land in V8. For now you have to use:
const ReactDOM = require('react-dom')
Related
I have a Typescript react component/library
// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Image, Shimmer } from 'react-shimmer';
function App() {
return (
<div>
<Image
src="https://source.unsplash.com/random/800x600"
fallback={<Shimmer width={800} height={600} />}
/>
</div>
);
}
const render = (id: string) => ReactDOM.render(<App />, document.getElementById(id));
export default render;
I want it to be compiled to UMD format, to be consumed in HTML
// index.html
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script type="text/javascript" src="./compiled.js">
render('app');
</script>
</body>
</html>
Preferably I want to use a modern bundler like tsup. Because webpack just scares me.
Is this possible?
We have a requirement to use Loadable Components in a new NextJS app we are building. I believe in NextJS for this use case you tend to use their native dynamic import feature but we are pulling in code from our mature codebase with extensive use of 'Loadable Components' throughout so replacement with dynamic imports is pretty impractical (PR is here in our main codebase: https://github.com/bbc/simorgh/pull/10305).
I have put together a representive example in a repo to demonstrate an issue we are having: https://github.com/andrewscfc/nextjs-loadable
In this example I have introduced a loadable component to split the Layout component into its own bundle:
import * as React from 'react';
import Link from 'next/link';
import loadable from '#loadable/component';
const LayoutLoadable = loadable(() => import('../components/Layout'));
const IndexPage = () => (
<LayoutLoadable title="Home | Next.js + TypeScript Example">
<h1>Hello Next.js 👋</h1>
<p>
<Link href="/about">
<a>About</a>
</Link>
</p>
</LayoutLoadable>
);
export default IndexPage;
You can run this repo by running:
yarn && yarn dev (or equivalent npm commands)
If you navigate to http://localhost:3000/ the page body looks like this:
<body>
<div id="__next" data-reactroot=""></div>
<script src="/_next/static/chunks/react-refresh.js?ts=1663916845500"></script>
<script id="__NEXT_DATA__" type="application/json">
{
"props": { "pageProps": {} },
"page": "/",
"query": {},
"buildId": "development",
"nextExport": true,
"autoExport": true,
"isFallback": false,
"scriptLoader": []
}
</script>
</body>
Notice there is no html in the body other than the root div the clientside app is hydrated into: <div id="__next" data-reactroot=""></div>
The SSR is not working correctly but the app does hydrate and show in the browser so the clientside render works.
If you then change to a regular import:
import * as React from 'react';
import Link from 'next/link';
import Layout from '../components/Layout';
const IndexPage = () => (
<Layout title="Home | Next.js + TypeScript Example">
<h1>Hello Next.js 👋</h1>
<p>
<Link href="/about">
<a>About</a>
</Link>
</p>
</Layout>
);
export default IndexPage;
The body SSRs correctly:
body>
<div id="__next" data-reactroot="">
<div>
<header>
<nav>
Home
<!-- -->|<!-- -->
About
<!-- -->|<!-- -->
Users List
<!-- -->| Users API
</nav>
</header>
<h1>Hello Next.js 👋</h1>
<p>About</p>
<footer>
<hr />
<span>I'm here to stay (Footer)</span>
</footer>
</div>
</div>
<script src="/_next/static/chunks/react-refresh.js?ts=1663917155976"></script>
<script id="__NEXT_DATA__" type="application/json">
{
"props": { "pageProps": {} },
"page": "/",
"query": {},
"buildId": "development",
"nextExport": true,
"autoExport": true,
"isFallback": false,
"scriptLoader": []
}
</script>
</body>
I have attempted to configure SSR as per Loadable Component's documentation in a custom _document file:
import Document, { Html, Head, Main, NextScript } from 'next/document';
import * as React from 'react';
import { ChunkExtractor } from '#loadable/server';
import path from 'path';
export default class AppDocument extends Document {
render() {
const statsFile = path.resolve('.next/loadable-stats.json');
const chunkExtractor = new ChunkExtractor({
statsFile,
});
return chunkExtractor.collectChunks(
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
This is not working correctly and imagine it maybe because there is no where to call renderToString(jsx) as per their docs; I think this call happens internally to NextJS.
Has anyone successfully configured loadable components in NextJS with SSR? I can't seem to find the right place to apply Loadable Component's SSR instructions?
I have been following the tutorial provided by Meteor
but was unable to run the provided code properly. There is nothing displayed on the page after I start the application.
What could be the problem?
I'm using Meteor platform version 1.7.
I have installed React dependencies using a command:
meteor npm install --save react react-dom
I'm also getting error in the browser console:
Uncaught Error: Target container is not a DOM element.
at invariant (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:3462)
at legacyRenderSubtreeIntoContainer (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22109)
at render (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22190)
at Meteor.startup (main.js:8)
at maybeReady (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:927)
at HTMLDocument.loadingCompleted (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:939)
package.json:
{
"name": "test",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer"
},
"dependencies": {
"#babel/runtime": "^7.0.0",
"meteor-node-stubs": "^0.4.1",
"react": "^16.6.0",
"react-dom": "^16.6.0"
},
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
},
"testModule": "tests/main.js"
}
}
My file structure:
main.html:
<head>
<title>Todo List</title>
</head>
<body>
<h1>Hello!</h1>
<div id="render-target"></div>
</body>
main.js:
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import App from '../imports/ui/App.js';
Meteor.startup(() => {
render(<App />, document.getElementById('render-target'));
});
main.css:
body {
padding: 10px;
font-family: sans-serif;
}
App.js:
import React, { Component } from 'react';
import Task from './Task.js';
// App component - represents the whole app
export default class App extends Component {
getTasks() {
return [
{ _id: 1, text: 'This is task 1' },
{ _id: 2, text: 'This is task 2' },
{ _id: 3, text: 'This is task 3' },
];
}
renderTasks() {
return this.getTasks().map((task) => (
<Task key={task._id} task={task} />
));
}
render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{this.renderTasks()}
</ul>
</div>
);
}
}
Task.js:
import React, { Component } from 'react';
// Task component - represents a single todo item
export default class Task extends Component {
render() {
return (
<li>{this.props.task.text}</li>
);
}
}
The error is:
Uncaught Error: Target container is not a DOM element.
Update main.js file as like below
import React from 'react';
import { render } from 'react-dom';
import { Meteor } from 'meteor/meteor';
import App from '../imports/ui/App.js';
import './main.html'
I have imported main.html & it should work.
Also without above, you can remove blaze-template as like
meteor remove blaze-html-templates
and add static as like below
meteor add static-html
If you included your package.json then it would be easier to figure out what your problem is. Moreover, you should check out create-react-app to quickly bootstrap a react application with minimum fuss. The docs are pretty straightforward and very easy to setup. Hope this was helpful.
The problem has been resolved!
I had to remove blaze-html-templates and add static-html
meteor remove blaze-html-templates
meteor add static-html
I wonder if it is possible to pass an argument to a react entry point.
My entry point looks like this:
module.exports = {
entry: "./js/components/Application.js",
output: {
path: "./dist",
filename: "bundle.js"
},
// ...
}
My Application.js:
import React from 'react';
import ReactDOM from 'react-dom';
import AnotherComponent from './AnotherComponent';
ReactDOM.render(<AnotherComponent />, document.getElementById('content'));
Not I bundle my application with webpack and include this bundle in another application. This application provides a div with id "content":
<body>
<div id="content"></div>
<script src="bundle.js" />
</body>
I know that I can do something like
<script src="bundle.js" myargument="somevalue" />
but how can I get this value for passing it to the react component AnotherComponent as a property?
What about
<script id="bundle" src="bundle.js" myargument="somevalue" />
and then
const myScript = document.getElementById('bundle');
ReactDOM.render(<AnotherComponent
myArgument = {myScript.getAttribute('myargument')}
/>, document.getElementById('content')
);
In ReactJS file src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
window.MyReactApp = {
init: (selector, myData) => {
selector = selector.substring(1);
const renderComponent = (<homeComponent mydata={myData} />);
ReactDOM.render(renderComponent, document.getElementById(selector));
},
};
Now load the ReactJs App where you want to load.
<script type="text/javascript" src="bundle.min.js"></script>
<div id="load-myreactapp"></div>
<script type="text/javascript">
const myData = {};
MyReactApp.init('#load-myreactapp', myData);
</script>
I'm new to react, and I am having trouble with multiple components.
This is the error I get Uncaught ReferenceError: require is not defined
Code that I'm using.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="js/layout.js"></script>
</body>
</html>
layout.js
import React from "react";
import ReactDOM from "react-dom";
import Header from "./header";
class Layout extends React.Component {
render() {
return(
<div>
<Header/>
</div>
);
}
}
const app = document.getElementById("app");
ReactDOM.render(<Layout/>, app);
And header.js
import React from "react";
import ReactDOM from "react-dom";
export default class Header extends React.Component {
render() {
return(
<h1>Hello header</h1>
);
}
}
Babel handles only the transpilation part (i.e. converts es2015 and jsx syntax into valid ES5). But you still need to use either a bundler (webpack, browserify) or a module loader (systemjs or jspm) to load modules.
Here is an example using SystemJS. Example.
Configure systemjs loader to load libs from cdn
System.config({
transpiler: 'babel',
baseURL: '',
map: {
babel: 'https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js',
react: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js',
'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js'
}
});
// load application
System.import('script.js');
Import local files
// inside script.js
import React from "react";
import ReactDOM from "react-dom";
import Header from "./header.js"; //note extension
class Layout extends React.Component {