Code Monkey home page Code Monkey logo

react-howto's Introduction

react-howto

If you’re new to React (or frontend in general) you may find the ecosystem confusing. There are a few reasons for this.

  • React has historically been targeted at early-adopters and experts
  • Facebook only open-sources what it actually uses, so it doesn’t focus on tooling for smaller-than-Facebook projects
  • There’s a lot of bad marketing masquerading as React guides

Throughout this document, I’ll assume you’ve built a web page with HTML, CSS and JavaScript.

Why should you listen to me?

There’s a ton of conflicting advice about React out there; why listen to me?

I was one of the original members of the Facebook team that built and open-sourced React. I’m no longer at Facebook and I’m now at a small startup, so I have a non-Facebook perspective as well.

How to tackle the React ecosystem

All software is built on a stack of technologies, and you need to understand enough of that stack to build your app. The reason why the React ecosystem of tooling seems overwhelming is because it’s always explained in the wrong order.

You should learn, in this order, without skipping ahead or learning concurrently:

You don't need to learn all of these to be productive with React. Only move to the next step if you have a problem that needs to be solved.

Additionally, there are a few topics that are often mentioned in the React community that are "bleeding edge". The topics below are interesting, but they're difficult to understand, are far less popular than the above topics and aren't required for most apps.

Learning React itself

It’s a common misconception that you need to waste a lot of time setting up tooling to start to learn React. In the official documentation you’ll find a copy-paste HTML template that you can save in an .html file and get started right away. No tooling is required for this step, and don’t start learning extra tooling until you’re comfortable with React basics.

I still think the easiest way to learn React is the official tutorial.

Learning npm

npm is the Node.js package manager and is the most popular way front-end engineers and designers share JavaScript code. It includes a module system called CommonJS and lets you install command-line tools written in JavaScript. Read this post for background on why CommonJS is necessary for browsers, or the CommonJS Spec Wiki for more on the CommonJS API.

Most reusable components, libraries and tools in the React ecosystem are available as CommonJS modules and are installed with npm.

Learning JavaScript bundlers

For a number of good technical reasons CommonJS modules (i.e. everything in npm) cannot be used natively in the browser. You need a JavaScript “bundler” to “bundle” these modules into .js files that you can include in your web page with a <script> tag.

Examples of JavaScript bundlers include webpack and browserify. Both are good choices, but I prefer webpack since it has a lot of features that make development of large apps easier. Since its documentation can be confusing, I have a plug-and-play template for getting started and I wrote a how-to guide for webpack for more complex use cases.

React also now offers an officially supported CLI tool called Create React App. It lets you create React projects powered by webpack without any configuration. It has its limitations, but it can serve as a great starting point, and its updates will add more features over time. It also offers an "ejection" feature that copies all configs and dependencies into your project so you have full control over them.

One thing to keep in mind: CommonJS uses the require() function to import modules, so a lot of people get confused and think that it has something to do with a project called require.js. For a number of technical reasons, I would suggest that you avoid require.js. It’s also not very popular in the React ecosystem.

Learning ES6

Outside of JSX (which you learned in the React tutorial), you may see some funny syntax in React examples. This is called ES6, and it’s the latest version of JavaScript so you may not have learned it yet. Since it’s so new, it’s not supported in browsers yet, but your bundler can translate it for you with the proper configuration.

If you just want to get things done with React, you can skip learning ES6, or try to pick it up along the way.

You may see some talk about ES6 classes being the preferred way to create React components. This is untrue. Most people (including Facebook) are using React.createClass().

Learning routing

“Single-page applications” are all the rage these days. These are web pages that load once, and when the user clicks on a link or a button, JavaScript running on the page updates the address bar, but the web page is not refreshed. Management of the address bar is done by something called a router.

The most popular router in the React ecosystem is react-router. If you’re building a single-page application, use it unless you have a good reason not to.

Don’t use a router if you aren’t building a single-page application. Most projects start out as smaller components inside of a larger application anyway.

Learning Flux

You’ve probably heard of Flux. There’s a ton of misinformation about Flux out there.

A lot of people sit down to build an app and want to define their data model, and they think they need to use Flux to do it. This is the wrong way to adopt Flux. Flux should only be added once many components have already been built.

