Discussion on "React Tutorial using MERN stack"

Vasan Subramanian · 2016-01-03T18:09:52.000Z

Build a complete React app, step-by-step with the MERN stack Intro What? This is a step-by-step tutorial that will help you get up to speed with React quickly, and also build a complete app with the MERN (Mongo-Express-React-Node) stack. You'll also ...

I also download ur code from github and run npm install after that when i run ur code this error show again..

Failed to load resource: the server responded with a status of 404 (Not Found) Failed to load resource: the server responded with a status of 404 (Not Found)

please please help me..

3.1 exercise files isn't working.. this error showing in chrome please help..

Failed to load resource: the server responded with a status of 404 (Not Found)

Thanks for great tutorial, This helps ReactJS beginners a lot.

Regards,

ReactJS Online Training Institute

React Tutorial - Hook up to the data model
(facebook.github.io/react/docs/tutorial.html)

I cannot find this link on the react website!

Can you please refer which part is it talking about?

In 2.2, the link "React Tutorial - Using react from npm" is no longer valid.

I definitely will try this soon :)

As Carson and Justin say, the Facebook React doc changed and the tutorial should be updated whenever possible. But in the meantime you could follow this link as it is the documentation referred in here.

http://chenglou.github.io/react/docs/tutorial.html

Peace out.

this points to the new tutorial, what happened to Chen lou's?

It looks as though Facebook redid their React documentation and a lot of the React Tutorial Links, referenced in this guide, have been moved.

Yeah this whole thing needs to get redone, they keep saying its in the works, but i've been keeping an eye on this for months now with no updates. feels like its a lost cause... :(

Thanks, just realized this. Someone else posted a link to the original tutorial, here it is: http://chenglou.github.io/react/docs/tutorial.html. I'll work on an update when I find some time, just gotten too busy with regular work the last few months.

@vasan when do you think you'll have this updated?

This is great. I kept finding most tutorials annoying in that they show you what to do too much, so I appreciate the approach of "look at these references, then apply it to our example".

However, I think the React tutorial/reference you link to has changed a lot since you made it, so the links don't really work right any more. I looked at the originals from the Google cache, but otherwise I think this needs an update.

Thanks, Alex. I am starting to work on the rewrite, roping in some help too ...

Thanks for a great resource. Certainly mern isn't quite as well documented and tutorialed as it could be for the benefit of people who aren't already pretty up-to-speed with js frameworks, so this is a really helpful thing you've done.

It's great! But I just wonder if I have to build more complicated app, will I need view engine to render HTML? Is React Server side rendering enough? I haven't use it server-side.

React server side rendering will be enough. There is no need for other view engine.

I agree with Kenan that React server-side rendering will be enough. But pause for a moment and think why you need server side rendering. If you are expecting your app to be indexed by search engines such as Google or Bing, only then you need it. Otherwise, client side rendering is enough, it will be an SPA, it won't need any view engine. React is the view engine.

I'm just a little bit worried about some situations when we want to display different information for different people. like login, membership, restricted area... With React developer tools we can change state of Components to see the reaction afer. It may be a security problem for not well structured sites

Great tutorial, it covers most of the important topics of building apps using mern, thanks for the effort.

Do you answer the ruminate questions any where?

Sorry, no. That's because there's no right answer for many of them. They're just food for thought.

I'm still hungry. Great lesson. I like the approach. Figure it out - then look at the solution. It broke me in. I'm looking at the note app now. I guess I'll try to make something after that.

i just couldnt render anything in the browser, except the hello-world thing. Nothing is being from shown from app.js file, whats the probable error. I am in step 4.

It's very difficult to say ... that's why every step's source code is there in github. You could download the code and do a diff to see what is different between what you did and the working code.

Yeah, I've checked it with your source code, no errors in my code, what to do with transform.sh actually, no idea how to use that

You need to run transform.sh to convert jsx to js.

