SHARE

Hey ninjas, in this React tutorial I’ll be showing you how to set up a basic work space for React using Webpack. I’ll show you how to use the NPM to install React (and React DOM) as well as how to configure webpack to run with Babel.

webpack config gist – https://gist.github.com/iamshaunjp/a1c8fb653ddd5d27c3e38ab55e3c0a44

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/react-playlist
+ Atom editor – https://atom.io/a
+ Download GIT – https://git-scm.com/
+ CMDER – http://cmder.net/

JS Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

HTML Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

NODEJS Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

40 COMMENTS

  1. everything is fine except, i couldn't find the bundle.map.js file and alert isn't working,done everything from the comments below ,my config and JSON files are perfect. HELP

  2. so when i visit localhost:1234, it renders the root file of the project but not the html file unless i click on the src folder then it renders the html..any help?

  3. Hi,

    I keep getting errors when running "npm start". My setup is exact to the tutorial, but yet no correct functionality is working.

  4. npm start is failing in my system and creating a npm.debug.log. Which has errors like nodejs latest version not installed but it is installed with v6.11.2

  5. I like how you explain whats going on and why we're doing specific things instead of just watching you code and having us follow along. Other tutorials are just like, "do this, copy and paste that, put this here…and that should work".
    Keep the great tutorials coming!

  6. when I install react and react-dom( specified in this tutorial) a package-lock.json file is created. Can anyone help me why that is created?

  7. I am trying to integrate webpack + babel after using the react cli create react-app can anyone help in what would be different from this video?

  8. When I run ''npm install react react-dom–save'', I am getting below error.
    npm ERR! code E404
    npm ERR! 404 Not Found: react-dom–[email protected]

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:UsersAmyAppDataRoamingnpm-cache_logs2017-07-09T15_48_32_167Z-debug.log

    Can anyone please tell me what's wrong here?

  9. when i run npm start it creat the dist folder with bundel.js file but it miss bundel.map.js did some one know why , also when i open bundel.js and see the alert which i worte on index.js it look like this "use strict";
    eval("nnalert("itworrrrk");n////# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9zcmMvYXBwL2luZGV4LmpzPzliZGMiXSwic291cmNlc0NvbnRlbnQiOlsiYWxlcnQoXCJpdHdvcnJycmtcIik7XHJcbi8vXHJcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyBzcmMvYXBwL2luZGV4LmpzIl0sIm1hcHBpbmdzIjoiOztBQUFBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0="); ????
    help fyi its work at localhost:1234 and alert is work but i want to fix this problem

  10. It took me a while but I finally got the hang of it. This is the best tutorial on Webpack. He is the only one that I've seen use query and presets: ['react', 'es2015'] within webpack.config.js which is brilliant!

  11. Hi NetNinja

    I keep the dark theme in my development setup.

    But for watching these tutorial videos I think it difficult to read. So, one suggestion, can you make the video using the light theme as it will be easier to read.

  12. Guys, don't name your folder "react" you're gonna get an error when installing react itself.
    And make sure the "name" attribute in your package.json isn't equal to "react".

  13. i have probs with npm start, it gives me errors
    No configuration file found and no output filename configured via CLI option.
    A configuration file could be named 'webpack.config.js' in the current directory.

    i do all the same settings((( i think webpack.config.js is wrong

  14. you could do "npm init -y" if you want to skip all the questions and super shortcuts "npm i -S react react-dom" "npm i -D babel-core babel-loader babel-preset-es2015 babel-preset-react webpack webpack-dev-server"

  15. Thanks this is fantastic. Question: how does the start script know to open index.html when we reach the port we specified? I experimented by adding "another.html" with in the same directory but the process still chooses to load index.html instead.

  16. Thanks this is fantastic. Question: how does the start script know to open index.html when we reach the port we specified? I experimented by adding "another.html" with in the same directory but the process still chooses to load index.html instead.

  17. Got a bit of an issue, everything works fine until the npm start command right at the end of the video. When I run it, I get this error: ERROR in multi main
    Module not found: Error: Cannot resolve 'file' or 'directory'.
    Any ideas why i'm getting this error and why the bundle.js file is not being created?

  18. I can't blame you, but i'm loosing all hope with these package managers. It's been sitting here spinning away for the past few minutes and now its failed with some op dep failed message and has now just hung. i really dont care for 0% feed back on command line tools. I'm having to download 10's of megabytes of code just to get a simple hello world app working. the web is becoming SO over engineered i feel with busy work for ego driver dev's to say they work with it.ES6 is out and we have babel to retrofit it back into browsers that can understand it… Another level of time wasting! AWS where did this come from and all of a sudden everyones needing to get with that. it wasn't broken before. i grow tired of it, trouble is… it's my career and i've been in it 10+ years. /rant over.

LEAVE A REPLY

Please enter your comment!
Please enter your name here