React components are arranged in a hierarchy. Most of the time, your data model also follows a hierarchy. In these situations Flux doesn’t buy you much. Sometimes, however, your data model is not hierarchical. When your React components start to receive props that feel extraneous, or you have a small number of components starting to get very complex, then you might want to look into Flux.

You’ll know when you need Flux. If you aren’t sure if you need it, you don’t need it.

If you have decided to use Flux, the most popular and well-documented Flux library is Redux. There are a lot of alternatives out there, and you’ll be tempted to evaluate lots of them, but my advice is to just stick with the most popular one.

Learning inline styles

Pre-React, a lot of people reused CSS styles with complicated style sheets built by preprocessors like SASS. Since React makes writing reusable components easy, your stylesheets can be less complicated. Many in the community (including myself) are experimenting with getting rid of stylesheets altogether.

This is a fairly crazy idea for a number of reasons. It makes media queries more difficult, and it's possible that there are performance limitations using this technique. When starting out with React, just style things the way you normally would.

Once you've got a feel for how React works, you can look at alternate techniques. One popular one is BEM. I recommend phasing out your CSS preprocessor, since React gives you a more powerful way to reuse styles (by reusing components) and your JavaScript bundler can generate more efficient stylesheets for you (I gave a talk about this at OSCON). With that said, React, like any other JavaScript library, will work just fine with a CSS preprocessor.

Alternatively, you can also use CSS Modules, more specifically react-css-modules. With CSS Modules you'll still write CSS (or SASS/LESS/Stylus), but you can manage and compose your CSS files like you'd do with inline styles in React. And you don't need to worry about managing your class names using methodologies like BEM, as this will be handled for you under the hood by the module system.

Learning server rendering

Server rendering is often called "universal" or "isomorphic" JS. It means that you can take your React components and render them to static HTML on the server. This improves initial startup performance because the user does not need to wait for JS to download in order to see the initial UI, and React can re-use the server-rendered HTML so it doesn't need to generate it client-side.

You need server rendering if you notice that your initial render is too slow or if you want to improve your search engine ranking. While it's true that Google now indexes client-rendered content, as of January 2016 every time it's been measured it's been shown to negatively affect ranking, potentially because of the performance penalty of client-side rendering.

Server rendering still requires a lot of tooling to get right. Since it transparently supports React components written without server rendering in mind, you should build your app first and worry about server rendering later. You won't need to rewrite all of your components to support it.

Learning Immutable.js

Immutable.js provides a set of data structures that can help to solve certain performance issues when building React apps. It's a great library, and you'll probably use it a lot in your apps moving forward, but it's completely unnecessary until you have an appreciation of the performance implications.

Learning Relay, Falcor etc

These are technologies that help you reduce the number of AJAX requests. They’re still very cutting-edge, so if you don’t have a problem with too many AJAX requests, you don’t need Relay or Falcor.

react-howto's People

Contributors

alkaha avatar bear-foot avatar cartifon avatar catirado avatar d0ruk avatar dmitrijs-balcers avatar ehrudxo avatar ferhatelmas avatar flexbox avatar gaearon avatar hprobotic avatar jaeyeophan avatar joshuacc avatar juliandavidmr avatar jurgob avatar kaijun avatar ledniy avatar luisfmelo avatar mismatch avatar petehouston avatar petehunt avatar stmoreau avatar szymonmichalak avatar tajo avatar theanxy avatar trodrigues avatar viatsko avatar vtambourine avatar webrascal avatar zhangjd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-howto's Issues

Server-side rendering

I wonder a) where server-side rendering fits into this roadmap, and b) if it's worth including as it's own category or as a sub-category somewhere?

p.s. thanks for this!!!

CSS Modules?

Would there be any interest in adding information about CSS Modules to this?

It fixes all (?) of the issues with using inline styles while still allowing people to write CSS the way they used to and also fixing most of the issues that exist with CSS (composition, etc), and allowing them to still use SASS/Stylus if they want.

I can write it up and make a PR for this, but if it goes against the general philosophy of the document then I won't bother.

Clearer instructions on when to use or not use Flux

I looked around and could not find an offical source of recomendations of when to use or not Flux, other than what you mention. Maybe its in a talk and its not indexable ? I think Flux is likelly being used in situations where just bringing plain DTOs from the backend and binding them to a template and render is all that is needed.

I think it would be huge if it was be clearer what are the tradeoffs of Flux and when to use it, what are the gains, Does it make sense to use it in a mostly read only dashboard / monitoring charts application, if the data is only shown at one place?

