TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Things every React.js beginner should know

412 点作者 Scriptor超过 9 年前

17 条评论

marknutter超过 9 年前
So here we see the culmination of the great Frameworks vs. Libraries divide. Frameworks alleviate the need for the type of articles like the one linked here because they eliminate choice paralysis and imposter syndrome. Everyone is worried about whether or not they&#x27;re doing things The Right Way™ and so they either blaze ahead and hit the same pitfalls everyone else does (and then write blog posts to warn others) or they hold off on adopting the tech until they are shown The Right Way™ by someone else.<p>The truth is, libraries and frameworks both end up being equally complex to work with, precisely because the <i>problem of building large applications is inherently difficult</i>.<p>It all comes down to personal preference:<p>Are you the type of person who is more likely to believe you can do something better than everyone else, or are you the type who is more likely to defer to those you believe to be better than you?<p>Are you decisive or do you agonize over the smallest choices?<p>Do you feel a compelling need to understand how everything works, or are you willing to implicitly trust other people&#x27;s systems?<p>I find it amusing that people who gravitate toward smaller libraries like Backbone.js and React.js rail against frameworks like Ember or Angular for being overly complex, heavy, and &quot;magical&quot;, and then proceed to cobble together a Rube-Goldberg-esque system of disparate dependencies to achieve the same goals. When React first started getting popular all you read about was how simple the API was and how it was Easy to Reason About™. Fast forward to today and you need to have working knowledge of WebPack, ES6, Redux, immutable.js, Babel, and a bevy of other dependencies to be aligned with the React ecosystem&#x27;s ever-evolving best practices.<p>The exact same thing happened with Backbone.js and it will probably happen again with the next shiny new view-model library to ride the hype train.<p>It&#x27;s important that I point out, however, that none of this is necessarily a bad thing. Smaller libraries like React.js and Backbone.js encourage a cavalcade of innovation from which awesome things like Redux are born. But let&#x27;s not pretend that this doesn&#x27;t result in a heckuva lot of churn for the average developer whose job is to simply get shit done.
评论 #10970181 未加载
评论 #10969931 未加载
评论 #10971338 未加载
评论 #10974565 未加载
评论 #10971222 未加载
评论 #10976140 未加载
评论 #10972860 未加载
pkrumins超过 9 年前
I&#x27;m not a React or Angular expert, but do you really put HTML inside of your JS code? It just bothers me too much. We spent years in early web days learning that code and templates should be separate, yet here we are putting HTML inside of code, which goes against years of practice. Can anyone share their professional thoughts about this?
评论 #10967034 未加载
评论 #10967789 未加载
评论 #10967162 未加载
评论 #10967011 未加载
评论 #10968790 未加载
评论 #10967000 未加载
评论 #10967051 未加载
评论 #10966987 未加载
评论 #10967001 未加载
评论 #10967411 未加载
评论 #10967259 未加载
评论 #10967551 未加载
评论 #10967007 未加载
评论 #10967016 未加载
评论 #10967911 未加载
评论 #10967118 未加载
评论 #10967813 未加载
评论 #10967187 未加载
评论 #10966981 未加载
评论 #10967816 未加载
评论 #10968633 未加载
评论 #10968955 未加载
评论 #10969753 未加载
评论 #10967189 未加载
评论 #10969665 未加载
评论 #10967686 未加载
评论 #10969615 未加载
评论 #10968784 未加载
评论 #10967404 未加载
评论 #10968205 未加载
评论 #10968570 未加载
评论 #10967714 未加载
评论 #10967409 未加载
评论 #10968068 未加载
评论 #10967696 未加载
评论 #10967594 未加载
评论 #10970813 未加载
评论 #11031772 未加载
评论 #10967862 未加载
评论 #10967020 未加载
diggan超过 9 年前
&gt; 5. Use Redux.js<p>Well, that is not really something every React.js beginner should know. Feels weird to say that a X beginner should learn framework Y since he is probably just interested in X...<p>&gt; 6. Always use propTypes<p>Worth mentioning that this slows down your application since React needs to check all the props. Don&#x27;t forget to set NODE_ENV=production when compiling your production script.
评论 #10967250 未加载
评论 #10967125 未加载
评论 #10969712 未加载
didgeoridoo超过 9 年前
#10: This guide will be out of date in 3 months.
评论 #10966890 未加载
评论 #10966988 未加载
评论 #10967262 未加载
tptacek超过 9 年前
Someone sell me on Webpack? We use Browserify for no other reason than that someone gave me a boilerplate Gulpfile that relied on it.<p>What part of my life would actually get better if I took the 4 hours of my life I will never get back to make this switch?<p>Thanks!
评论 #10968316 未加载
评论 #10968221 未加载
评论 #10970604 未加载
评论 #10968250 未加载
评论 #10968199 未加载
评论 #10968187 未加载
Ronsenshi超过 9 年前
#3 Write functional components<p>I&#x27;d say &quot;Write functional components where it makes sense&quot;. For simple components that is a reasonable advise, however in cases when you need such methods as `componentDidUpdate` or generally any lifecycle methods - that won&#x27;t do and you have to use classes.
评论 #10967460 未加载
jastanton超过 9 年前
Fantastic article, in the past 9 months you&#x27;ve hit on nearly all of my discoveries.<p>Something I do now every time I create a new react app is to create a base class that extends React.Component that uses `PureRenderMixin`. When doing this I can prevent unnecessary renders from props changes. A killer of this would be passing an prop to a child that always changes its identity, like passing a function that calls `bind`, Because bind create a new method every time its call the identity always changes and the method will always be re-rendered. Knowing gotchas like these can help really speed up apps!
k__超过 9 年前
I tried a different approach here: <a href="https:&#x2F;&#x2F;github.com&#x2F;kay-is&#x2F;react-from-zero" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;kay-is&#x2F;react-from-zero</a>
lukesan超过 9 年前
What really bothers me about React (and other frameworks) that without JS you do not see anything. No fallback. No progressive enhancement. Is this really the way to go? Did JS replace HTML&#x2F;CSS as the backbone of websites&#x2F;applications ?
评论 #10967807 未加载
评论 #10968341 未加载
评论 #10967825 未加载
评论 #10969599 未加载
评论 #10968195 未加载
评论 #10970758 未加载
评论 #10968261 未加载
评论 #10968283 未加载
评论 #10970902 未加载
mythz超过 9 年前
# 3. Write functional components<p>Functional Components don&#x27;t get Redux&#x27;s connect performance optimizations which is a good reason to avoid them: <a href="https:&#x2F;&#x2F;github.com&#x2F;rackt&#x2F;redux&#x2F;issues&#x2F;1176#issuecomment-167015145" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rackt&#x2F;redux&#x2F;issues&#x2F;1176#issuecomment-1670...</a>
评论 #10968062 未加载
kieranajp超过 9 年前
Google cache: <a href="http:&#x2F;&#x2F;webcache.googleusercontent.com&#x2F;search?q=cache:https:&#x2F;&#x2F;camjackson.net&#x2F;post&#x2F;9-things-every-reactjs-beginner-should-know" rel="nofollow">http:&#x2F;&#x2F;webcache.googleusercontent.com&#x2F;search?q=cache:https:&#x2F;...</a>
评论 #10966842 未加载
tzaman超过 9 年前
I&#x27;v done an integration test example (no PhantomJS, just jsdom) if anyone is interested: <a href="https:&#x2F;&#x2F;gist.github.com&#x2F;tomazzaman&#x2F;790bc607eb7ca3fd347f" rel="nofollow">https:&#x2F;&#x2F;gist.github.com&#x2F;tomazzaman&#x2F;790bc607eb7ca3fd347f</a>
todd3834超过 9 年前
Great article! As we have been on-boarding developers with React, we noticed that all of the boilerplate needed to get Babel, Webpack, Redux, and a testing environment (we use Mocha, Karma, and Chai) was simply too much for most people to handle while beginning something new. There are lots of boilerplate projects but telling someone new to fork a project on GitHub and start building an app from there was raising some eyebrows as well.<p>That&#x27;s not all, there are really amazing developer tools available for React development like the redux dev tools, and hot module replacement to name a couple. These tools are extremely helpful to beginners but a beginner is not going to enjoy the extra work of setting that up as well.<p>Imagine if you were going to build an app with Rails and the instructions were to follow a tutorial that had you manually hook up active record, create your bootstrap files by hand, write your own code to rebuild the server ever time code changed… or even forking a boilerplate Rails project and going from there. I don&#x27;t believe Rails would have become what it is today without the Rails CLI.<p>What happens when the boilerplate changes? What if you find a XSS vulnerability in the boilerplate project that you used in your last 10 projects. Rails developers have identified and quickly patched several security vulnerabilities over the years. It&#x27;s usually as easy as updating a gem file to patch your app. With the boilerplate approach, you would have to manually update all of your apps or try to merge the update from the project your forked. That isn&#x27;t going to be fun at all.<p>Finally, one of the coolest things you can do with React is server side rendering to build universal apps. At this point, even if you know exactly what you are doing, setting up a new app is going to give you way too much work just to get started. So you&#x27;ll need to find a boilerplate with server side rendering and fork it. There are way more opportunities for security issues when you increased the surface area of your app&#x27;s responsibilities. There will be updates to this boilerplate and you will have to merge them into all of your apps. I hope you like manually updating files and resolving merge conflicts on files you don&#x27;t really understand…<p>We set out to resolve these problems when we built GlueStick (<a href="https:&#x2F;&#x2F;github.com&#x2F;TrueCar&#x2F;gluestick&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;TrueCar&#x2F;gluestick&#x2F;</a>). It&#x27;s a CLI that allows you to quickly generate new apps using all of the tools we like to use on React applications. You have generators for creating containers (smart components hooked up to redux), components, and reducers. Redux is set up out of the box. You have server side rendering out of the box. We also push as much of the boiler plate code into the GlueStick module as we can. This lets you easily get performace and security updates as well as new features by simply updating the node module. You also get a sane folder structure so that all of your apps built with this tool will be easy to navigate.<p>We built this tool at TrueCar but we open sourced it. That means you can take it and make it your own, contribute back if you want to improve it and you can rest assured that it is backed by a big company that is heavily invested in seeing it succeed.
评论 #10969284 未加载
ktdrv超过 9 年前
Some very good advice here but after reading through the list I had a familiar feeling. Functional, stateless, typed, Redux? Yep, that&#x27;s Elm.
评论 #10969741 未加载
Keats超过 9 年前
Good advices but I would add TypeScript as well
joseraul超过 9 年前
How about TypeScript&#x2F;TSX? React&#x27;s components and &quot;views&quot; are easy to type (and you get completion in your IDE) but I still have to find a convenient way to type an Immutable map where each key&#x2F;value pair has a different type (the equivalent of a TypeScript object). Any idea?
评论 #10970100 未加载
baby超过 9 年前
``` &lt;section&gt; &lt;div&gt;&lt;h1&gt;Latest posts&lt;&#x2F;h1&gt;&lt;&#x2F;div&gt; ```<p>isn&#x27;t that div unnecessary?
评论 #10970777 未加载