8 ms·
Learn Raw React – No JSX, No Flux, No ES6, No Webpack
- draw_down 11y agoES6 is the variant of the language we will be using in the future (and many of us presently). It's not a fancy gewgaw that hipster devs use to look cool.
- rnnr 11y agoHe's point was to make a gentler and more approachable introduction to react without any fancy transpiling tools. He isn't mocking any of these technologies. Awesome writer kudos to him.
- kelkes 11y agoWas looking for something like this to get started with React. Many Kudos!
- firasd 11y agoThis is great. Also see the React docs tutorial: https://facebook.github.io/react/docs/tutorial.html https://facebook.github.io/react/docs/tutorial.html
- manojlds 11y agoWhy not JSX? To me, JSX is part of React. If someone starting with React sees all that React.create element, they will run away.
- DatBear 11y agoAbsolutely this. I just started learning React a few days ago, and I absolutely would not have given it a chance with all those React.createElements. That looks like hell.
- benatkin 11y agoSome people don't like JSX. This is fine. But to imply that it's not part of React by calling the non-JSX variant "raw React" is misleading.
- antris 11y agoIt's not misleading at all. I've created several React apps without JSX. I just didn't feel I had a need for it, and React without JSX worked really well. People make these exaggerated comparisons of raw React code vs. JSX where they show unrefactored code with React.createElement spammed all over the place. With functional programming principles you can cut that syntax down to almost the expression power of JSX.
- bgilroy26 11y agoI don't think this is intended to replace 101-level tutorials. This is to help break down what's going on behind the scenes after you've been through todolist etc. In the article Mr. Nelson says the intended audience are people who have "spent a couple hours investigating" already.
- jamesknelson 11y agoAuthor here. My target audience here was really people who've already decided they're going to use React, and are keen on understanding what is going on under the hood. And while I do love JSX (and use it in my own projects), my feeling is that to really grok React, writing something without JSX is invaluable.
- SiVal 11y agoI'm part of that target audience, and you scored a bullseye with me. I always prefer to learn a new technology this way, by building very simple things from scratch and making minor modifications this way and that until I know what all the low-level parts do. Then, you can add some conveniences to the mix explaining what they do in terms of the underlying technology I just learned (and I can tell which parts are the base technology and which belong to this add-on), until I feel I could recreate these conveniences or build my own alternatives, if I chose to. That way, I can decide for myself how to use the technology, break away from the typical stack of add-ons at any point I choose and take it from there in a direction that better suits my needs, dig in and figure out what's going on if I have a problem, and so on, rather than being helplessly dependent on a magical black box. Thank you for starting off by teaching low-level React without any JSX, Flux, Redux, or whatever. I wish more tutorials did that.
- dclowd9901 11y agoWhen I started learning iOS dev, every tutorial pointed me at the interface builder. It drove me nuts because I'm doing this magic and things are happening but when something fails I have no clue what to do, and guess what: things failed a lot and for weird reasons when you used IB and didn't know how it worked under the hood. Granted JSX is far less bloated than IB, but its important to understand <Component /> bootstraps a react class component and <div> just renders a div.
- antris 11y ago> If someone starting with React sees all that React.create element, they will run away. That's a possible reaction. Other developers would refactor instead of running away, though. Not using JSX doesn't mean typing React.createElement all over the place. var e = React.createElement And you already have much neater code. You can even go further and create functions for p, h1, input etc. and you're almost down to the expression power of JSX. And as a bonus, you don't have to spend time learning the JSX compiler and syntax.
- adamwong246 11y agoNot for me. I hate JSX, mainly because I like coffeescript and jade. I write all my code, view and otherwise, in coffee.
- benatkin 11y agoI think raw React is React as it's defined by the project maintainers. JSX always seems to be a part of this.
- twic 11y agoI think "raw" distinguishes something from the normal state in which it is consumed. For example, a raw Big Mac is not the thing that McDonald's want to give you, but it's an interesting thing to study if you want to understand how a Big Mac works.
- chadaustin 11y agoReminds me of working on an old Windows UI almost two decades ago. All the tutorials were basically "you should type this", and all the project templates and UI editors in Visual Studio produced copious amounts of generated code. Nobody seemed to really understand that generated code. So I sat down and learned how to write a new MFC project from scratch, no templates or generated code. Once I understood what it was doing, I felt like I could use the rest of the ecosystem with confidence. A useful, educational exercise!
- tyingq 11y ago>>Reminds me of working on an old Windows UI Me too, in a different way. It provides a very clear view of how MVC moves from the back end to the front end. Coupled with other things that have moved more of the meat of the work to the browser, you end up in a funny circular place. At a high level, it starts to look much more like the pre-web client/server model of "fat clients" written in MS/MFC, or C/X11/Motif/Qt/etc, and the backend relegated to mostly serving centralized data or events. What's old is new again I suppose. The browser, in general, feels like a giant step forward. I wish, though, that some ecosystem had evolved where Javascript wasn't the sole supported client side language.
- bonobo3000 11y ago>What's old is new again I suppose. The browser, in general, feels like a giant step forward. I wish, though, that some ecosystem had evolved where Javascript wasn't the sole supported client side language. Webassembly is coming!
- crudbug 11y agoNow add RxJS !
- Ronsenshi 11y agoI hope you meant add RxJS in possible future tutorials. It is very clear that author's intention for this post was to avoid any unnecessary clutter - hence no Flux, no JSX etc. Adding RxJS and with it a whole train that is functional programming is definitely not something that would be helpful for people who just want to "get" React.
- marknutter 11y agoThe problem is, of course, that JSX, Flux, and Webpack came to be because of problems that people ran into when using just raw react. JSX solves the problem of not being declarative enough and being too foreign to designers. Flux solves the problem of having to cascade data through dozens of children for mundane tasks. Then of course Webpack solves the problem of needing to transpile JSX and ES6 to plain JavaScript and minifying/uglifying/etc your assets. There is no such thing as "raw React" because building a web application is complicated no matter how you slice it. You either use a svelte library like React or Backbone and bolt on everything else you need yourself, or you just use a batteries-included framework like Ember, Angular, or Aurelia and let someone else provide a convention for you to follow. Complexity, sadly, is impossible to avoid.
- BinaryIdiot 11y ago> Complexity, sadly, is impossible to avoid. Complexity is impossible to avoid? Reading this just makes my heart sad. There is no reason you can't avoid complexity here. Minifying and concatenating of assets is a very understood thing. It's really easy to do in fact. Whatever building solution you use (grunt, gulp, plain scripts), minifying and concatenating of resources should be a few lines of code if that. Transpiling I don't get. Yeah I'd love to use the new hotness of ECMAScript 6 but ECMAScript 5 has awesome support everywhere and isn't so significantly different to 6 that productivity is horrible; why can't we just use ECMAScript 5 until 6 is more readily available? But I digress because if you have to transpile that's still an easy build step. If you want to do it with every file change then that sucks, stop doing that. That's only useful in edge cases like debugging older browsers. For JSX just don't use it. HTML and JavaScript is kinda awkward to begin with; combining them together in some mixed format only to be separated seems like a way to just obfuscate the real way it works. I find it far, far better to understand how they work than trying to abstract them to some awkward degree that can't be used without transpiling. Maybe I'm an old timer not using the new hotness that is JSX, Webpack, etc but I just don't understand why anyone would bother bringing in that extra complexity when it's unnecessary even from a productivity standpoint. But I digress, maybe I'll just get downvoted here I just don't get it.
- 11y ago
- mbrock 11y agoGreat stuff! var tag = React.createElement Could make the code nicer to read...
- wereHamster 11y agoor even h1 = React.createFactory('h1'), ... and so on for every that you use in the file, and then use h1({}, 'text') in the code.
- brianshaler 11y agoWhat about h1 = React.DOM.h1;? Personally, I moved from using DOM tag names as variable names ('a' being the worst) to saving 'var DOM = React.DOM' (or '{DOM} = React') and then calling DOM.a(props, children...)
- niothiel 11y agoMithril.js uses 'm()'. Check it out: http://mithril.js.org http://mithril.js.org
- antris 11y agoYou've hit the nail on the head. I've never seen a fair JSX vs. React.createElement comparison on a blog post. The latter is never given even a basic refactoring such as you and your child comment suggested.
- Aleman360 11y agoThe verbosity makes things easier to understand for beginners.
- neurowolf 11y agoThis looks great, thanks!
- proc0 11y agoThanks. I actually don't like JSX. It seems it encourages logic and presentation mixup. Plain React.js seems good for Views as they advertise. I think React.js + ES6 + functional library, will make a good combo.
- firasd 11y agoNot using JSX won't mean your React doesn't mix HTML & JS though. React's whole philosophy is to mix them. So it just means you will have to keep typing ".createElement('h1'...)" instead of typing "<h1>".
- thibauts 11y agoIt mixes presentation and presentation logic. You don't have to use a poor language to build your HTML.
- k__ 11y agoGood work. I did something like this too. But less prose, a bit shorter and it starts a bit low-level. https://github.com/kay-is/react-from-zero https://github.com/kay-is/react-from-zero
- dclowd9901 11y agoFirst, kudos to the author for this approach. I avoided the hell out of react for the longest time because of the JavaScript build soup you seemingly needed to get anything to run. I would've loved a tut like this a year ago. > At it’s most basic, React is a tool for rendering HTML with JavaScript. Not really; at its most basic, it's a tool that inextricably ties DOM state with JavaScript (a conceptual implementation of WebComponents). That's the power of React. Yes, a byproduct of that is that it renders HTML, but you use it so you don't have to use things like Sizzle to get into and manage the state of the DOM. Its a small difference but meaningful in that you wouldn't want to confuse its purpose with something like document.createElement().
- akamaozu 11y ago> at its most basic, it's a tool that inextricably ties DOM state with JavaScript Thank you for this! It seems like many people get the impression that React is a really fancy template engine, which sucks. Part of what its capable of is rendering templates, but only as a byproduct of the task you described.
- ludwigvan 11y agoGood article. Also, for more discussion regarding using React without JSX, see https://github.com/ustun/react-without-jsx https://github.com/ustun/react-without-jsx
- Kiro 11y agoI just can't be bothered with build tools. I just want to include a JS and use it. That's how I roll. How can I overcome this?
- mbrock 11y agoJust keep doing that. If you then start feeling some pains that a build tool could help with, install the build tool and move on.
- zapu 11y agoI've found React itself pretty easy and fun. Finding the right libraries (I still don't know what I should use for promises) and connecting all the tooling with one of the build systems is the part I'm losing sleep over.
- dclowd9901 11y agoAny a+ spec library will do. I prefer bluebird.
- jbeja 11y agoWhy not Clojurescript with Reagent?
- niothiel 11y agoIf you like doing this sort of thing, check out http://mithril.js.org http://mithril.js.org.
- tyingq 11y agoThis sort of "deconstructed" approach was helpful for me. I also found it easier to start learning first with a decent foundation of just "what is a virtual dom?" This was useful: https://github.com/Matt-Esch/virtual-dom https://github.com/Matt-Esch/virtual-dom
- matthewtoast 11y agoNice work! I'm really happy to see this kind of restrained approach to introducing React. I wish it had been the first tutorial I encountered. I hope it inspires other teachers. Tutorials should be about teaching others. But many tutorials today seem to be more about showing what the author knows.
- kra34 11y agoYou're so close! just change it to "Learn Raw Javascript - No React - no jsx ..." But since its pushing people in the right direction, I approve your message.