so I am making a ReactJS app which requires me to change the theme and save it to localStorage so it can be used for something like https://www.youtube.com/watch?v=r_hYR53r61M. This guy has done it in JavaScript , I was hoping to do it in ReactJS. Please also suggest how to store it to localStorage.
Let's say your theme is dark. Then, just
const theme = "dark";
localStorage.setItem("theme",theme);
To get it,
const currentTheme = localStorage.getItem("theme");
Related
I have a component called </App>, and another component called </Interface>, both are already imported, how can I put Interface on top of App in the centre and export (export default function foo() ) it?
I am new to both React and HTML, so any helps are appreciated!
let me provide some guidance for you here:
1.) It is great that you are learning React, however since you are brand new to web development I strongly urge you to first learn to make a website with vanilla html, vanilla javascript, and css. It will provide you the fundamentals you need to jump into React.
2.) When you are asking about putting Interface on top of App, are you asking about how to make it so that Interface is displayed above App on the page that is rendered, or are you asking how to move it's position in the code? Also, I'm not sure why you have your app component as the source for the image. You should import images from your folder which contains your assets and use that instead.
You can simply import the interface component and use it in the app component. Please follow the provided example.
export default App= (props) => {
return
(
<Interface/>
)
}
Above mentioned would add Interface component to the App Component, similarly you can follow the same pattern to open any other component in the Interface component respectively.
I have a landing file which is in pure HTML. (landing.html)
I want the main URL of the website to be this file and the rest of the URLs to go in the React app.
For example:
example.com -> landing.html
example.com/app -> react app
example.com/login -> react app
As I said, I want the main URL to read the landing.html.
But the rest of the app should read the build version of React.
If it's possible i want it to be a part of the React app and not adding it directly in build folder. After running build it should be automaticly in build folder so basicly kinda implicitly to be a part of react app.
One more thing I dont want to convert it to jsx. 😁
How can I implement this ?
For the landing page use
var __html = require('./template.html');
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML={template} />
);
}
});```
on / route and other react components use on app and login route
I researched a bit and found two solution for it.
First : Using multipage app feature in Vite.
Second: confining nginx on server for this feature. (I didn't do the configuration someone else did, but it worked)
I want to store blog content in my database, which I could then display in an HTML page, ideally by sending the content over an AJAX call.
After looking through the web I've read a few people suggesting storing the blog post as markdown which makes the most sense since it contains supports headers, paragraphs and code formatting, and mark down would be the easiest way to read/write the post.
However I'm not sure how to convert the markdown to an HTML page. I'm also not sure if I want to do that conversion client side (React frontend) or server side (Django Rest Framework backend).
What are some tools or methods to get this done given my stack?
I've done something similar, but with Angular - there are plenty of projects out there to help accomplish this. React-Markdown is one of them.
From their GitHub:
var React = require('react');
var ReactDOM = require('react-dom');
var ReactMarkdown = require('react-markdown');
var input = '# This is a header\n\nAnd this is a paragraph';
ReactDOM.render(
<ReactMarkdown source={input} />,
document.getElementById('container')
);
For example, right now I'm at http://example.com/practice
If I have a link within the generated page: Click here, I'm directed to http://example.com/5.
Now I know that this is the usual method of relative path. But what I actually need here is so that the link will take me to http://example.com/practice/5 without I need to specify practice or example.com on that page. Preferred if not using any Javascript if possible, but if it is not possible, then I guess I'll have to use Javascript then.
I've already tried Click here and Click here and they still work exactly like "5".
Please help. Thanks.
You can do something in your javascript where you grab the current location with window.location.href (there may be a better way depending if you're using any js frameworks). For example for this page, window.location.href returns https://stackoverflow.com/questions/38284340/how-to-embed-path-to-the-current-path-at-anchor-href
You could then do something like this
var baseUrl = window.location.href;
var aTag = document.querySelector(<selector for your anchor tag>);
aTag.setAttribute("href", baseUrl + "/" + <url we want to go to>);
So essentially we grab our current location, change the href of the tag we want to navigate to, then add whatever subroute we want to go to at the end. Kind of a weird way to do it, but like I said earlier, there may be an easier way if you're using react or angular or some other framework or library.
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap