Quick introduction to React for Angular developers

Main difference between Angular 2 and React lies in the fact that Angular 2 is a framework, but React is an UI library. I.e. to build common application with React you will need to use other libraries, which will provide:

routing (react-router)
state management (Redux, MobX … but you can go without state manager (not really recommended). Yes, in Angular it’s not built-in too, you can use great @ngrx or just services)
form validation (react-validation, formsy-react, redux-form)
animations
HTTP abstraction (or just use fetch)
i18n

Angular 2+ provides (but doesn’t require) most of them right from the box and has a way, official examples and style guides on how to use all that. Angular’s conception is more monolithic and SPA-related, React itself is small and fast and can be used not only for SPA but to “animate” only parts of classic server-side-rendered application (PHP/Ruby/Python-based or others), near as old AngularJS. So they even can be used together.

On all that I have next opinion atm (I’m a fan (but not fanatic) of Angular):

if you need to build a big, well-structured, enterprise-level SPA — Angular 2+ is a good choice
if you need to build something small, or something fast-loaded (if bundle size is too critical for you), or your app is not a SPA — then you better check React/Preact/VueJS (last one is possibly best these days tbh)

After I tried React, I now see why it’s so popular and that’s not only because of “Facebook use it” — reason is in its initial simplicity. That’s like “modern jQuery” of our days (there’s nothing mocking in these words, vice versa), you can learn it pretty quick if you’re good JavaScript developer (and if “not good” too so that could become an issue in future tbh, barrier to entry is too low).

Where to start?

I really recommend to start from official documentation and Docs section in it, it’s not so big, you can get it all in one day. Documentation is very good and straightforward, also it mentions all core concepts and good practices as “pure components” and “single source of truth” which should be embraced and followed during development to have “bugs-free” (haha), “easily testable” and “simple-to-understand” app.

What about TypeScript? / Quick start

As good Angular 2+ developer you’ll want to use TypeScript with React as well. Here’s very good description on that https://github.com/Microsoft/TypeScript-React-Starter which uses official React boilerplate (called create-react-app)

What about CLI/scaffolding?

React hasn’t official CLI and it almost not needed. All useful scripts already exposed to package.json.

What about project structure?

React docs doesn’t contain that info, because it’s a library, don’t you forget? :) As I found, next structure mostly used (inside src folder):

actions — your Redux actions (if you use it)
components — your components (mostly pure)
containers — your high-level components like pages/screens
reducers — your Redux reducers (if you use it)
store/stores — your Redux store definition or MobX stores (if you use them)
styles — your styles for whole app (using Webpack imports)

But it’s not strict. You can use components folder without containers and nest your components and subcomponents respectively in subfolders as kind of modules in Angular world. Good examples:

What about components?

If you read official documentation, you should know much about it already. Components in React are just (ideally “pure”) functions which getting data as params and returning HTML/UI as a result. Here we have next analogues with Angular:

selector—React component’s class name is your selector. Should start with capital letter. Interesting thing that you will not find that “custom tag” in final DOM as in usual Angular app, because components just a functions which render stuff with render method, they don’t create additional DOM nodes. Could be very handy if you have “ready-to-go” template, because it will not break layout with component tags.
@Input() — React component has props for that purpose, that’s an object which contains all inputs for a component, they’re not separate as in Angular. props should not be mutated, component has state for that purpose (which should be mutated through setState, not directly)
@Output()—React hasn’t that concept separately, you should pass your parent callback into props of your child component and call it explicitly inside child component. Still looks a bit sic to me and not kinda in accordance with my understanding of SOLID.
EventEmitter—not used, see above
@ViewChild—React has special keyword ref for that, but it should be avoided if possible in favor of props.
ngOnInit and other hooks—https://reactjs.org/docs/react-component.html#the-component-lifecycle

What about templates?

React uses JSX — own syntax extension to JavaScript, layout lives together with your code and mixed with it tight in one file. Initially it may look very messy, but if you do it right you will see that it shines. IDE nicely helps with it. Because we’re using TypeScript, files will have .tsx extension.

What about SCSS/styles?

