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:
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):
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.
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)
React hasn’t official CLI and it almost not needed. All useful scripts already exposed to package.json.
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)
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:
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:
rendermethod, 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.
propsfor that purpose, that’s an object which contains all inputs for a component, they’re not separate as in Angular.
propsshould not be mutated, component has
statefor that purpose (which should be mutated through
setState, not directly)
propsof 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.
reffor that, but it should be avoided if possible in favor of
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.
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.
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).
There’s no modules. See “What about project structure?”
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.
react-router has an article for that: https://reacttraining.com/react-router/web/guides/code-splitting.
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.
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.
You can get it by using
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.
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.
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 :)
☞ React for beginners tutorial
☞ 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 Tutorial - Learn Angular from Scratch
☞ Getting Closure on React Hooks
☞ Test Driven Development with Angular