I can't tell if my two issues are related, but I figured there might be a chance so here goes.
I'm playing around with React (using webpack / commonjs) and I'm having a basic level of success. Components render on the page successfully.
Unfortunately, no events are working (even testing simple click handlers) and also my React dev tools do not load my hierarchy at all, just showing <Top Level></Top Level>. I've tried the expose-loader (for handling the dev tools issue) to no avail.
Any ideas at all much appreciated!
edit: It's probably worth mentioning that I know my event handlers are being loaded (if i pass as a handler a reference to a function which logs to the console, for instance, the messages appears). The events themselves simply aren't firing/being directed to the handlers.
edit 2: Also worth noting (based on the commonly suggested solutions for this problem) that I have also tried just exposing React to the window for the dev tools, and that if I go somewhere like the React homepage my react dev tools work just fine.
I had this exact same problem. In my case, I was using browserify, bower, and debowerify. My React app was spread across several modules. In one of the modules, I was importing react/react-with-addons, while in the other modules I was just importing vanilla react. Once I updated all my imports to use react/react-with-addons, the problem went away. For example, I initially had something like:
// module1.js
var React = require("react");
// module2.js
var React = require("react/react-with-addons");
When I changed it to the following, everything started working again:
// module1.js
var React = require("react/react-with-addons");
// module2.js
var React = require("react/react-with-addons");
Related
I'm new to using Next.js to create websites with react.js. I am trying to put the module "react-insta-stories" (https://github.com/mohitk05/react-insta-stories). Only he accuses that the document is not defined. I know you've had similar questions here, but I wanted to ask you something different, more general ... Because there are several awesome modules that I wanted to use in this project and the next.js seems to make it difficult. Some modules just that only speak with the "browser" . The question is ... can I use any module even from react.js after javascript instantiates my application with no problems with next.js? And does anyone know how I could put this react-insta-stories in my project? Because I tried some solutions, but I think they are beyond my knowledge.
By default next.js performs server side rendering. The quick and dirty way of getting react components that require the document or window to work is to call them as a dynamic component in next.
If you can a better way that allows for server side rendering of your component is to run this code in a useEffect hook or similar, as this will be sent to the browser to run.
For example
import React, { useEffect, useRef } from 'react'
function ComponentWithEffect(): JSX.Element {
const divRef = useRef<HTMLDivElement>(null)
useEffect(() => {
divRef.current?.width = window.width
divRef.current?.height = window.height
}, [])
return(
<div ref={divRef}/>
)
}
But this is not always possible, because with external libraries you might not have access to the underlying methods. There are heaps of examples in the repo as well.
I am wondering if it is possible to render a react component if the source of the component is pulled from a rest api call. For example if the component exists within a database.
Please do not simply answer with "I would not do this" or "it is not recommended". I understand this is not the normal approach.
The use case is having a list of "widgets" that reside in the data store and are pulled in as needed. As well as building up components on the fly.
Ideally this would happen at run-time on the client, but I would also be ok with switching to purely server-side react if that is the only way.
Note: This is different than code-splitting. I have tried various way of invoking "import(...)" but since the component is coming from a rest api call I was not able to get this to work. If there is a way, please let me know.
I have seen an example that was similar located here: https://codepen.io/qborreda/pen/JZyEaj?editors=1010. But it had a few restrictions. Namely any additional imports that the component itself would need.
function loadRemoteComponent(url){
return fetch(url)
.then(res=>res.text())
.then(source=>{
var exports = {}
function require(name){
if(name == 'react') return React
else throw `You can't use modules other than "react" in remote component.`
}
const transformedSource = Babel.transform(source, {
presets: ['react', 'es2015', 'stage-2']
}).code
eval(transformedSource)
return exports.__esModule ? exports.default : exports
})
}
loadRemoteComponent('https://codepen.io/tonytonyjan/pen/QEawag.js').then((Hello) => {
ReactDOM.render(<Hello/>, document.getElementById('hello'))
})
I had thought that I could store the transpiled version of the component and pull it into react. But so far I have not been able to get this to work. Generally the issue is that either the component does not render or React throws errors because it is expecting a component not raw text.
I also tried manually transpiling on the client similar to the "getting started" examples on the react web site by including the babel standalone processor and react scripts on the client (via script tags).
So I thought I would ask the community. To recap, my question is: Can I store a react component in some datastore, pull it into my react web site and render it?
Can this be done purely on the client?
Would using React Server Side Rendering make this easier?
Or can this only be done through a build step prior to launching the site?
Any help is appreciated. Either detailing the steps required, or a simple working example would be great. And I actually do not mind following links to get my answer. (I know, shocking!)
Oh, in case you are wondering I have been using create-react-app to generate the app, but I have also tried creating the app manually setting up webpack/babel myself.
Thank you.
I've got a component which consists of an object, which contains an array of objects, which in turn has keys and strings
this.state = {
dinosaurs: [
{ era: "jurassic", name: "diplodocus", diet: "herbivore" },
{ era: "cretaceous", name: "velociraptor", diet: "carnivore" },
]
}
When I open up the component in react devtools, I find I can edit the strings such as "jurassic" or "diplodocus" by double clicking on those strings, but I apparently can't make changes to the keys such as "era", or the array of dinosaurs. However, it could be possible to change it with React DevTools but I'm doing it incorrectly.
I'm using React DevTools within Google DevTools.
What can and can't I change in a component's state using React DevTools?
I tried looking at the GitHub readme, and I can see a mention of editing state in the section side pane, but no mention of what can and can't be edited.
I looked at How to set React component state and props from browser but there was a comment telling the user to read the friendly manual for React DevTools, plus answers that didn't address what is or isn't possible using React DevTools.
It appears that React DevTools locks out functionality based on whether the page you're looking at is using the "development build of React" or the "production build of React".
I'm currently trying to debug something between my local (development) version of an app and the deployed (production) version of the same app. To test something in the deployed (production) version, it would be helpful if I could open React DevTools, click into the component, and edit a prop. Alas, as far as I can tell, there is absolutely no way to edit one of the props in that production build version of the website via React DevTools.
Contrast that with my local (development) version. I can click into any component in React DevTools, then edit any props (or state) I want and the component immediately renders with the new prop value. That appears pretty easy and straightforward: just double-click what you want to edit and type away.
TL;DR: Certain prop/state editing features of React DevTools appear to be locked down depending on the React build version. If you're not sure which version you're looking at, see the link above. If you need to edit props on something that's a deployed, production build of React, you (probably*) can't. Aggravating, but I feel your pain.
[*Probably because A) I might be wrong (that would be great, someone please comment how to do it), it's not very clear in the first place about when it's editable vs not editable; B) If you could somehow trick the React DevTools into treating the page like it's a development build, it might be possible (or it might break hideously), but checking that requires more effort than I can spare.]
Some editorializing:
I would love for the above to not be true, and it's especially aggravating because I don't see a reason why it's necessary. Perhaps I don't understand enough about the difference between the dev and prod versions, but you can still view props/state on a production version using the React DevTools: it doesn't seem like a big leap to be able to also edit it considering that the functionality is all there when it's a development version. But once again, maybe I don't see the reasons behind this.
After refreshing the page (and going through my ssr) it looks like none of the css is sustained unless I navigate through my app and get back to it Or even click some elements. Are there any examples of how this is done correctly?
Im using the exact same code from the controlled 'react material ui grid' example:
https://github.com/kkotwal94/DrivingService (develop branch) <- where the component is under components / demoBase, and the SSR is under server/render/pageRender.jsx. I use the material ui example for how this is done. I utilize demo grid in Students.jsx.
Here is a pic of what happens post refresh:
Everything else renders fine (all other pages) in production mode and dev mode. I have no clue what im missing here. It looks like the jss-in-css is mapping incorrectly.
I found that reverting back to pre-React 16 everything began to work again SSR and what not, however i cant use dx-react-grid project since it requires 16. Kind of in a wackamole, still investigating where i goofed.
TEST
http://transportation.kkotwal.me/
I hosted it, if you click on login you can log in with yea#yea.com, password: 123, or you can just sign up where the username has to be a email it doesnt matter. After wards if you navigate to the students button on the navigation (if you click on transportation tracker after logging in you should be back to the root page / view). You will see the dev extreme controlled grid example.
If you hit refresh on that page you will see all the css is messed up. In case you arent sure what the page is: http://transportation.kkotwal.me/students. The source is here: https://github.com/kkotwal94/DrivingService/tree/UpdateReact . The server side rendering is located https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render. The component for the devExtreme component is called DemoBase.jsx in the components folder, and the container that renders this is https://github.com/kkotwal94/DrivingService/blob/UpdateReact/app/containers/students/Students.jsx.
I guess you're already aware that React 16 came with lots of improvements to server-side rendering. The update came with additional server-side render methods like renderToNodeStream().
The official guide on upgrading React from 15 to 16 mentions that it should have no issues, with minor exceptions. One of those exceptions is a break change exactly when you hydrate a server-rendered container:
Hydrating a server-rendered container now has an explicit API. If you’re reviving server-rendered HTML, use ReactDOM.hydrate instead of ReactDOM.render. Keep using ReactDOM.render if you’re just doing client-side rendering.
Having that in mind, I'd search in your project (and possibly in third-party libraries as well) for some ReactDOM.render that was missed to be changed to ReactDOM.hydrate while upgrading React to version 16.
this is probably the issue at server side code and your nodejs script.
Reason #1:
if you are using material ui version 4.x then you should look at their ssr documentation
in material ui version 3.x or below that we use
JssProvider from 'react jss/lib/JssProvider';
however this is no more required, your both github links are broken , kindly check ssr code of yours and compare it with material-ui documentation
Reason #2:
you have to refer to your build folder for your expressjs
app.use(express.static(path.join(__dirname, '../../build')));
app.use(express.static(path.join(__dirname, 'public')));
this could be another reason and if this is missing then check that your componentDidMount also will not be invoked, so client side rendering won't be happening, however for ssr both client side and server side rendering has to happen
For complete code on SSR kindly refer this link
Im trying to create an application targettng both web and mobile. The idea is to create react components that differ on how they render but share the logic.
React v.014 blog post stated "we’re splitting the main react package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native.
The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. We think of these as the isomorphic or universal helpers that you need to build components."
I've found a great example (http://blog.benoitvallon.com/projects/a-mobile-desktop-and-website-app-with-the-same-code/) that uses the same concept and accomplished the result (react-native 0.13.6 and react 0.14.2).
In this code, you will see nothing special just a smart idea on how to extend react-native naming conventions system to include a web version. The minute I upgrade to latest react-native, it complaints about any component that uses React.Component from the react package instead of react-native.
This is confusing since 0.14 release seem to indicate that was exactly the point moving fw. Let React create components, let react-dom deal with the DOM and let react-native deal with ios/android views.
I think this is a brilliant idea but I cant seem to pass this particular problem. Any thoughts, ideas will be greatly appreciated.
Thanks
The transition to make react native work this way is underway but incomplete. See AMA.
We are working hard to stop using our fork such that people can use require('react') and work the same as require('react-native'), this will make it possible for all the third party plugins to work on both places without doing anything.
Right now we can't use relay on the open source version of react-native without forking it, which is a huge shame and we're working on fixing that.