“Thinking in ReactJS" if I have a AngularJS background? [closed]
Directives
If you're familiar with Angular, then the way to think about how React works is by imagining using Angular using only directives. React doesn't have any concept of controllers, services, factories or dependency injection. If focuses only on components (directives in Angular terms).
This is also the way that Angular is headed with Angular 2. Angular 2 introduces a concept called components, and removes the notion of directives, controllers and services/factories. Angular 2 still uses DI, but you're not tying your classes to the Angular world (which you do in Angular 1).
Scopes
So Angular uses scopes for data binding, and any template tied to a scope (or a parent scope) can read and print out data from that scope, and even modify that scope. There's no concept of a scope in React, mostly because React doesn't do dirty-checking like Angular, but also because React uses regular Javascript scoping to determine what variables/objects are available to the view. More on that later.
Templating
This is an important difference. In Angular you define your templates in either a different file, or as a Javascript string. In React, you define your view in Javascript or JSX. JSX is an XML/HTML like language extension to Javascript which lets you describe HTML (or native views, like in React Native).
In JSX, you can set property values on elements either as strings like <div className="myClass"> or with a Javascript expression, like this: <div className={myClassVariable}> where myClassVariable is a regular Javascript variable. Anything between { and } in JSX is just plain old Javascript. You can pass an object, a function, a string, etc. And your linter can help you when you try to use an undefined variable in JSX, which is something your linter can't do when you use attributes in Angular templates.
By defining your views in JSX instead of HTML strings, you have the full power of Javascript at your disposal. You don't need something like an Angular scope, because you already have a Javascript scope which determines what you can use in your view. This is the reason that getting good at Angular just makes you good at Angular, whereas getting good at React also makes you a better Javascript programmer.
Data binding/mutation/state
Angular uses scopes to define application state. That scope can be mutated either from a view, a controller or a directive. Scopes inherit from each other, so if you get access to a scope, you can also modify the parent scope. This is one of the reasons that big Angular applications tend to get difficult to manage, because the state of the application can be changed from a lot of places. And watches on those changes which triggers other changes makes it even harder to grasp.
React uses two concepts called props and state. Think of them like regular Javascript functions. State are variables defined in a function, and props are the arguments that are passed to functions.
Variables defined in a function can be changed in that function and they can be passed to other functions as arguments.
But arguments passed to a function should never be changed in the function that received them. They can make a local variable and assign its value to the arguments value and change that local variable. But it should never change the argument directly.
So props are values passed to a component from a parent component. The component receiving props doesn't own them, and don't know where they came from, much like arguments to a function. State on the other hand is owned by the component, and the component can change it in any way it wants much like the local variables.
React knows when state and props of a component change since you have to explicitly call setState when you want to change the state of a component. It knows when props change because you pass props to a component when the parent component renders.
When the state is changed, React re-renders the component (and all of its child components). Note that it only re-renders them to a virtual representation of the components. It then performs a diff on what has changed since the last render, and only the actual changes are applied to the DOM. This is essentially the secret sauce of React. The programming model is to re-render everything everytime something happens, but only doing the minimal amount of work needed.
Where are my controllers!?
Like I said, React doesn't have any concept of a controller, it only focus on components. That said, you often still use a controller/view separation when you use React. You have components (sometimes called view controllers) that handle data fetching and state management, but do very little rendering. Instead, you have a separate component that knows very little about data fetching and a lot about rendering. So the view controller component knows how to fetch data, and it then passes that data on the component that knows how to render it. A simple example is something like this:
var TodoItemsComponent = React.createClass({ getInitialState: function () { return { todoItems: null } }, componentDidMount: function () { var self = this; TodoStore.getAll().then(function (todoItems) { self.setState({todoItems: todoItems}); }); TodoStore.onChange(function (todoItems) { self.setState({todoItems: todoItems}); }); }, render: function () { if (this.state.todoItems) { return <TodoListComponent todoItems={this.state.todoItems} />; } else { return <Spinner />; } }});var TodoListComponent = React.createClass({ render: function () { return ( <ul> {this.props.todoItems.map(function (todo) { return <li>{todo.text}</li>; })} </ul> ); }});In this example, there's two components. One which is only concerned about data fetching, and one which is only concerned about rendering. They're both React components, but they have very different responsibilities. This is the separation that controllers and directives have in Angular, but React doesn't force you into it.
Data binding
Angular uses data binding to keep the view in sync with the view model. React doesn't use data binding at all. You could say that Angular monitors the view model for changes and updates the DOM accordingly, whereas React monitors the JSX you return from your components for changes, and updates the DOM accordingly.
Separation of concerns
A lot of people are skeptical of React because they feel that React doesn't separate concerns in a good way. And JSX is often the target of that argument. They feel like putting markup in your Javascript is mixing concerns about the view and the behaviour. If your used to Angular, you probably don't agree that describing behaviour in your markup is a bad idea (since you do that in Angular as well). An often touted counter argument is that React "separates concerns, not technologies" in that the view (markup) and the behaviour of it are not separate concerns but just traditionally separate technologies (HTML and Javascript). By co-locating the behaviour and the markup, you get quite a few benefits:
- It's easy to see if you have unused variables or functions. With Angular, you have to look in the template for expressions, and hunt down all places that have access to that scope to see if there are variables or functions on the scope that aren't used.
- A component becomes isolated to one file, and you don't have to switch back and forth between a Javascript file and a template file.
- A change to the behaviour often requires a change to the markup, and vice versa. So keeping it inside one file makes it easier to see what changes are needed.
This turned out to be a wall-of-text, so please let me know if there's something I should clarify or expand upon.
ReactJS is all about (reusable) components, which imo can best be compared to Angular's directives.
So I would say, imagine creating an app in AngularJS with only directives :)
I started developing in ReactJS a few weeks ago and at first it was strange (writing template code in your JS, wtf?), but now I got used to it. I recently also started playing with React-Native and it is awesome!
I could list a lot of differences between Angular and React here now, but there are some nice articles written by others on that already, so I recommend you to read those to get a clearer idea.
and then there is also awesome-react, a compilation of react libraries, resources, tutorials, articles (you name it, it's there)
Related to your question, this section is probably the most interesting for you:
More articles on the approach of ReactJS and comparisons with other frameworks