Joan: /* Exemple 2 */

2022-04-28T15:36:15Z

Exemple 2

Mostra els canvis

Joan: /* Exemple 2 */

2022-04-28T15:33:08Z

Exemple 2

Joan: /* Exemple 1 */

2020-04-09T20:35:53Z

Exemple 1

Pàgina nova

=Exemples que funcionen=
==Exemple 1==
url original:
*https://dominoc925.blogspot.com/2019/10/simple-example-of-reactjs-and.html
explicació a la wiki:
*[[Aplicació_Reactjs_a_través_del_servidor_web_Express]]

==Exemple 2==
*https://codesandbox.io/s/43p10r6w94?file=/src/index.js:0-198

Dependències:
*ol: 4.6.5
*react: 16.3.2
*react-dom: 16.3.2
*react-scripts: 1.1.4
<pre>
$ npm install
$ npm install ol --save
$ npm install react --save
$ npm install react-dom --save
$ npm install react-scripts --save

$ npm start
</pre>

'''src/index.js''':
<pre>
import React from "react";
import { render } from "react-dom";
import MyMap from "./MyMap";

const App = () => (
<div>
<MyMap />
</div>
);

render(<App />, document.getElementById("root"));
</pre>
'''src/MyMap.js'''
<pre>
import React, { Component } from "react";
import OlMap from "ol/map";
import OlView from "ol/view";
import OlLayerTile from "ol/layer/tile";
import OlSourceOSM from "ol/source/osm";

class PublicMap extends Component {
constructor(props) {
super(props);

this.state = { center: [0, 0], zoom: 1 };

this.olmap = new OlMap({
target: null,
layers: [
new OlLayerTile({
source: new OlSourceOSM()
})
],
view: new OlView({
center: this.state.center,
zoom: this.state.zoom
})
});
}

updateMap() {
this.olmap.getView().setCenter(this.state.center);
this.olmap.getView().setZoom(this.state.zoom);
}

componentDidMount() {
this.olmap.setTarget("map");

// Listen to map changes
this.olmap.on("moveend", () => {
let center = this.olmap.getView().getCenter();
let zoom = this.olmap.getView().getZoom();
this.setState({ center, zoom });
});
}

shouldComponentUpdate(nextProps, nextState) {
let center = this.olmap.getView().getCenter();
let zoom = this.olmap.getView().getZoom();
if (center === nextState.center && zoom === nextState.zoom) return false;
return true;
}

userAction() {
this.setState({ center: [546000, 6868000], zoom: 5 });
}

render() {
this.updateMap(); // Update map on render?
return (
<div id="map" style={{ width: "100%", height: "360px" }}>
<button onClick={e => this.userAction(<!DOCTYPE html>
<html lang="en"><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>React App</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

</body>

</html>n be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

</body>

</html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">

<link rel="manifest" href="%PUBLIC_URL<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>React App</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

</body>

</html>%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>React App</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

</body>

</html>)}>setState on click</button>
</div>
);
}
}

export default PublicMap;
</pre>
'''public/index.html''':
<pre>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>React App</title>
</head>

<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>

</body>

</html>
</pre>
==Exemple 3: react-openlayers==
*https://www.npmjs.com/package/react-openlayers
A minimal React wrapper of OpenLayers 3+ written in TypeScript

Instal·lo les dependències:
<pre>
$ npm install react-openlayers --save-dev
</pre>
Descarrego el projecte i l'instal·lo:
<pre>
$ git clone https://github.com/allenhwkim/react-openlayers.git
$ cd react-openlayers
$ npm install
$ npm start
</pre>
i funciona:
*http://localhost:9001/#/
És un codi que té moltes opcions
{{Autor}}, abril 2020

@@ Línia 15: / Línia 15: @@
 *react-scripts: 1.1.4
 <pre>
-$ npm install
+$ npm install (hem d'haver creat prèviament el ''package.json'' que hi ha en el projecte)
 $ npm install ol --save
 $ npm install react --save
@@ Línia 319: / Línia 319: @@
 </html>
 </pre>
 ==Exemple 3: react-openlayers==
 *https://www.npmjs.com/package/react-openlayers

Openlayers amb ReactJS - Historial de revisió

Joan: /* Exemple 2 */

Joan: /* Exemple 2 */

Joan: /* Exemple 1 */