Hi All , I am new to MERN stack. Can you please suggest , how to run the gulpfile.js ? and how to create the bundle .js file?

@vinoths : You should be running gulp, not gulpfile.js. gulp will look at the config in gulpfile.js and do the needful (that is, create bundle.js). Take a look a the github source referred to in section 7.2.

With the new version of MERN.io out, it would be great to have this tutorial updated to reflect the new updates. This asset is very helpful for the community, and one that I point many people to when I'm evangelizing about the project.

Thanks for all you do!

Excellent, @somu! Happy to review/play with once that comes out.

Thanks again for the tutorial, here is the code of my version up to section 11.

https://github.com/deviantony/mern-tutorial

It is written in ECMAScript2015 with Airbnb's ESLint config, and uses Webpack instead of gulp + browserify. It may help people someone :)

Forgot to mention the use of mongoose indeed ;)

Thanks. I have updated the link in the story.

This is an excellent resource. Not a tutorial, far more than that. Great teaching style

This tutorial is really nice. Got a question however, could you explain to me why did you choose the bootstrap CSS way over the react-bootstrap way for the table style in 11.4 ? Cheers !

Thanks. As for the table styling, no strong reason. I figured that the Table class (for that matter, Grid and Row classes too) did not add any value over and above Bootstrap class names -- except for converting class names into react props. I was already familiar with the bootstrap class names and thought it unnecessary to learn one more thing.

This tutorial is really nice. Got a question however, could you explain to me why did you choose the bootstrap CSS way over the react-bootstrap way for the table style in 11.4 ? Cheers !

This is awesome. Really excited to get crackin' on this.

Hi,

I am new to this node js world with out knowing where i need to start in this vast learning. Spend so much time to find step by step tutorials which gives me confidence that i can build web app slowly . This is an Excellent tutorial with clear explanation.. after going through so many tutorials i ended up with this tutorial making me clear learning.. and getting more confidence that i can learn it and do it

it will be nice you introduce webpack and redux as well. Nice article and informative. Thanks a lot.

i learn about webpack from two resources, webpack website and after installing react app with the new create-react-app program created by facebook. try using this app and eject command . after this read the configuration file .

Hi wonderfull , actually it took like months for me to figure out all these stacks individually,

you have put all together in a single page that's awesome

have you done login with MERN stack without using flux , if so can you send me the code

Yes, I have done login, but I've used google login. The code is not in a shareable form, though (it's intricately interwoven with the rest of the code). You may want to look at the npm package express-session to start off.

if you can share your email id i will share my code let me know if i am in right path thank you

I'm having problems adding priority and status query to url. When I use this.props.history.push, like you did, I get a warning that it's deprecated.

But when I use browserHistory.push({search:'?' + $.param(filter)}), I get url that looks like this localhost and it doesn't get recognized by this.props.location.

this.props.history is deprecated, because in history 2.0 the right way to do it is using this.props.router. If you use browserHistory, you are setting the URL's search path, not the search part of the hash. If you don't like this.props.history, then try hashHistory instead of browserHistory, that'll work because it will set the hash part correctly. Alternatively, read up on Histories and try using browserHistory instead of hashHistory (which is the default) in the router.

find() returns a cursor, and the only way to get to the first document is by calling next() on it. There is no 'current' document. We could have used the deprecated findOne() instead, which returns the first document directly.

Thank you, I've managed to get it working. I'm using hashHistory and 'this.context.router.push'. I've switched to ES6 classes in the process, I don't know if that was necessary. Here's my code for BugList component if anyone needs it. https://jsbin.com/wuvexa/edit?js

Great @somu many would love a tutorial on mern v2.0!

Hi @somu, did the MERN v2.0 tutorial ever get released? Thanks!

Discussion

React Tutorial using MERN stack

Responses(29)

Recent in Forum

Search Hashnode

React Tutorial using MERN stack

Responses(29)

Recent in Forum