TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

React.js Introduction for People Who Know Just Enough JQuery

614 pointsby chibicodealmost 10 years ago

34 comments

michaelbuddyalmost 10 years ago
I haven&#x27;t gone through this page yet, but thank you for at least the attempt at reaching somebody in my state of affairs. Front End work is very hard. The front end design &amp; what I would call the back-end front-end disciplines are supposed to meld together according to job postings and over-zealous recruiters, but it&#x27;s a good deal more complex than I have been willing to put up with, mostly because of the materials to get started and the unintuitive tools that people who know what they are doing swear by.<p>Imagine being solid at design, pushing pixels, using HTML, CSS. Then suddenly these program frameworks which are created by back-end programmers not visual designers appear and the ramp up for the average technical person is immense. For me it&#x27;s been enough to turn me off them all together and make it a talking point that &quot;my javascript skills fall off at X,Y or Z&quot; so recruiters and employers know that despite being able to do a lot, I can&#x27;t suddenly become everything UI and everything back end just because the title of anything &quot;front end&quot; is so versatile.
评论 #9859104 未加载
评论 #9858584 未加载
评论 #9861369 未加载
vezzy-fnordalmost 10 years ago
Speaking as someone not intimately involved in the web development community, React looks decent but absolutely not worthy of the obscene amounts of hype it received... unless what web devs had before was really that horrible, because that&#x27;s the impression I got. Though from what I can tell, jQuery and React are somewhat orthogonal tools, as I have used the former and it goes beyond rendering views.<p>What I cannot figure out is all the harping on about &quot;functional style&quot;. The React examples all felt more Smalltalk-ish to me than anything else (I suppose unsurprising given JavaScript&#x27;s vague influences from Self). The use of closures doesn&#x27;t really change the conceptual patterns much. Is it because the tutorial can only cover so much ground, or is it that since some of the primary buzz around FP was the management of mutable state, to the point that people now instinctively associate the idea with FP?
评论 #9858119 未加载
评论 #9858039 未加载
评论 #9859427 未加载
评论 #9859227 未加载
dahjellealmost 10 years ago
Shameless plug: I wrote my own React introduction—geared more for people that know some JS and HTML, but not necessarily any other JS libraries. More specifically, it very gradually builds up from rendering a single JSX tag to enough components, state, and props to build React&#x27;s to-do example. I found React has an unusually gradual learning curve—you can really build up concepts bit-by-bit.<p>EDIT: As per usual, I forgot the link: <a href="https:&#x2F;&#x2F;github.com&#x2F;dahjelle&#x2F;Programming-Worksheets&#x2F;blob&#x2F;master&#x2F;React.js&#x2F;IntroductoryReact.markdown" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dahjelle&#x2F;Programming-Worksheets&#x2F;blob&#x2F;mast...</a>
评论 #9858550 未加载
philliphaydonalmost 10 years ago
As someone who knows Angular and Knockout. I found this great. Because react is a different way of thinking IMO that most tutorials I read were not easy to get up and running so I just threw in the towel and forgot about react. Most people make too many assumptions on the skill level of the reader (myself included when I blog) and it can be frustrating.<p>Thanks.
评论 #9857286 未加载
评论 #9857137 未加载
评论 #9858390 未加载
ifdefdebugalmost 10 years ago
Maybe slightly off-topic, but the tutorial page adds entries to my (Firefox) back button as I scroll down. So when I tried to &quot;back&quot; to HN, nothing happened. Second, third back, nothing happened. Opening the back list, a dozen or so entries and they all do nothing.<p>I think this kind of design should really be avoided, it breaks my user experience.
评论 #9857955 未加载
评论 #9857536 未加载
评论 #9857676 未加载
评论 #9858076 未加载
zamalekalmost 10 years ago
Consumable content aside, I absolutely <i>love</i> the format of the tutorial. It&#x27;s <i>significantly</i> more pleasant to dig into compared to what seems to be the more common tutorial format (e.g. [1]).<p>Good work.<p>[1]: <a href="https:&#x2F;&#x2F;tour.golang.org&#x2F;welcome&#x2F;1" rel="nofollow">https:&#x2F;&#x2F;tour.golang.org&#x2F;welcome&#x2F;1</a>
评论 #9857080 未加载
评论 #9861368 未加载
Omnipresentalmost 10 years ago
Is React meant to replace Ember&#x2F;Angular type of frameworks? Can React also connect with backend APIs to fetch JSON and present them on the frontend? I&#x27;ve been waiting to nosedive into Angular2 (when its out), is React a better alternative to get started with?
评论 #9857652 未加载
评论 #9858080 未加载
评论 #9857611 未加载
评论 #9857559 未加载
评论 #9857568 未加载
评论 #9857580 未加载
hit8runalmost 10 years ago
Sorry but nowadays I feel that jQuery is like php for the frontend: people get results fast but the average code quality is so shitty. Why on earth is jQuery used for things that normal js can do instantly? There are so many libs out there based on jQuery even though this dependency is absolutely unnecessary. I might sound arrogant but people should get an understanding for JavaScript and learn how to use it before stacking layers of abstraction. Ajax with normal JS for example is not so hard. One doesn&#x27;t need all the fancy angular&#x2F;jQuery&#x2F;whatsoever helpers. If one knows the basics it&#x27;s okay to use some convenience stuff from time to time but I feel that so many low quality devs are solely relying on their precious xxx kb libs just to display a simple hello world.
评论 #9859704 未加载
评论 #9859671 未加载
paaaaaaaaaaalmost 10 years ago
I have looked at react.js a couple times after reading more and more buzz about how fantastic it is. However I&#x27;m instantly turned off of switching to it when I read that HTML (which isn&#x27;t HTML and is actually something called JSX) goes in your js files.<p>With angular I can keep all my HTML in my HTML files. Is this normal or am I completely missing something?
评论 #9857802 未加载
评论 #9857778 未加载
评论 #9857790 未加载
评论 #9858489 未加载
评论 #9857721 未加载
评论 #9857791 未加载
评论 #9857739 未加载
评论 #9858091 未加载
orheepalmost 10 years ago
I see the point but noone in their right mind would write the javascript like that. When written better it&#x27;s a good amount shorter than the React solution.<p><a href="http:&#x2F;&#x2F;pastebin.com&#x2F;wbGZZs7U" rel="nofollow">http:&#x2F;&#x2F;pastebin.com&#x2F;wbGZZs7U</a>
评论 #9857132 未加载
评论 #9857760 未加载
评论 #9857352 未加载
sancha_almost 10 years ago
Thank you, great intro to react. Easy for me as a backend dev to follow and get a grasp of React.<p>One thing, the page loaded constantly itself, after reading half through the tutorial (3-4 minutes), I had about a hundred entries for the same page in the tab history. This makes the website aweful.
评论 #9857083 未加载
Grue3almost 10 years ago
Can React use separate HTML templates? I find this style of mixing markup and Javascript super-ugly.
评论 #9857426 未加载
评论 #9857449 未加载
moonchromealmost 10 years ago
OK I may be off point here - but why do people who know just enough JQuery need to know about React ?<p>Wasn&#x27;t React developed as a tool to manage complex data flow patterns inside of a big web app like Facebook ? Why does your average JQuery developer need to know or care about this whole new abstraction layer ?<p>Even though I&#x27;ve seen it a 100 times by now I&#x27;m still amazed by how fad driven programming culture is and I feel like this is a perfect example : React - come learn this complex peace of technology to solve problems you never had (and probably never will).
评论 #9858502 未加载
评论 #9857431 未加载
评论 #9858296 未加载
评论 #9857473 未加载
评论 #9859470 未加载
评论 #9858915 未加载
评论 #9857727 未加载
评论 #9857510 未加载
blhackalmost 10 years ago
Can somebody explain to me what is so bad about jquery? I use jquery every single day to make web pages do the things that I want them to do.<p>But my javascript hipster friends all claim that this is wrong and stupid and that I shouldn&#x27;t use jquery because of some abstract reason that nobody ever seems to be able to articulate to me.
评论 #9858912 未加载
评论 #9860586 未加载
评论 #9858976 未加载
评论 #9859617 未加载
sgrovealmost 10 years ago
Also interesting to see the pitch on &quot;ClojureScript is a Product Design Tool&quot;[0], written by Precursor&#x27;s designer. A lot of this stuff can be made more accessible for designers and FE developers who don&#x27;t <i>want</i> to have to deep dive into all the new-fangled frameworks.<p>[0] <a href="https:&#x2F;&#x2F;precursorapp.com&#x2F;blog&#x2F;clojure-is-a-product-design-tool" rel="nofollow">https:&#x2F;&#x2F;precursorapp.com&#x2F;blog&#x2F;clojure-is-a-product-design-to...</a>
arenaninjaalmost 10 years ago
I&#x27;m excited for ReactJS catching fire. I&#x27;ve been using a lot of it lately, and most recently I had to go back to a set of components I built to add functionality. In total, the front-end took maybe 20 minutes: no fishing around for the right selector or clashing functions. Just &quot;here&#x27;s a new button, attach this event&quot;
FloNeualmost 10 years ago
If you must compare Angular with React, then at least compare it to ReactJs+Flux+more or Angular-Templates with React-Templates.<p>React is more like the view-lib of a framework. I like them both (also ember, knockout, backbone) and unfortunately think the battle isn&#x27;t decided yet. Will take some time if ever...<p>Complain to Steve Jobs(1), for killing Flash&#x2F;Flex, as you could to client-side apps with desktop performance, without the hassle of Cross-Browser testing and so on... In my opinion the concepts of Angular and React+Flux are heavily based on the features this platform provided.<p>(1) IMHO the Only good thing he ever did (for the web), as it forced the proprietary software out... but led to the great Framework-War :)<p>P.S.: Also Actionscript 3 was ECMAScript(Javascript) plus Classes, Types and more... ( I wondered about which Version that was latly and found out they implemented ECMAScript and extended it with features requested by users.)
评论 #9858112 未加载
aprdmalmost 10 years ago
Really well written, as a backend developer who has been playing a little bit with frontend lately this hits the sweet spot :)<p>Cheers
评论 #9857065 未加载
marcamillionalmost 10 years ago
This tutorial is awesome! I love the tone and how it knows EXACTLY who it is written for.<p>This may be a bit late, but I would LOVE for someone to do this for JS in a Rails App (or even CoffeeScript). I am desparately searching for good tutorials for people that are &quot;borderline-decent&quot; at jQuery but are Rails devs. I can&#x27;t find any.<p>I understand, in theory, how to render some JS on a view and all this good stuff - but once you go into creating a UI that feels like a modern UI with lots of lil AJAXy elements...it can become a pain REAL quick with a bunch of `...js.erb`s all over the place with no seeming pattern to them.<p>So I would love if someone had a tutorial just like this, for how to create a simple and sexy app that looks like an Angular&#x2F;Ember app but just using CoffeeScript&#x2F;jQuery&#x2F;vanilla JS.<p>Anyone know of any such thing?
评论 #9863115 未加载
iamflimflam1almost 10 years ago
Really great tutorial - would be good in the next steps to talk about getting webpack setup etc..
评论 #9858311 未加载
评论 #9856937 未加载
评论 #9857115 未加载
k__almost 10 years ago
Good article. Needed it two weeks ago :D<p>I did 4 years ExtJS and 1 year Ember. React was totally different but rather nice to work with. The API surface is so much smaller.
toxickgalmost 10 years ago
Great job, man! You make some strong points here that clearly reflect the important differences of these two approaches! Well done!
评论 #9857085 未加载
jarnixalmost 10 years ago
Comparing jquery to React (or Angular&#x2F;Aurelia&#x2F;etc) is obvious but the article is great for beginners though.
hive_mindalmost 10 years ago
Great concept (tutorials for people who know just enough JQuery). Would love more tutorials (for Angular, e.g.) for such people.<p>TodoMVC was a great effort. But unfortunately, the actual Todo creations are not well documented (for beginners to figure out how and why certain things were done).
radiospielalmost 10 years ago
This is really neat.. one thing though: there is nothing magic about &#x27;the &quot;magic&quot; state&#x27;; it would IMHO be better to just call it state (or inner state, or so), and to explain that once the state is changed react rerenders the component automatically.
评论 #9857061 未加载
tracker1almost 10 years ago
I think this article demonstrates very well why I think React should be the first choice for any new web projects... what to go with it (ember, flux (and related), or other) is open to more debate.<p>Of course there are great alternatives with similar workflows (mercury, etc).
评论 #9857009 未加载
评论 #9856969 未加载
sergiotapiaalmost 10 years ago
This is the first React article I read where it actually compares and contrasts the jQuery approach and the React approach. I feel like React makes sense now, even though writing my HTML inside JS still feels off.
Omnipresentalmost 10 years ago
That is a truly impressive tutorial. Just curious, how much time did you spend on putting it together? Additional props for doing it being a dad!
评论 #9862283 未加载
pjmlpalmost 10 years ago
My web experience is mostly custom in-house web frameworks, JSP, JSF, WebForms, jQuery and basic Angular.<p>It was a nice overview of React to me.
rashthedudealmost 10 years ago
Would you be open to the idea of writing something similar for React Native if you are interested and&#x2F;or find the time?
jozanalmost 10 years ago
This is neat! Thanks for sharing.
评论 #9856938 未加载
akhilcacharyaalmost 10 years ago
Wow, this is exactly what I needed.
rashthedudealmost 10 years ago
Beautiful article man.
curiousjorgealmost 10 years ago
am I the only one fine with using just jQuery and ajax? I&#x27;ve written a chrome extension with 4k lines of code and I never had any problems. Instead of breaking things into separate classes and components, I just put them in separate files or in logical sequence. I&#x27;m sure this can get a lot messy with more than one developer but so far my projects, I almost always just use some jQuery library or plugin that does 80% of what I want to do and hack the rest.
评论 #9858246 未加载
评论 #9858733 未加载
评论 #9858531 未加载
评论 #9859132 未加载
评论 #9858540 未加载
评论 #9859309 未加载
评论 #9859064 未加载
评论 #9859243 未加载