Official React create-react-app boilerplate goes without built-in support for SASS/SCSS or other preprocessors, but they have documentation how to set it up without ejecting Webpack config (or you can setup your IDE to build it with watcher, but that’s not 100% bulletproof when building). You still will need to import your CSS files with import as any other files inside you component, webpack will take care for they properly included. If you want to import SCSS files directly without those “crutches”, you’ll need to eject your Webpack config and add proper rules into it.

No documentation on where it should be placed, I think better to keep component-related styles near components.

UPD: check https://www.styled-components.com/ library which uses tagged templates ES2015 syntax which allows to use classic CSS syntax to write your styles and prevents unnecessary styles intersection in different components as in Angular.

What about routing?

You’ll need to use react-router— most popular one. You will be stunned by its simplicity and declarative nature, because you define routes as components (as almost all in React) right in your layout. Even redirects done by showing/rendering <Redirect …/> component in your layout in proper moment of time.

UPD: Router5 may provide better, more-structured way to organize whole routing and solve problem with links building consistency as well.

What about services?

You can use pure ES6 classes for that, BUT I would really recommend to use MobX as base for services and you’re getting state manager in the same time as well — BOOM! With MobX you will be able to write Angular-like services, called stores here, with own kind of observables which brings reactive features into React rendering and not only rendering… Just remember to mutate state only with “actions” to stay clean. Good example of the service written using MobX is here (you don’t need to use $req stuff from there). Also check here on inject, so you don’t need to pass stores through props all down the hierarchy till components where you need them, but mind: passing data through props (data, not stores) is still preferred way to pass data to sub-components.

MobX is written on TypeScript which is a plus for us and using great power of decorators to significantly reduce boilerplate code (in comparison to Redux).

What about modules?

There’s no modules. See “What about project structure?”

What about state management?

I think you heard about Redux already and you will be familiar with it if used @ngrx/store, but I still recommend to use MobX as I stated above, it’s really cool and Angularish!

UPD: these days more people look in a way of GraphQL which may replace whole Redux for your app. Check those links and official docs on local state management. Also I discovered MobX-based mobx-state-tree which could be used as well. So, stay open-minded, Redux is not a silver bullet.

What about lazy-loading/code splitting?

react-router has an article for that: https://reacttraining.com/react-router/web/guides/code-splitting.

What about DI?

React doesn’t use DI by default and there’s no need for it mostly. MobX has providers mechanism which can be used as DI for almost any class/object.

When you need to unit-test component with child components/sub-components you can use Enzyme with its “Shallow Rendering API” so there will be no need to mock sub-components where DI usually used in other paradigms, and if you follow good practices on pure components, testing should not be an issue.

What about Unit-tests?

Jest is used widely there (with built-in Jasmine), together with Enzyme and all that performs well.

If you’ll struggle with “how can I test component which uses async data retrieval in componentDidMount or async setState” and crashing Jest — check my answer on StackOverflow, that’s really tricky issue.

What about webpack config?

You can get it by using yarn eject.

What about environment configs?

You can find about that here, there’s no easy export of environment config right from the box, you’ll need to do that manually or use those ENV variables “as is” in plain way.

What about i18n/Internationalization?

That’s still open question for me, there are many libs for that. Best I can find, which is close to widely used @ngx-translate, is that one https://github.com/i18next/react-i18next.

That’s it for now

I can say after Angular you will find that React is a “walk in the park”, it’s easier to learn and that’s why it’s so popular. It has lack of “official” conception for building actual apps in comparison to Angular and that has cons and pros in the same moment.

If I missed something important or was wrong in some details — write in comments.Thanks and happy coding :)

Recommended Courses:

☞ React for beginners tutorial

☞ React Native Projects

☞ The Complete Web Development Tutorial Using React and Redux

☞ Learn Angular 2 from Beginner to Advanced

☞ Angular 2 Firebase - Build a Web App with Typescript

☞ Angular 2 Demystified

Suggest:

☞ Angular Tutorial - Learn Angular from Scratch

☞ JavaScript for React Developers | Mosh

☞ Getting Closure on React Hooks

☞ Web Development Tutorial - JavaScript, HTML, CSS

☞ Test Driven Development with Angular

☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch