React Tutorial using MERN stack

29Comments

Write your comment…

This comment has received 3 appreciations.

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 .

Write a reply...

This comment has received 2 appreciations.

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!

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

Write a reply...

This comment has received 1 appreciation.

Thank you a million for this tutorial! It is comprehensive, well-written, and well-structured.

It has so much useful information that I think it is more than enough to serve a one-term MERN course.

Thanks again :)

Write a reply...

Thank you so much for this tutorial! It is quite possibly one of the best tutorials I have ever followed. Loved the way you encourage readers to read-write-ruminate, a great learning exercise. This has taught me a lot and I'm now ready to work on my own apps in MERN - thanks for taking the time to write this, much appreciated!

One recommendation I might suggest is including Mongoose to build Schemas to keep the data nice and clean, and prevent errors in database entries. Could be a good tip for people under Section 12 - Onward.

Write a reply...

This comment has received 1 appreciation.

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

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

Write a reply...

This comment has received 1 appreciation.

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 ;)

Write a reply...

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

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

Write a reply...

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 ...

Write a reply...

I'm getting it slowly, but it would be nice to explain your Read-Write-Ruminate pattern. I've got to read, typically, couple of screenfuls of your links. Only then, after I have understood, should I try and accomplish the Write part. I started doing stuff even before getting to the Write sub-section. Also, I didn't know where to stop reading, especially in step 1.1.

As I get to the later steps, I'll post more comments.

Thanks for the comment, @keenavasan. I've updated the post with some hints saying it's OK to prefer mixing Read and Write parts.

Write a reply...

This comment has received 1 appreciation.

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

Write a reply...

Where do I find the learn something the hard way series?

You could just google for the others (if they are available), but this one started it all: Learn Python the Hard Way

Write a reply...

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?

Write a reply...

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.

Write a reply...

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

Write a reply...

I definitely will try this soon :)

Write a reply...

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.

Write a reply...

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.

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

Write a reply...

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

Write a reply...

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.

Write a reply...

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 !

Write a reply...

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

Write a reply...

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

Write a reply...

Do you answer the ruminate questions any where?

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.

Write a reply...

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.

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

Write a reply...

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 http://localhost:3000/?priority=p3&status=new#/bugs?_k=ai2nnc and it doesn't get recognized by this.props.location.

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

Write a reply...

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)

Write a reply...

I cannot find this link on the react website!

Can you please refer which part is it talking about?

Write a reply...

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..

Write a reply...

Join a friendly and inclusive Q&A network for coders

  • 🖥Pick the technologies you like & read great content through your feed.
  • 💬Ask a question when you want to learn more about anything.
  • 🚀Share what you know & build your portfolio.
Sign up nowLearn more

loading ...