I suggest if its mentioned in a talk can you link it here so that its easily googleable, if not a brief reply in this issue would be great. Wouldnt dare ask for a blog post as i know you are busy with your startup. Thanks for Flux!

Fix documentation for React.createClass() over ES6 classes

You may see some talk about ES6 classes being the preferred way to create React components. This is untrue. Most people (including Facebook) are using React.createClass().

No where in the official docs did I see React.createClass being preferred over ES6 classes. Did you mean createReactClass, which auto-binds methods but requires you to load another module? I'm curious what the reasoning was for this comment.

turkish translation issues

There are a lot of mistakes on Turkish readme file. Whole doc doesn't make much sense at this point, I can fix those if you would like to

Adding yarn

Adding yarn as a package manager to use instead of npm

Official tutorial changed

Their official tutorial (Comment box tutorial) recently changed to building a game "tic tac toe".
And I find this new version's instructions very difficult to follow comparing to the old one.
Maybe an re-evaluation of this tutorial?
Thanks.

Link content changed

Under the Learning react itself heading it is stated that:

In the official documentation you’ll find a copy-paste HTML template that you can save in an .html file and get started right away.

However, the link in this text is removed. It is redirected to a "hello world" example which unfortunately requires tooling; and this is contradicting with the context.

I think either link or the text needs an update.

Feedback on how to learn React

Saw you tweeting this: https://twitter.com/floydophone/status/684109201665208321 asking for feedback. So I decided to just do that in an issue, just close it if I should contact you somewhere else.

About "Learning React itself": I think the official tutorial is fine. But if you are a 'total newbie', why would you bother them with state in components? Just teach them: send data to a component and you are done. Does this data change? Repeat step 1.

Would like to hear what you think of this. A few weeks ago I teached some 2nd year students the basics of react, I never mentioned state.

icepick or seamless-immutable vs. Immutable.js

I love the idea of what you're doing here. Be careful it doesn't turn into a book ;)

Immutable.js is a great library, but I think icepick is a better fit for most projects. The weight is tiny, your objects all remain inspectable in the dev tools, can be seamlessly passed around to other JS libraries and the performance should be acceptable unless you're working with objects/arrays that have a huge number of keys (in which case Immutable.js is the right choice).

Loading remote data

Love the guide. Wish I had this when I was getting started.

I would suggest adding something about different options for loading data from the server. I have found that a lot of guides punt on this because React and most of libraries in the ecosystem are a client-side technologies so loading remote data is (kind of) out of scope, but then it is the one of the first challenges people run into when building real world applications. I find that people either end up doing AJAX directly in the component as suggested in Load Initial Data via AJAX, which works on a small scale, but doesn't really scale and can start to get messy, or they end up diving into the deep end with Flux and try doing data loading there, which multiplies the challenges for a beginner. Even the first response to your tweet hit on this as well.

At the risk of tooting my own horn, I ran into a lot of these same problem myself and ended up releasing React Refetch as an alternative. A lot of people have found it helpful for applications just need to load data without diving head first into Flux, and I think it could be helpful for beginners. Of course this is not the only way to do it, and I'd like to see your guide mention a few different alternatives for dealing with remote data.

link to "the official tutorial" for React is dead on README.md

The link for step one, "the official tutorial", is dead.

It results in a 404:

Request URL: https://facebook.github.io/react/docs/tutorial.html Request Method: GET Status Code: 307 Internal Redirect (from disk cache) => Request URL: http://react.dev/docs/tutorial.html Request Method: GET Status Code: 404 Internal Redirect => Request URL: https://react.dev/docs/tutorial.html Request Method: GET Status Code: 404 Not Found

Seemingly, the current starting point is here, where the introduction involves a bit of js and html describing components. How does this below compare to the original intro?

Creating and nesting components

React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

React components are JavaScript functions that return markup:

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

Now that you’ve declared MyButton, you can nest it into another component:

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Rename this repository?

I absolutely love the content, but I think the name “roadmap” is misleading. I expected information on upcoming versions of React. How about “React study guide”?

React-stamp

What are your thoughts on pure componets and eric elliott's react-stamp library, and his advice to not use es6 classes with react. He calls it "class free react"

Inactivity issue

Is there no activity since 2k17 ???
The material is awesome , so I think it should be extended and worked upon according to present day popularity of react

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.