Bookmark

Screencast Add a Build System to a React Application JavaScript

  • Sergio Cruz
  • 7969 views
Enroll Now

Comments

  1. colyn said

    Gulp and Webpack aren't comparable systems. Maybe you meant to compare Browserify and Webpack.

  2. andrefurquim said

    React Course was awesome! Congratulations!

  3. andrefurquim said

    My project is not generating either the js folder and bundler.js. Any solution for that ?

  4. andrefurquim said

    Atom wasn't showing the js folder although the folder was there... haha

  5. huizzi said

    What colyn said, gulp is not a build system that should be taught over webpack. Check out surviveJS if you want a real guide on build system + react

  6. Faculty

    Sergio Cruz said

    Hey @colyn and @huizzi thanks for pointing this out... Yes, to clarify what we meant by comparing gulp and webpack, was really the gulp + browserify + browsersync workflow we're using in the video versus webpack + webpack-dev-server, etc... Turns out saying all the right terms in front of a camera is hard haha :)

  7. Valid Developer said

    Network error: cannot load video sources... waiting for the fix

  8. Faculty

    Stefan Nychka said

    Hi! Probably not on our end, but if it was it was very temporary. No reported outages. Just tried it, and it's working for me, too.

    Probably on your end, which is good news as it can often be fixed. Get in touch with Support and we can help out! Link's at the bottom of this page.

  9. Matthew Ehrens said

    hi Sergio...can you explain why i dont see a single JSX file in the project? i find that part confusing... i thought you were react components as jsx files but i dont see any files with .jsx extensions

  10. Kevin Emamirad said

    Great video! I tried it and everything is working! Good job :)

  11. Ngt said

    Really cool video. It is definitely nice to have an overall picture of the project with the build system you used. Thank you both for the great resource.

  12. Faculty

    Sergio Cruz said

    Hey @Matthew Ehrens, great question regarding the .jsx file extension. Some developers like to differentiate JavaScript files that use JSX markup by naming their files with the .jsx extension. This however, is not a requirement, especially with gulp+browserify like we are using in the video. I hope this makes sense. All the best, and thanks everyone else for all the great feedback! :D

  13. Matthew Ehrens said

    Yes it does! thank you Sergio...appreciate it!

  14. avbrychak said

    Turned out that "Source Map" thing doesn't work on Firefox, nor in default console, nor in firebug. At least console.time and console.timeEnd works in Firebug. Thanks for this screencast!

  15. zsoltpentek said

    Is this video still available? To me it says 'Network error: Cannot load any video sources' I can watch all the other videos that I've tried. Thanks for any answer!

  16. Nick Barrett said

    Great video. Thank you

  17. fernan94 said

    Hello Sergio for some reason mine doesn't bundle when i do

  18. fernan94 said

    it doesnt bundle it doesnt display the components in the react browser @Sergio Cruz

  19. Ashley Summers said

    Thanks, guys! This really cleared up a lot of questions I had about the integration of babel and browserify with gulp.

  20. cejodrake said

    I have problem when type npm start

    npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodej node_modules\npm\bin\npm-cli.js" "start" npm ERR! node v4.4.4 npm ERR! npm v2.15.1 npm ERR! code ELIFECYCLE npm ERR! babel-with-gulp@1.0.0 start: gulp watch npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the babel-with-gulp@1.0.0 start script 'gulp watch'. npm ERR! This is most likely a problem with the babel-with-gulp package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! gulp watch npm ERR! You can get information on how to open an issue for this project wit npm ERR! npm bugs babel-with-gulp npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm ERR! npm owner ls babel-with-gulp npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request: npm ERR! C:\CodeSchool\WatchUsBuild-React-start-here\npm-debug.log

    C:\CodeSchool\WatchUsBuild-React-start-here>npm start

  21. cejodrake said

    I solved problem , only update npm it is work!!!

  22. cejodrake said

    When I create file app.js and copy my components a that file , what I should to do with file component.js ? I must delete file or what ? because when start my server not showing this comment?

  23. cejodrake said

    sorry , it is Work , please omited other post.

  24. Nazar Tokar said

    Nice to study using these videos. Thumbs up and thank you!

  25. BiiGRiiG123 said

    For some reason, when I'm defining the CommentConfirmation.propTypes I get this error: 'Uncaught TypeError: Cannot read property 'func' of undefined'. Any idea why?

  26. Kirk Larkin said

    Double-check the case used on PropTypes - From the video, it should be React.PropTypes.fun.isRequired (perhaps you entered propTypes in there?).

  27. Kirk Larkin said

    I should've typed func instead of fun above. sigh

  28. Fernando López said

    Hi! Great frist video! Thanks for the resources. I have one doubt, for example, when naming my files with .jsx extension, the import statement doesn't work, in order to fix it I have to specify the .jsx extension, so instead of using something like "import Component from './Component'", I have to write "import Component form './Component.jsx'", why does that happen? Thanks!

  29. Eduardo Garcia said

    Thank you. Good job!

  30. Felipe Rodrigues said

    Nice video!

  31. Julian Jorgensen said

    Also, I'm wondering if you can show how you added the single-page application like navigation and routing?

  32. Julian Jorgensen said

    Great video guys, love how natural it was and the laughs in between... Would LOVE to see more videos from you guys together!!!

  33. Gonzalo Andres Vergara said

    awesome, very good environment that you can deploy with react.

  34. Camilo Riviere said

    FINALLY A WATCH US BUILD VIDEO THAT LETS YOU PULL THE ORIGINAL REPO WITHOUT HAVING TO GET THE ORIGINAL COMMIT ID! WOOOOO!

  35. Rane Wallin said

    Great video. Thanks.

  36. João said

    I followed all the instructions, but my bundle.js file is empty.

About This Screencast

In the first episode of our React series, we’ll continue working with the commenting application we built in the Powering Up With React course. Watch us build, and practice alongside us by downloading the source code below.

You need to be an enrolled student in order to view this video and subscribe.

Enroll Now