I recently got started with web development. And I am stuck with sth that's probably a trivial problem. I am trying to figure out how I can pass data from my dynamically created index.html to my (typescript) react frontend (created via create-react-app).
Suppose we have a flask web server that, when the '/' resource is requested, gathers some initial user data, instantiates a page template with it and returns that page:
# flask webserver
from flask import Flask
from flask import render_template
app = Flask(__name__)
#app.route('/')
def index():
initial_user_data = {"foo":"bar",
"baz":"biz"}
return render_template('index.html', initial_data=initial_user_data)
if __name__ == '__main__':
app.run(debug=True)
For the sake of simplicity initial_user_data stores hard-coded data here. In my actual use case the dictionary gets populated with various user-specific data items that are read from files etc.
Next, let's assume index.html uses the initial_data.
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>React App</title>
</head>
<body>
<script>
initial_data = {{initial_data | tojson}}
console.log(initial_data)
</script>
<div id="root"></div>
...
</body>
</html>
When we now start the webserver and open a browser to navigate to the page when can see the initial_data being logged to the browser's console output. So far, so good.
Now my problem: how can I pass initial_data to my (typescript) react components? Conceptually I want to do sth like this:
// App.tsx
import React from 'react';
const App: React.FC = () => {
// make use of 'initial_data'
const init_data = initial_data;
return (
<div ...
</div>
);
}
But yarn build will give me
Cannot find name 'initial_data'. TS2304
4 |
5 | const App: React.FC = () => {
> 6 | const init_data = initial_data;
| ^
7 | return (
8 | <div className="App">
9 | <header className="App-header">
How can I make initial_data accessible to my react components?
Edit: If this pattern of passing something from the index.html (that gets created on the backend when a clients connects) to my typescript react components is flawed then I'd also accept an answer that points me to the correct pattern in this case.
Something along the lines of (obviously just making sth up, just trying to illustrate what I mean)
Define a typescript data type that stores the user data that can be accessed from all your components
in your main react component use a life-cycle method like 'componendDidMount' to send a request to the backend to fetch the initial_data
When the response comes back store it in 1)
I'd accept an answer that adds shows some sample code for 1) 2) 3)
Many thanks for your help!
When you pass global variables inside a react component, it's always a better way to pass it using the window object.
In this case, you need to pass it as window.initial_data. This informs the linter and react that it's a global variable. As it is not defined inside the file.
Related
Generate structured data with javascript. But structured data testing tool doesn't catch any data.
Why Rich-Results doesn't catch generate structured data with javascript.
Google Doc Said:
Google can read JSON-LD data when it is dynamically injected into the page's contents, such as by JavaScript code or embedded widgets in your content management system.
from this doc
and how to do reference here.
But Testing tool doesn't catch the data.
Test Page:
Page A, Page B
Page's JSON-LD data is correct, I copy to Testing tool, it can found.
Web page is build by Next.js^10.2.3.
I used server-side render structured-data before.
Encountered page large than 1M, can't load page.
So I changed it to client-side dynamically injected into the page's contents.
import React from 'react';
import Head from 'next/head';
import { map, keys } from 'ramda';
function SeoSchema({ schema }: { schema: Object }) {
// client side render only
if (!process.browser) return null;
return (
<Head>
{/* schema */}
{map((key) => (
schema[key] && (
<script
type="application/ld+json"
key={`schema-${key}`}
// eslint-disable-next-line
dangerouslySetInnerHTML={{ __html: JSON.stringify(schema[key]) }}
/>
)
), keys(schema))}
</Head>
);
}
export default SeoSchema;
What I'm missing?
If there no answer, I will change back to server-side render structured-data.
i am trying to build web components from react components, it is all working fine, but there are two problems i am trying to solve:
Is there a way to convert such web components to pure web component (using webpack, transpile or some other way), so that react and other dependencies are not bundled?
Is there a way to just include the required portion of dependencies or it is all/none only, and have to use external setting of webpack to use host's version?
thanks
For the first question, there is no direct way to convert React component into a Web Component. You will have to wrap it into a Web Component Class:
export function MyReactComponent() {
return (
<div>
Hello world
</div>
);
}
class MyWebComponent extends HTMLElement {
constructor() {
super();
// Do something more
}
connectedCallback() {
// Create a ShadowDOM
const root = this.attachShadow({ mode: 'open' });
// Create a mount element
const mountPoint = document.createElement('div');
root.appendChild(mountPoint);
// You can directly use shadow root as a mount point
ReactDOM.render(<MyReactComponent />, mountPoint);
}
}
customElements.define('my-web-component', MyWebComponent);
Of course, you can generalize this and create a reusable function as:
function register(MyReactComponent, name) {
const WebComponent = class extends HTMLElement {
constructor() {
super();
// Do something more
}
connectedCallback() {
// Create a ShadowDOM
const root = this.attachShadow({ mode: 'open' });
// Create a mount element
const mountPoint = document.createElement('div');
root.appendChild(mountPoint);
// You can directly use shadow root as a mount point
ReactDOM.render(<MyReactComponent />, mountPoint);
}
}
customElements.define(name, MyWebComponent);
}
register(MyReactComponent, 'my-web-component');
Same register function can be now re-used across all the components that you want to expose as web components. Further, if your component accepts props that should be passed, then this function can be changed to accept third argument as array of string where each value would be registered as a setter for this component using Object.define. Each time a setter is called, you can simply call ReactDOM.render again.
Now for the second question, there are multiple scenarios with what you are trying to do.
If you are bundling application and loading dependencies like React or others using CDN, then Webpack externals is a way to go. Here you will teach Webpack how to replace import or require from the global environment where app will run.
If you are bundling a library which you intend to publish to NPM registry for others to use in their applications, then you must build your project using library target configuration. Read more about authoring libraries here.
Bundling for libraries is slightly trickier as you will have to decide what will be your output format (common.js, ES Modules or UMD or Global or multiple formats). The ideal format is ES Module if you are bundling for browser as it allows better tree shaking. Webpack previously did not support Module format and has recently started supporting it. In general, I recommend Webpack for applications and Rollup.js for libraries.
If you're looking to do this manually, the answer from Harshal Patil is the way to go. I also wanted to point out a library that I helped create, react-to-webcomponent. It simplifies this process and seamlessly supports React 16-18.
React is not a library made to build native web-components.
Writing web-components by hand is not the best option neither as it won't handle conditions, loops, state change, virtual dom and other basic functionalities out of the box.
React, Vue Svelte and other custom libraries certainly have some pros while native web-components have many other advantages like simplicity of ecosystem and being ported by browsers and W3C.
Some libraries that will help you write native web-components in a modern and handy way:
Lego that is alightweight, native and full-featured in a Vue style.
Nativeweb lightweight and raw web-components
ElemX a proof-of-concept that binds native web-component to ElemX functionalities.
If you really wanted to wrap a React component into a native web component, you could do something like:
class MyComponent extends HTMLElement {
constructor() {
this.innerHTML = '<MyReactComponent />'
}
}
customElements.define('my-component', MyComponent)
And use it in your HTML page <my-component />
You can use remount library
/** Main.jsx */
import React from 'react'
import App from './App'
import { define } from 'remount';
define({'react-counter': App},
{
attributes: ['defaultValue'],
shadow:false
})
/** App.jsx */
import React from "react";
import Counter from "./components/Counter.jsx";
function App({defaultValue}) {
return (
<div>
<h1>Counter Component</h1>
<Counter defaultValue={defaultValue}/>
</div>
)
}
export default App;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<react-counter defaultValue="5"></react-counter>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
I'm trying to implement a simple banner Ad with Google AdSense inside my React website. I used create-react-app.
I've created a component wrapping the banner:
import React, { Component } from 'react';
class AdBanner extends Component {
componentDidMount () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
console.log('DID IT!!');
}
render () {
return (
<ins className="adsbygoogle"
style={{ display: "block"}}
data-ad-format="fluid"
data-ad-layout-key="-fb+5w+4e-db+86"
data-ad-client="ca-pub-xxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx">
</ins>
);
}
}
export default AdBanner;
And I've added the following script inside the <head> tag of my index.html file
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
## The problem ##
The Ad is not showing up in any way! The compiler is ok and browser does not give any message in the console (apart of 'DID IT!'. I've created the Ad in the console two days ago.
I've tried also deactivating React strict mode.
Thankssssss
When you say ad is not showing up - do you see empty white rectangle where ad should be? Also do you see googleads.g.doubleclick.net/pagead/ads? requests in network tab? If so - how many? If you see 2 then ad requests are made and what might be happening is that AdSense didn't find a good ad, which is normal. You can also try adding data-adtest="on" to the <ins> tag which might help to force an ad.
I created a React/Typescript project with dotnet new "ASP.NET Core with React.js".
index.cshtml:
<div id="react-app"></div>
#section scripts {
<script src="~/dist/main.js" asp-append-version="true">
</script>
}
boot.tsx(shortened):
function renderApp() {
ReactDOM.render(
<AppContainer>
<BrowserRouter children={ routes } />
</AppContainer>,
document.getElementById('react-app')
);
}
renderApp();
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
How can I pass ASP.Core generated information(the routes from the controllers) to my react/typescript code?
To use server-side rendering in your application, follow the following steps:
1 - Modify App_Start\ReactConfig.cs (for ASP.NET MVC 4 or 5) or Startup.cs (for ASP.NET Core) to reference your components:
namespace MyApp
{
public static class ReactConfig
{
public static void Configure()
{
ReactSiteConfiguration.Configuration = new ReactSiteConfiguration()
.AddScript("~/Scripts/HelloWorld.jsx");
}
}
}
This tells ReactJS.NET to load all the relevant JavaScript files server-side. The JavaScript files of all the components you want to load and all their dependencies should be included here.
2 - In your ASP.NET MVC view, call Html.React to render a component server-side, passing it the name of the component, and any required props.
#Html.React("HelloWorld", new
{
name = "Daniel"
})
3 - Call Html.ReactInitJavaScript at the bottom of the page (just above the ) to render initialisation scripts. Note that this does not load the JavaScript files for your components, it only renders the initialisation code.
<!-- Load all your scripts normally before calling ReactInitJavaScript -->
<!-- Assumes minification/combination is configured as per previous section -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
#Scripts.Render("~/bundles/main")
#Html.ReactInitJavaScript()
4 - Hit the page and admire the server-rendered beauty:
<div id="react1">
<div data-reactid=".2aubxk2hwsu" data-react-checksum="-1025167618">
<span data-reactid=".2aubxk2hwsu.0">Hello </span>
<span data-reactid=".2aubxk2hwsu.1">Daniel</span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="/Scripts/HelloWorld.js"></script>
<script>ReactDOM.render(HelloWorld({"name":"Daniel"}), document.getElementById("react1"));</script>
The server-rendered HTML will automatically be reused by React client-side, meaning your initial render will be super fast.
If you encounter any errors with the JavaScript, you may want to temporarily disable server-side rendering in order to debug your components in your browser. You can do this by calling DisableServerSideRendering() in your ReactJS.NET config.
For a more in-depth example, take a look at the included sample application (React.Samples.Mvc4).
5 - Server-side only rendering
If there is no need to have a React application client side and you just want to use the server side rendering but without the React specific data attributes, call Html.React and pass serverOnly parameter as true.
#Html.React("HelloWorld", new
{
name = "Daniel"
}, serverOnly: true)
And the HTML will look like the one following which is a lot cleaner. In this case there is no need to load the React script or call the Html.ReactInitJavaScript() method.
<div id="react1">
<div>
<span>Hello </span>
<span>Daniel</span>
</div>
</div>
Can anyone help me regarding how to use meta tags with dynamic value in react js?
Please see the image for my requirement,
I am using the extra metatag html tag here(because react require wrap complete html inside the single tag else it raise error). I can also use div/p any html tag, but is this right way to render the react component? having extra html tag than inside that meta tags. Will this work for SEO?
Please suggested me any other good way to use meta tags manually.
I can see few issues regarding the code which you shared.
Meta tags come under head, but your react components would be rendered in your body tag.
Considering SEO part, google can parse JS now so your tags would be read but bing and if you consider yahoo still cannot still do that( Google also is really not that efficient still, faced too many issues regarding while handling SEO's with single page app)
If your reacts components uses Link to navigate to other components which I am assuming it would it case of SPA it would not work, because crawlers try to reach you page directly.
Now,if you have a single page app with a single component you can try react-helmet , but if it involves multiple components and navigations I would suggest you to go for pre-rendering,maybe using phatom-js or pre-render.io(which indirectly uses phantomjs).
If your only concern is meta tags, then you can embed you meta tags directly into your html code and not in the components. This would really help the crawlers to see the meta tags.
But,if you also want crawlers to see your content, pre-rendering is best solution which I can think of now.
If you are serving your React bundle from a server, you can dynamically generate meta tags on the server.
Essentially, in your public/index.html file you want to replace the metadata with an identifiable string:
<!-- in public/index.html -->
<title>$OG_TITLE</title>
<meta name="description" content="$OG_DESCRIPTION" />
<meta property="og:title" content="$OG_TITLE" />
<meta property="og:description" content="$OG_DESCRIPTION" />
<meta property="og:image" content="$OG_IMAGE" />
And then on the server, you want to replace these strings with the dynamically generated information. Here is an example route with Node and Express:
app.get('/about', function(request, response) {
console.log('About page visited!');
const filePath = path.resolve(__dirname, './build', 'index.html')
fs.readFile(filePath, 'utf8', function (err,data) {
if (err) {
return console.log(err);
}
data = data.replace(/\$OG_TITLE/g, 'About Page');
data = data.replace(/\$OG_DESCRIPTION/g, "About page description");
result = data.replace(/\$OG_IMAGE/g, 'https://i.imgur.com/V7irMl8.png');
response.send(result);
});
});
Taken from this tutorial here: https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/
Create React App produces a static bundle with HTML, JS, and CSS. It can’t possibly give you a dynamic <meta> tag because the result HTML is created ahead of time.
While changing document.title with something like React Helmet makes sense, changing <meta> tags doesn’t make sense unless your app is server rendered. Server rendering is not a supported feature of Create React App so if you want to use it, you might want to check out some alternatives such as Next.js.
That said, if you don’t want full server rendering and only need to change <meta> tags, you could do this by hand as described here.
I hope this helps!
** no need to install express node and all..
** just add react-helmat & must add Helmat-meta tag all routing container. (otherwise its still show home page meta tag)
** react return single element, so you must add into parent element like (div, form)
import { Helmet } from "react-helmet";
import MetaDataJSON from "./MetaDataJSON_File";
constructor(){
this.metaDetails = {};
}
UNSAFE_componentWillMount(){
let curPath = window.location.pathname
this.metaDetails = getMetaData(curPath);
}
export const getMetaData = (pathname) =>{
const metaObj = MetaDataJSON; // import meta json and check the route path is in equal to your meta json file
let metaPath = Object.keys(metaObj);
if (metaPath.indexOf(pathname) >= 0) {
return metaObj[pathname];
}else{
return metaObj["/"];
}
}
// you must add in all component (where routing container)
render(){
return(
<div>
<Helmet>
<title>{this.metaDetails.title}</title>
<meta name="description" content= {this.metaDetails.description}/>
<meta name="keywords" content= {this.metaDetails.keywords} />
</Helmet>
<div>
)
}
There Is a Package Named React-Helmet available it helps to take control over Your Head tags on each route.
Helmet takes plain HTML tags and outputs plain HTML tags. It’s dead simple, and React beginner friendly.
<Helmet>
<title>{context.StoreName}</title>
<meta name="theme-color" content={`${context.ThemeColor}`}/>
</Helmet>
reference - https://codeburst.io/how-to-control-head-tags-in-react-seo-friendly-8264e1194880