# Setting Up Your React Dev Environment Easily **URL:** \ **Category:** programming\ **Created:** [March 20, 2017, 1:54am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205 "2017-03-20T01:54:40Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 20, 2017, 1:54am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/1 "2017-03-20T01:54:40Z")
by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 10 October 2016 The last major React-related topic we are going to look at is less about React and more about setting up your development environment to build a React app. Up until now, we've been building our React apps by including a few script files: * * * This is a companion discussion topic for the original entry at [http://www.kirupa.com/react/setting\_up\_react\_environment.htm](http://www.kirupa.com/react/setting_up_react_environment.htm) ---
**Author:** ![grady](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/grady/32/8314_2.png) [@grady](https://forum.kirupa.com/u/grady)\ **Post date:** [March 23, 2017, 4:14am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/2 "2017-03-23T04:14:08Z")
Hi Kirupa! I came across something new when trying to complete the final step of this tutorial: > Hash: **fb298f81a0299c6ac1e5** > Version: webpack **2.3.1** > Time: **40ms** > ERROR in Entry module not found: Error: Can’t resolve ‘babel’ in ‘/Users/GradioMedia/Desktop/MyTotallyAwesomeApp’ > BREAKING CHANGE: It’s no longer allowed to omit the ‘-loader’ suffix when using loaders. > You need to specify ‘babel-loader’ instead of ‘babel’, > see [https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed](https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed) Luckily it’s an easy fix with simply modifying the webpack.config.js file by adding “-loader” to the end of babel: module: { loaders: [{ include: DEV, **loader: “babel-loader”,** }] } }; PS. Thanks for this tutorial too - I would have been so lost in the woods without it! ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 23, 2017, 4:42am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/3 "2017-03-23T04:42:22Z")
Thanks for pointing this out, grady! I have updated the article with the updated value. I swear it worked when I wrote it haha! ---
**Author:** ![Waleed\_Asad](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/waleed_asad/32/8325_2.png) [@Waleed\_Asad](https://forum.kirupa.com/u/Waleed_Asad)\ **Post date:** [March 26, 2017, 1:44pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/4 "2017-03-26T13:44:24Z")
@kirupa thats an amazing tutorial 🙂 i am newbie and wanted to know that I have followed the steps…how will it be running in localhost? there is no web-dev-server here so how localhost will be running? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [March 27, 2017, 1:30am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/5 "2017-03-27T01:30:14Z")
Unless your app is doing something that absolutely needs a server, you can do a lot using just the file system. That is why I originally didn’t mention anything about that. With that said, I **_should_** update the article to mention using a web server, though. It is good practice. Thanks for letting me know. I’ll look into getting this revised soon 🙂 ---
**Author:** ![dbergum](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/dbergum/32/8351_2.png) [@dbergum](https://forum.kirupa.com/u/dbergum)\ **Post date:** [April 7, 2017, 7:35pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/6 "2017-04-07T19:35:18Z")
Hi, I’m getting this error when I try to run webpack. EDIT: I solved this. I had missed the step adding the babel presets to the package.json quillfish:MyTottalyAwesomeApp dbergum$ ./node\_modules/.bin/webpack Hash: ecc64a2da2ebdaf303d5 Version: webpack 2.3.3 Time: 279ms Asset Size Chunks Chunk Names myCode.js 3.49 kB 0 [emitted] main [0] ./dev/index.jsx 862 bytes {0} [built] [failed] [1 error] ERROR in ./dev/index.jsx Module build failed: SyntaxError: Unexpected token (7:12) 5 | render: function() { 6 | return ( > 7 | > > Hello, {this.props.greetTarget}! > > > | ^ > 8 | ); > 9 | } > 10 | }); ---
**Author:** ![rakesh2](https://avatars.discourse-cdn.com/v4/letter/r/8dc957/32.png) [@rakesh2](https://forum.kirupa.com/u/rakesh2)\ **Post date:** [April 10, 2017, 6:00pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/7 "2017-04-10T18:00:53Z")
@kirupa Thanks for the great tutorial, i am waiting for “how to setup web server for this index.html” please update this tutorial for the next steps. ---
**Author:** ![tyleremiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tyleremiller/32/8408_2.png) [@tyleremiller](https://forum.kirupa.com/u/tyleremiller)\ **Post date:** [April 21, 2017, 7:09pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/8 "2017-04-21T19:09:20Z")
Hey - images seem to be down. Did the images location change? the links seem to be going to “.comimages/” ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 21, 2017, 7:11pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/9 "2017-04-21T19:11:53Z")
Tyler - what browser are you using? They work fine for me. The image location shouldn’t have changed. ---
**Author:** ![tyleremiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tyleremiller/32/8408_2.png) [@tyleremiller](https://forum.kirupa.com/u/tyleremiller)\ **Post date:** [April 21, 2017, 7:20pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/10 "2017-04-21T19:20:47Z")
chrome! ---
**Author:** ![tyleremiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tyleremiller/32/8408_2.png) [@tyleremiller](https://forum.kirupa.com/u/tyleremiller)\ **Post date:** [April 21, 2017, 7:23pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/11 "2017-04-21T19:23:35Z")
oh - it seems that the original post shows the images, but clicking ‘view full post’ does not show them. It seems that the images that work have a missing “/react/” from the file path! ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 21, 2017, 8:33pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/12 "2017-04-21T20:33:21Z")
I never even noticed that button! These posts get auto-generated when content on the main [kirupa.com](http://kirupa.com) site is posted, and the URL for showing the full version is broken. That’s why images don’t load. I’ll fix that shortly. Thanks for pointing that out 🙂 🙂 ---
**Author:** ![tyleremiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tyleremiller/32/8408_2.png) [@tyleremiller](https://forum.kirupa.com/u/tyleremiller)\ **Post date:** [April 25, 2017, 3:34am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/13 "2017-04-25T03:34:29Z")
one more question - I’m getting some misprinted spaces in my end result ` ` and I’m not sure why. They even show up when I pretty much copy-pasted the entire exercise. Any ideas? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 25, 2017, 11:12pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/14 "2017-04-25T23:12:01Z")
Tyler - are you double clicking inside the code area before copying? If so, that is a bug that I will need to fix where spaces get introduced. If you copy the code by just selecting without double-clicking, you shouldn’t see the space characters. Can you try that and see if it works for you? 🙂 ---
**Author:** ![tyleremiller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tyleremiller/32/8408_2.png) [@tyleremiller](https://forum.kirupa.com/u/tyleremiller)\ **Post date:** [April 26, 2017, 5:39pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/15 "2017-04-26T17:39:42Z")
you’re right! that was it. thanks Kirupa. ---
**Author:** ![AlexJBrown2](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/alexjbrown2/32/8419_2.png) [@AlexJBrown2](https://forum.kirupa.com/u/AlexJBrown2)\ **Post date:** [April 29, 2017, 8:28pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/16 "2017-04-29T20:28:06Z")
This is a great tutorial. It took 5 minutes and now I’m ready to go. Most tutorials lightly cover or skip entirely the initial setup, and the installation on the React website is a little too in depth. This is just right. Thanks, man. Cheers ---
**Author:** ![dstonehill](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@dstonehill](https://forum.kirupa.com/u/dstonehill)\ **Post date:** [July 20, 2017, 3:07am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/18 "2017-07-20T03:07:09Z")
Great tutorial! But I did get an error executing webpack. Does it look familiar? I did not skip the step adding babel to the webpack config. Hash: 124be1deb621e1bada42 Version: webpack 3.3.0 Time: 55ms Asset Size Chunks Chunk Names myCode.js 2.77 kB 0 [emitted] main [0] ./dev/index.jsx 298 bytes {0} [built] [failed] [1 error] ERROR in ./dev/index.jsx Module parse failed: /Users/dstonehill/Documents/ReactProjects/ReactApi/dev/index.jsx Unexpected token (7:6) You may need an appropriate loader to handle this file type. | render: function() { | return ( | Hello, {this.props.greetTarget}! | ); | } ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [July 20, 2017, 4:51am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/19 "2017-07-20T04:51:48Z")
Does the suggestion here help: [https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b](https://stackoverflow.com/questions/33469929/you-may-need-an-appropriate-loader-to-handle-this-file-type-with-webpack-and-b) ? I’ve never seen that error before! ---
**Author:** ![dstonehill](https://avatars.discourse-cdn.com/v4/letter/d/74df32/32.png) [@dstonehill](https://forum.kirupa.com/u/dstonehill)\ **Post date:** [July 20, 2017, 7:51am UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/20 "2017-07-20T07:51:15Z")
Of course just turned out to be a typo in the webpack.config.js. Thanks for your help! ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [July 20, 2017, 3:30pm UTC](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205/21 "2017-07-20T15:30:27Z")
Haha! Those typos sneak up when you least want them to 😛 [Next page](https://forum.kirupa.com/t/setting-up-your-react-dev-environment-easily/636205.md?page=2)