I'm currently integrating React within an existing website. The website is built on top of HTML, PHP with some jQuery. Essentially at the moment, the website is juggling all of those three at once to give it some semblance of responsiveness and it's a big mess. I'm hoping I can put React to work and at least simplify some parts of it.
So, at the moment I have a PHP page. I have managed to integrate some react functionality by following this guide. I have:
<div id="like_button_container"></div>
Which is being rendered as a React component.
Is there any way to pass extra information to the React Component as I would while using standard React?
Something along these lines:
<div id="like_button_container">[object]</div>
So can I initialize the React component with different data depending on the page?
Hope this makes sense.
The easiest way for you to do it will be to declare a <script></script> with the javascript data you would like to get from the react app
<script type="text/javascript">
window.myData = { foo: 'bar'};
</script>
<div id="like_button_container">
</div>
Be sure that the react app is loaded after this <script /> html tag
Related
I am learning React.js, and I have noticed that each React file appears to be just a mix of JavaScript and HTML. But I enjoy having distinct files for my HTML and JS. So, I am wondering if I can have these two independent files but also include a link (or something) in either the HTML or JS file, so that they may communicate with one another.
Thank you.
React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.props.
In other words, it was more simple than we separate html and render it on React, as a component.
If we still want to access html page via any page that created with react, we can did it via a href.
For any other way like import it (maybe), i think it was too complicated because of some reason.
Hope you will more understand about react with this react docs link
React is used to build single-page applications which is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run . this single HTML page is index.html located in the public folder (if you're using create-react-app)
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="%PUBLIC_URL%/lib/wow/wow.min.js"></script>
<script src="%PUBLIC_URL%/lib/easing/easing.min.js"></script>
<script src="%PUBLIC_URL%/lib/waypoints/waypoints.min.js"></script>
<script src="%PUBLIC_URL%/lib/owlcarousel/owl.carousel.min.js"></script>
<script src="%PUBLIC_URL%/lib/tempusdominus/js/moment.min.js"></script>
I copied my assets folder in the public folder of the React project and put all reference tags accordingly in the head section and in the body section but when the application loads everything is working except Javascript (animation, some scroll functions are not working) some of my js working some of it is not, anyone with the same problem or anyone who solved it, I've tried everything but got no luck, please help me if you can.
Most of the JavaScript libraries you've included won't work in a React application. You either need to find React friendly alternatives to those, or create special wrappers. This happens because methods like document.querySelector will not work out of the box in a React application, because you either need to wrap them in a useEffect hook to make sure your DOM is loaded, or use useRef instead.
I am using Shopify App Bridge to embed my app in the Shopify admin with the App Bridge Navigation bar. I have spend days trying to work out how to add a loading indicator between pages as it currently loads but the previous page is still there until the next page is ready to be displayed and there is no indication of loading. Is there a simple fix for this as I have little understanding of javascript and have a working app using flask and python but can't understand what I need to add to my html templates to get it working.
I have tried the Shopify docs, most specifically - https://shopify.dev/tools/app-bridge/actions/loading
I added the following in the head of the html templates:
<script src="https://unpkg.com/#shopify/app-bridge#1.10.1/umd/index.js"></script>
and in the body of the html templates:
<script type="text/javascript">
import createApp from '#shopify/app-bridge';
import {Loading} from '#shopify/app-bridge/actions';
const app = createApp({
apiKey: '12345',
shopOrigin: shopOrigin,
});
const loading = Loading.create(app);
</script>
I have added my apiKey and shopOrigin base domain directly just to test, but I am unsure if this is what I need to do and if so what else do I need to add for the loading part.
It seems that I might need to add this, but not sure where or what I need to Do when loading starts.
loading.subscribe(Loading.Action.START, () => {
// Do something when loading starts
});
Any help or pointers would be greatly appreciated, thanks.
Shopify has two key things. I use neither of them and no one cares, and really, it does not matter, but if you want to be a perfectionist, the routine could be:
You prep for yourself their Skeleton components, which you can load immediately, and thus fake out the user that you are presenting content real soon now. Secondly, upon rendering the fake-out skeleton, you start the loading component and it just goes. Once you actually get your content, you overwrite the Skeleton and end loading.
It is pretty simple. All this is plug and pray with Polaris. If you are not using Polaris, you're on your own to invent whatever works for you. App Bridge is just that, a bridge to secure communications, not a UI/UX provider. So don't count on it for much interactivity other than the very basics.
I want to create an in-repo addon to make certain modifications (styles, templates, etc.) to an existing ember app in an encapsulated way, but I'm having troubles overriding the templates.
Right now, I'm trying to override an existing component template with the template from a component with the same name in the in-repo addon. My code looks something like this:
// my-app/app/templates/components/foo.hbs
<h1>Some headline<h1>
// my-app/app/lib/my-addon/app/templates/components/foo.hbs
<h1>A different headline<h1> // -> this never shows up
I've tried a lot of switching around the template structure (like putting it in /addons or /app and linking to the template in different ways, but without success. My problem is that ember never uses the template from the addon.
If the component within the addon has a different name, like foobar.hbs, I can call it without a problem.
I'm currently looking through the source code and docs, trying to make sense of this. Is this even accomplishable the way I imagine it?
Thanks a lot!
You'd have to create the component in your ember app which, initially, will mean the component renders as nothing as it's a brand new, empty component. Then you'd dig into your node_modules, find the component file and template and copy over what you'd need to work with.
Here's an example. While working with ember-cli-jsonapi-pagination, I need to customize the paginate-collection component:
I created the component in my application.
I looked at the source: https://github.com/BookingSync/ember-cli-jsonapi-pagination/tree/master/app
In components/paginate-collection/component.js I copied over the component code, but you should be able to import it as well.
In components/paginate-collection/template.hbs I modified the template as needed.
I am currently working on learning React and Redux. Now I am getting a better grasp on what the two do:
React - Render components on the page
Redux - Keep the state of the page
My question though is: what should I actually be rendering with React? Is React suppose to render the entire page, even the header that won't change? For instance, am I suppose to create a new component for the header (logo and tabs, not changing), or just add that to the HTML file I will be rendering to?
I would suggest adding absolutely everything as a React component. Have a single <div> in your html file that you mount your React app to. I found that when I started using React I would try and avoid writing extra code (sure, writing a component for a header rather than the raw HTML is extra lines).
But this introduces complexity, in a way. Different parts of your app are rendered differently. In the long run, in my experience, consistency and readability is more important than fewer lines of code.
BTW if you're using stateless functional components (which your header would be), it's barely any extra code.
import React from 'react';
export default Header = () => <header>My wonderful app</header>;
like most other frameworks, you will have your base 'index.html' file that will include all of your dependencies and then a body which contains a div that you will render your react components into. it will look something like this:
<html>
<head>
<-- script, css, framework files added here -->
</head>
<body>
<div id="reactApp"</div>
</body>
</html>
then your main app file in react will have something along the lines of this at the bottom:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('reactApp')
);
everything else can be rendered within React and passed along to that div view.
It's entirely possible to have a hybrid page. For example: keep the navbar as native HTML where as the content is React.
Remember, React is component oriented so you could think of it as small widgets.
However, you will often have different widgets share the same state. In this case, it's good to make them part of the same tree of components.
Your question doesn't have a definite answer. It depends on what your application state needs are, but use React for the dynamic pieces of your page. Those parts that you're thinking are going to change without a reload will probably keep a state, so that's where React's stage management could come in handy.