Setting Up Your React Dev Environment Easily

programming
1

by kirupa | 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
2

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

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!

3

Thanks for pointing this out, grady! I have updated the article with the updated value. I swear it worked when I wrote it haha!

4

@kirupa thats an amazing tutorial :slight_smile: 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?

5

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 :slight_smile:

6

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

7

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

8

Hey - images seem to be down. Did the images location change? the links seem to be going to “.comimages/”

9

Tyler - what browser are you using? They work fine for me. The image location shouldn’t have changed.

10

chrome!

11

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!

12

I never even noticed that button! These posts get auto-generated when content on the main 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 :slight_smile:

:slight_smile:

13

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?

14

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? :slight_smile:

15

you’re right! that was it. thanks Kirupa.

16

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

18

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}!


| );
| }
19

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 ? I’ve never seen that error before!

20

Of course just turned out to be a typo in the webpack.config.js. Thanks for your help!

21

Haha! Those typos sneak up when you least want them to :stuck_out_tongue: