5 ms·

It's a pretty good document. That said, I personally would advise new learners against trying to deal with Webpack and Babel. Instead, they should use the off

It's a pretty good document. That said, I personally would advise new learners against trying to deal with Webpack and Babel. Instead, they should use the official Create-React-App tool ( https://github.com/facebookincubator/create-react-app https://github.com/facebookincubator/create-react-app ) for setting up projects. It creates a project with a solid build setup, with no configuration needed on your part. Learning to configure Webpack shouldn't _have_ to be a prerequisite for learning React. For anyone looking for more information past what this guide offers, I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics. I also published an "Intro to React (and Redux)" presentation at http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/ http://blog.isquaredsoftware.com/2017/02/presentation-react-... , which is a good overview of the basic concepts for both React and Redux. Finally, the Reactiflux chat channels on Discord are a great place to hang out, ask questions, and learn. The invite link is at https://www.reactiflux.com https://www.reactiflux.com .

JasonSage 9y ago
I second the recommendation for the Reactiflux Discord—there's always helpful folks online who are willing to assist with whatever problems you're having, and I can't think of any better place on the web to get React-specific help. I do wish this guide went into the specifics of dealing with Webpack and Babel. As solid as CRA is, Webpack and Babel are very leaky abstractions and I think every JS developer eventually requires some Webpack- or Babel-specific knowledge in order to solve some issue. While CRA is mostly effective at hiding these details, I'm not sure it's close to the safety and sureness you get from a comprehensive working knowledge of Webpack and Babel. I also second the recommendation for the react-redux-links repo. I've never been in need of a reference for something React-related and been unable to find it there. It's a great , well-thought-out resource. (Hey @acemarke, jsonnull here)
- dabbott 9y ago
  Thanks for the feedback, guys. Great point about Reactiflux, I should add a link to that and other "further reading" resources like react-redux-links. I have both "Quick Start" for CRA, and then the more detailed coverage of npm, Webpack, and Babel under "Build Tools". In most parts of the guide I make a more opinionated choice--however, in this case I leave it to the reader to decide how to set up, since both are valuable for different reasons. I briefly compare the two in "Environment", but it might be worth explaining in more depth. CRA is amazing for new apps. Yet for somebody trying to learn React to bring it into their workplace, CRA may not make sense. I'd also love to dive deeper into Webpack and Babel, but don't want the guide to slow down too much before getting into React. ¯\_(ツ)_/¯
  - acemarke 9y ago
    Good point - I should have glanced at the first couple bullet sections a bit more carefully :) Definitely a nice resource overall, and I'll be adding it to my list as well. I'd still argue that CRA is a good starting point for a lot of "real" apps too. I'll quote a comment I made on Reddit yesterday: > CRA can absolutely be used for real-world apps. It's not aimed at a full-blown 100% "big company"-type setup, but it is specifically intended to give you a solid build config with good defaults. > CRA serves three primary purposes: it allows React learners to set up an environment without having to learn Webpack and Babel first; it allows experienced React devs to spin up a project without having to do all the configuration work (or copy and paste it from somewhere); and it also provides a common starting point for instructions and tutorials. For example, my recent blog post on using the Cesium.js 3D globe library with Webpack and React ( http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/ http://blog.isquaredsoftware.com/2017/03/declarative-earth-p... ) was able to start by just saying "Create a CRA project, eject, and modify these two config values". > On that note, CRA's `npm run eject` command transfers all of the pre-written config files into your project if you want to take control and make modifications to the configuration. So, it's entirely feasible to use CRA's configs as the starting point and only have to make some edits instead of writing it all from scratch. And, those configuration files are heavily commented to act as both a learning tool and an explanation if you're trying to make edits.
kakarot 9y ago
You have noble intent, but you're just trading upfront ease for difficulty down the road. Understanding the intricacies of and building a custom pipeline with gulp + webpack-stream took me about 3 nights. A paltry about of time for the value it brings to the table. Opinionated frameworks with several already-configured tools are just big black magic boxes with many moving parts. Learning how to implement your own pipeline allows you to come to grips with those moving parts one at a time, without feeling overwhelmed. I mean it's 2017, the unfortunate truth is that having this kind of skillset in your webdev toolbelt is a requirement.
- acemarke 9y ago
  I didn't say people should _never_ learn Webpack or Babel or other similar build tools. I said that those build tools shouldn't have to be a required prerequisite you have to spend time learning and configuring just so you can starting learning React itself :) You absolutely _can_ use React with just a script tag, but the most common usages do involve compilation (for JSX at a minimum, and likely for ES6 and not-yet-finalized features like the Class Properties syntax). So yes, a build setup is generally needed, but someone who just wants to learn React shouldn't have to worry about that part... _yet_.
  - kakarot 9y ago
    I guess we just have differing philosophies on it. As it happens, I've been learning React the last week as I move away from templating languages, and your list has been in a pinned tab in case I needed it. Thank you so much for the time you've spent aggregating everything. It's been smooth sailing so far but Redux's documentation leaves a lot to be desired, and Dan's readthesource episode had too many distractions. I was going to check out some of the Redux tuts you listed, and since you're here... any particular recommendations on which to start with for someone now already familiar with React?
    - acemarke 9y ago
      Well, normally I'd say you _should_ start with the Redux docs and Dan's videos on Egghead, both of which try to teach Redux from first principles. The front page of my links list also has a "best-of / getting started" selection of articles on key Redux concepts like "side effects" and "normalization". I'm very curious - what issues and concerns do you have with Redux's documentation? Any specific pain points or topics that are missing? A large part of my contributions to Redux thus far have been adding sections to the docs (the Redux FAQ and the "Structuring Reducers" section), so if you've got suggestions on how the docs can be improved, I'm always looking for ideas. I'm not entirely sure what articles to recommend past that, because I'm not sure what topics you've picked up thus far and what info you need next. If you'd like to see some examples of Redux being used to build an actual app, you might want to check out the "Building a Simple CRUD App with React and Redux" series [0], and my own "Practical Redux" tutorial series [1]. I've also got an "Intro to React and Redux" slideset as well [2]. I'd also definitely like to invite you to drop by the Reactiflux chat channels on Discord [3]. Feel free to ping me there and we can figure out what info would best help you continue learning Redux. [0] http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ http://www.thegreatcodeadventure.com/building-a-simple-crud-... [1] http://blog.isquaredsoftware.com/series/practical-redux/ http://blog.isquaredsoftware.com/series/practical-redux/ [2] http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/ http://blog.isquaredsoftware.com/2017/02/presentation-react-... [3] https://www.reactiflux.com https://www.reactiflux.com

JasonSage 9y ago

I second the recommendation for the Reactiflux Discord—there's always helpful folks online who are willing to assist with whatever problems you're having, and I can't think of any better place on the web to get React-specific help. I do wish this guide went into the specifics of dealing with Webpack and Babel. As solid as CRA is, Webpack and Babel are very leaky abstractions and I think every JS developer eventually requires some Webpack- or Babel-specific knowledge in order to solve some issue. While CRA is mostly effective at hiding these details, I'm not sure it's close to the safety and sureness you get from a comprehensive working knowledge of Webpack and Babel. I also second the recommendation for the react-redux-links repo. I've never been in need of a reference for something React-related and been unable to find it there. It's a great , well-thought-out resource. (Hey @acemarke, jsonnull here)

dabbott 9y ago
Thanks for the feedback, guys. Great point about Reactiflux, I should add a link to that and other "further reading" resources like react-redux-links. I have both "Quick Start" for CRA, and then the more detailed coverage of npm, Webpack, and Babel under "Build Tools". In most parts of the guide I make a more opinionated choice--however, in this case I leave it to the reader to decide how to set up, since both are valuable for different reasons. I briefly compare the two in "Environment", but it might be worth explaining in more depth. CRA is amazing for new apps. Yet for somebody trying to learn React to bring it into their workplace, CRA may not make sense. I'd also love to dive deeper into Webpack and Babel, but don't want the guide to slow down too much before getting into React. ¯\_(ツ)_/¯
- acemarke 9y ago
  Good point - I should have glanced at the first couple bullet sections a bit more carefully :) Definitely a nice resource overall, and I'll be adding it to my list as well. I'd still argue that CRA is a good starting point for a lot of "real" apps too. I'll quote a comment I made on Reddit yesterday: > CRA can absolutely be used for real-world apps. It's not aimed at a full-blown 100% "big company"-type setup, but it is specifically intended to give you a solid build config with good defaults. > CRA serves three primary purposes: it allows React learners to set up an environment without having to learn Webpack and Babel first; it allows experienced React devs to spin up a project without having to do all the configuration work (or copy and paste it from somewhere); and it also provides a common starting point for instructions and tutorials. For example, my recent blog post on using the Cesium.js 3D globe library with Webpack and React ( http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/ http://blog.isquaredsoftware.com/2017/03/declarative-earth-p... ) was able to start by just saying "Create a CRA project, eject, and modify these two config values". > On that note, CRA's `npm run eject` command transfers all of the pre-written config files into your project if you want to take control and make modifications to the configuration. So, it's entirely feasible to use CRA's configs as the starting point and only have to make some edits instead of writing it all from scratch. And, those configuration files are heavily commented to act as both a learning tool and an explanation if you're trying to make edits.

kakarot 9y ago

You have noble intent, but you're just trading upfront ease for difficulty down the road. Understanding the intricacies of and building a custom pipeline with gulp + webpack-stream took me about 3 nights. A paltry about of time for the value it brings to the table. Opinionated frameworks with several already-configured tools are just big black magic boxes with many moving parts. Learning how to implement your own pipeline allows you to come to grips with those moving parts one at a time, without feeling overwhelmed. I mean it's 2017, the unfortunate truth is that having this kind of skillset in your webdev toolbelt is a requirement.

acemarke 9y ago
I didn't say people should _never_ learn Webpack or Babel or other similar build tools. I said that those build tools shouldn't have to be a required prerequisite you have to spend time learning and configuring just so you can starting learning React itself :) You absolutely _can_ use React with just a script tag, but the most common usages do involve compilation (for JSX at a minimum, and likely for ES6 and not-yet-finalized features like the Class Properties syntax). So yes, a build setup is generally needed, but someone who just wants to learn React shouldn't have to worry about that part... _yet_.
- kakarot 9y ago
  I guess we just have differing philosophies on it. As it happens, I've been learning React the last week as I move away from templating languages, and your list has been in a pinned tab in case I needed it. Thank you so much for the time you've spent aggregating everything. It's been smooth sailing so far but Redux's documentation leaves a lot to be desired, and Dan's readthesource episode had too many distractions. I was going to check out some of the Redux tuts you listed, and since you're here... any particular recommendations on which to start with for someone now already familiar with React?
  - acemarke 9y ago
    Well, normally I'd say you _should_ start with the Redux docs and Dan's videos on Egghead, both of which try to teach Redux from first principles. The front page of my links list also has a "best-of / getting started" selection of articles on key Redux concepts like "side effects" and "normalization". I'm very curious - what issues and concerns do you have with Redux's documentation? Any specific pain points or topics that are missing? A large part of my contributions to Redux thus far have been adding sections to the docs (the Redux FAQ and the "Structuring Reducers" section), so if you've got suggestions on how the docs can be improved, I'm always looking for ideas. I'm not entirely sure what articles to recommend past that, because I'm not sure what topics you've picked up thus far and what info you need next. If you'd like to see some examples of Redux being used to build an actual app, you might want to check out the "Building a Simple CRUD App with React and Redux" series [0], and my own "Practical Redux" tutorial series [1]. I've also got an "Intro to React and Redux" slideset as well [2]. I'd also definitely like to invite you to drop by the Reactiflux chat channels on Discord [3]. Feel free to ping me there and we can figure out what info would best help you continue learning Redux. [0] http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ http://www.thegreatcodeadventure.com/building-a-simple-crud-... [1] http://blog.isquaredsoftware.com/series/practical-redux/ http://blog.isquaredsoftware.com/series/practical-redux/ [2] http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/ http://blog.isquaredsoftware.com/2017/02/presentation-react-... [3] https://www.reactiflux.com https://www.reactiflux.com