-
Notifications
You must be signed in to change notification settings - Fork 142
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Instruction to pass Lesson 8 - Isomorphic? #111
Comments
I use the same solution.js as it recommends,but can't pass Lesson 8 either. |
Check if you're problem is related to the dependencies versions. |
I have a problem with this one, I managed to verify solution, code is being copied from solutions dir. But I see proper html file only after first page load and then when I reload or I try to navigate to
which indicates a problem with |
Are you using the same packages versions used in the solution? |
yes, I copied from your repo:
can you plese |
@hanskoff I just tried that and I'm having the same problem as you do. Page load fines but crashes after reloading. :( |
Yes and that is how it works, now :(
26.01.2017 5:23 AM "Luis Del Aguila" <[email protected]> napisał(a):
… @hanskoff <https://github.com/hanskoff> I just tried that and I'm having
the same problem as you do. Page load fines but crashes after reloading. :(
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#111 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABFFM15YnC5SkyMkdMuWMpkvUnQFpNmbks5rWB-ngaJpZM4KV_Ly>
.
|
I had the same crash problem. And finally I found a way to avoid the crash. (I don't know why this causes crash problem, though.) In program.js, change the code require('babel/register')({
ignore: false
}); as like this: require('babel/register'); |
hmm, thanks for hint but this time after refresh I see :(
|
Oh, yeah, sorry. I could reproduce that crash. I forgot I had changed one more code when I was confirming behavior from simple example. I also changed this part of code: browserify({ debug: true })
.transform(babelify.configure({
presets: ["react", "es2015"],
compact: false
}))
.require("./app.js", { entry: true })
.bundle()
.pipe(res); to: browserify("./app.js")
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.pipe(res); Here is full code of my program.js. |
Damn, that works like charm! thx ;) so maybe that will work with newer babel/react versions? not those specific? will check... and no, it doesn't work I fall into gulpjs/gulp#1359
2017-01-31 1:43 GMT+01:00 Kaz <[email protected]>:
… Oh, yeah, sorry. I could reproduce that crash.
I forgot I had changed one more code when I was confirming behavior from
simple example.
I also changed this part of code:
browserify({ debug: true })
.transform(babelify.configure({
presets: ["react", "es2015"],
compact: false
}))
.require("./app.js", { entry: true })
.bundle()
.pipe(res);
to:
browserify("./app.js")
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.pipe(res);
Here <https://gist.github.com/kaz080/443312e3092e45c858126bcc94665ff2> is
full code of my program.js.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#111 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABFFMzszalilg3OJxD9A3LKxfwJQeTiHks5rXoO8gaJpZM4KV_Ly>
.
|
Nice trial! I needed to change require("babel-core/register")({
"presets": ["es2015", "react"]
}); and needed to add the line to module.exports = TodoBox; Here is my working answer, including |
that is soo cool! great, thx
2017-02-02 6:39 GMT+01:00 Kaz <[email protected]>:
… Nice trial!
I also updated all packages to the latest version, and I had some errors.
But finally, it works fine!
I needed to change program.js like:
require("babel-core/register")({
"presets": ["es2015", "react"]
});
and needed to add the line to index.jsx:
module.exports = TodoBox;
Here is my working answer, including package.json:
https://github.com/kaz080/learnyourreact-answer
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#111 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ABFFM5_TyjggKpOah7L9zircUonbCRlaks5rYWwEgaJpZM4KV_Ly>
.
|
@kaz080 I'm still somewhat confused about this - can you clarify? I just cloned your answer repo and ran it, and the result was a working '/' route (which also contained some text input fields I'm not sure were a part of this lesson). Then, when I visit '/bundle.js' I just see a styleless page containing all of the post-complied javascript: Is that the intended result? If so, what was the point of setting up the '/bundle.js' route? In general, what should my main takeaways from this lesson be? Can you clarify what the author was saying about the event not working in the previous State lesson. I used this code instead there and it passed, rather than using an event handler:
I want to understand the nuances of using React on both the client and server... but, all I've taken away so far is that there is a dependency issue in learnyoureact on this lesson, and we actually need to rework the code provided in the lesson. Got here because I had the same problem described by @hanskoff in #103 |
Yes. '/bundle.js' is the entire JavaScript code for client-side, which includes app.js, views/index.jsx, react, react-dom.
Maybe this learnyourreact scenario is a bit tricky because the scenario starts from server-side rendering. Before this lesson ISOMORPHIC, the logics in the index.jsx are evaluated only once in server-side to make HTML DOM. The rendered HTML doesn't include JavaScript anymore. That's why event wasn't working in the previous STATE lesson. This lesson first introduces client-side JavaScript code (/bundle.js) to make the server-side-rendered HTML interactive. Now logics in index.jsx are also in client-side, so event become working. I guess most learners imagine that JavaScript is evaluated in the browser, but it's not in this learnyourreact scenario before this lesson. |
@kaz080 Thanks so much for the reply! Very helpful. Before ISOMORPHIC, we are just rendering static html. In ISOMORPHIC, we also send a bundle to the browser to run client side JS. Got it. I think this also helps me to understand better Webpack. Am I correct in saying that when we use Webpack, it intelligently bundles our React code to run some or all of the JS on the client, much like we did here in the ISOMORPHIC lesson? I'm especially interested to know how much of our JS Webpack sends to the client and/or how much runs on the server (as well as if you can control how much renders on the client or server using Webpack). I appreciate your help! |
Fix to avoid server crash in exercise 8 isomorphic (#111)
Hi, I'm having an issue with learnyoureact Isomorphic exercise. I continue to get an error: var body = DOM.body; Can you assist? Thanks |
I already completed the implementation of Lesson 8 Isomorphic and apparently it is everything running fine when I test the program via browser.
I also understand instruction when it says: “NOTE: I think some of you might notice the difference of HTML in which by running verify and accessing http://localhost:3000.”
However I am not guessing what I have to do more to pass learnyoureact verification and complete this Lesson.
Can somebody help please?
The text was updated successfully, but these errors were encountered: