The 2018 React Developer Roadmap

The React JS or only React is ane of the leading JavaScript libraries for developing front-end or GUI of spider web applications. Backed yesteryear Facebook, React JS, also known every bit precisely React is has grown yesteryear leaps together with bounds inward recent years together with became the de-facto library for component-based GUI development. Though at that spot are other front-end frameworks similar Angular together with Vue.js available, what sets React apart from others is perhaps the fact that it precisely focuses on component-based GUI evolution together with doesn't invade on other areas.

For example, Angular is a consummate framework together with gives yous a lot of features out-of-the-box, such every bit a Dependency Injection, Routing system, Forms handling, HTTP requests, Animations, i18n support, together with a potent module organization amongst slow lazy-loading.

So, if yous already induce got libraries to exercise those materials or yous mightiness non demand them altogether than React is a nifty choice, but learning React is non so easy, peculiarly if yous are starting every bit fresh inward spider web development.

When I started learning React JS this year, I induce got some background inward spider web development, used HTML, CSS, together with JavaScript before together with knows a thing or ii virtually front-end development, but I also combat a lot to larn React JS. In fact, I am withal learning it.

When I was doing some question virtually the correct means to larn React JS, I come upward across this fantabulous React Developer RoadMap which outlines what is mandatory, what is skillful to know together with what are some extra materials yous tin give the sack larn every bit React developer.

This React Developer RoadMap is built yesteryear adam-golab and it outlines the paths that yous tin give the sack accept together with the libraries that yous would desire to larn to boot the bucket a React developer.

So, if yous are wondering What should yous larn side yesteryear side every bit a React developer? so this roadmap tin give the sack assist you.

Similar to the DevOps RoadMap I induce got shared earlier, this React JS roadmap is also nifty on exploring the React together with yous tin give the sack move this to boot the bucket a improve React developer.

But, if yous are wondering where to larn those mandatory skills, so don't worry, I induce got also shared some online courses, both gratis together with paid, which yous tin give the sack accept to larn those skills.

Anyway, hither is the React Developer RoadMap I am talking about:

image source: https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap.png

Now, let’s boot the bucket through the RoadMap measuring yesteryear measuring together with uncovering out how yous tin give the sack larn the essential skills to boot the bucket a React Developer inward 2018:

1.Basics

No matter, which framework or library yous larn for spider web development, yous must know basics together with when I tell basics, I hateful HTML, CSS, together with JavaScript, these 3 are 3 pillars of spider web development.

HTML
It is ane of the showtime pillar together with the most of import science for spider web developers every bit it provides the construction for a spider web page. If yous desire to larn HTML so yous tin give the sack cheque out my listing of free HTML courses.

CSS
It is the minute pillar of spider web evolution together with used to trend spider web pages so that they expect good. If yous desire to larn CSS so yous tin give the sack uncovering a couplet of gratis CSS courses on my listing of free spider web evolution courses.

JavaScript
This is the 3rd pillar of spider web evolution together with used to brand your spider web pages interactive. It is also the argue behind React framework, thence yous should know JavaScript together with know it good before attempting to larn React JS. To start amongst yous tin give the sack accept a expect at my listing of free JavaScript courses.

Btw, instead of learning these technologies individually, it's improve to bring together a consummate spider web evolution course of written report similar The Web Developer Bootcamp yesteryear Colt Steele which volition instruct yous all the essential skills yous demand to boot the bucket a spider web developer.

2. General Development Skills

It doesn't thing whether yous are a frontend developer or a backend developer, or fifty-fifty a full-stack software engineer. You must know some full general evolution skills to endure inward the programming world, together with hither is a listing of some of them

2.1 Learn GIT
You must absolutely know Git inward 2018. Try creating a few repositories on GitHub, part your code amongst other people, together with larn how to download code from Github on your favorite IDE. If yous desire to larn so Git Complete: The definitive, step-by-step guide to Git is a nifty course.

If yous demand to a greater extent than choices together with don't heed learning from gratis resources so yous tin give the sack also explore my listing of free courses to larn Git.

2.2 Know HTTP(S) protocol
If yous desire to boot the bucket a spider web developer so it's an absolute must to know HTTP together with know it well. I am non asking yous to read the specification but yous should at to the lowest degree live familiar amongst mutual HTTP asking methods similar the GET, POST, PUT, PATCH, DELETE, OPTIONS together with how HTTP/HTTPS plant inward general.

2.3. Learn the terminal
Though it's non mandatory for a frontend developer to larn Linux or terminal, I strongly propose yous acquire familiar amongst terminal, configure your crunch (bash, zsh, csh) etc. If yous desire to larn finally together with bash so I propose yous accept a expect at this Shell Scripting course on Udemy.

If yous demand to a greater extent than choices, yous tin give the sack also explore my listing of free Linux courses for developers.

2.4. Algorithms together with Data Structure
Well, this is over again ane of the full general programming science which is non necessarily needed for becoming a React developer but absolutely needed to boot the bucket a programmer inward the showtime place.

To larn Data Structure together with Algorithms yous either rad a few books or bring together a skillful course of written report similar

If yous demand to a greater extent than choices, yous tin give the sack also cheque my listing of free Data Structure together with Algorithms courses.

And if yous dearest books to a greater extent than than courses, hither is a listing of 10 algorithms books every developer should read.

2.5. Learn Design Patterns
Just similar Algorithms together with Data Structure, it's non imperative to larn pattern patterns to boot the bucket a React Developer but yous volition exercise a basis of skillful to yourself yesteryear learning it. Design patterns are tried together with tested solutions of mutual occupation hap inward software development.

Knowing them volition assist yous to uncovering a solution which tin give the sack withstand the bear witness of time. You tin give the sack read a few books virtually pattern patterns to larn them or bring together a comprehensive course of written report similar my listing of OOP together with Design pattern courses to acquire to a greater extent than ideas.

3. Learn React

Now, this is the chief deal. yous got to larn React together with larn it good to boot the bucket a React developer. The best house to larn React is the official website but every bit a beginner, it tin give the sack live a trivial chip overwhelming for you.

That's why I propose yous enroll inward a couplet of courses similar Max's React MasterClass or Stephen Grider's React together with Redux to larn to React well. Those ii are my favorite React courses together with also trusted yesteryear thousands of spider web developers.

If yous are serious virtually your React skills I strongly propose yous expect at these courses.

And, if yous don't heed learning from gratis resources, so yous tin give the sack also accept a expect at this listing of gratis React JS courses.

4. Learn Build Tools

If yous desire to boot the bucket a professional person React developer so yous should pass some fourth dimension to acquire familiar amongst tools that yous volition live using every bit a spider web developer similar built tools, unit of measurement testing tools, debugging tools etc.

To start amongst hither are some of the construct tools mentioned inward this roadmap:

Package Managers

npm
yarn
pnpm
Task Runners
npm scripts
gulp
Webpack
Rollup
Parcel

Btw, It's non of import to larn all these tools, precisely learning npm and webpack should live plenty for beginners. Once yous induce got to a greater extent than agreement of spider web evolution together with React Ecosystem yous tin give the sack explore other tools.

5. Styling

If yous are aiming to boot the bucket a front-end developer similar React developer so knowing a chip of Styling volition non hurt. Even though the RoadMap mentions a lot of materials similar CSS Preprocessors, CSS Frameworks, CSS Architecture together with CSS inward JS.

I propose yous to at to the lowest degree larn Bootstrap, the unmarried most of import CSS framework yous volition cease upward using every right away together with then.

And, if yous desire to larn bootstrap, If yous desire to boot the bucket ane measuring ahead, yous tin give the sack also larn Materialize or Material UI.

6. State Management

This is some other of import expanse for a React developer to focus upon. The roadmap shout the next concepts together with frameworks to master:

Component State/Context API
Redux
Async actions (Side Effects)
Redux Thunk
Redux Better Promise
Redux Saga
Redux Observable
Helpers
Rematch
Reselect
Data persistence
Redux Persist
Redux Phoenix
Redux Form
MobX

If this sounds besides much to you, I propose yous to precisely focus on Redux, it's nifty together with at that spot is a nifty course of written report from Stephen Grider to larn Redux framework well.

Both Max's React 16- The Complete Guide and Stephen Grider's Modern React amongst Redux courses also covers State Management inward React together with Redux inward skillful detail.

7. Type Checkers

Since JavaScript is non a strongly typed language, yous don't induce got the luxury of a compiler to choose handle of those sneaky type related bug.

As your app grows, yous tin give the sack choose handle of a lot of bugs amongst type checking, peculiarly if yous tin give the sack move JavaScript extensions similar Flow or TypeScript to type cheque your whole application.

But fifty-fifty if yous don’t move those, React has some built-in type checking abilities together with learning them tin give the sack assist yous to choose handle of bugs early.

Since Angular also uses TypeScript, I intend it's worth to larn TypeScript along amongst JavaScript, together with if yous also intend so so yous tin give the sack cheque out the Ultimate TypeScript course of written report on Udemy.

And, If yous demand to a greater extent than choices, together with don't heed learning from gratis resources so yous tin give the sack also cheque out my listing of free TypeScript courses for spider web developers.

8. Form Helpers
Apart from Type Checkers, it's also skillful to larn Form Helps similar Redux Form, which provides the best means to deal your cast terra firma inward Redux. Apart from Redux Form, yous tin give the sack also accept a expect at Formik, Formsy, together with Final form.

9. Routing
Components are the pump of React's powerful, declarative programming model, together with Routing components are an of import business office of whatever application.

React Router provides a collection of navigational components that compose declaratively amongst your application.

Whether yous desire to induce got bookmarkable URLs for your spider web app or a composable means to navigate inward React Native, React Router plant wherever React is rendering.

Apart from React-Router, yous tin give the sack also accept a expect at Router 5, Redux-First Router together with React Router.

Both Max's React xvi - The Complete Guide together with Stephen Grider's Modern React amongst Redux courses also covers React Router inward skillful detail.

10. API Clients

In today's world, yous volition rarely construct an isolated GUI, instead, at that spot is to a greater extent than jeopardy that yous volition construct something which communicates amongst other application using APIs similar REST together with GraphQL. Thankfully, at that spot are many API clients available for React developers, hither is a listing of them:

REST

Fetch
SuperAgent
axios

GraphQL

Apollo
Relay
urql

Apollo Client is my favorite together with provides an slow means to move GraphQL to construct customer applications. The customer is designed to assist yous chop-chop construct a UI that fetches information amongst GraphQL together with tin give the sack live used amongst whatever JavaScript front-end

Btw, if yous don't know GraphQL together with REST, I propose yous to pass some fourth dimension learning them. If yous demand courses, the next are my recommendations:

11. Utility Libraries

These are the libraries which brand your piece of work easier. There are many utility libraries available for React developers every bit shown below:

Lodash
Moment
classnames
Numeral
RxJS
Ramda

I don't propose yous larn all these together with so does RoadMap. If yous expect closely solely Lodash, Moment, together with Classnames are drawn inward yellow, stating that yous should start amongst them.

12. Testing
Now, this is ane of the of import science for React Developers which is frequently overlooked, but if yous desire to remain ahead from your contest so yous should focus on learning libraries which volition assist yous inward testing. Here also, yous induce got libraries for Unit testing, Integration testing, together with end-to-end testing.

Here is a listing of libraries mentioned inward the roadmap:
Unit Testing

Jest
Enzyme
Sinon
Mocha
Chai
AVA
Tape

End to End Testing

Selenium, Webdriver
Cypress
Puppeteer
Cucumber.js
Nightwatch.js

Integration Testing

Karma

You tin give the sack larn the library yous desire but Jest together with Enzyme are recommended. The Complete React Web Developer Course (with Redux) also covers Testing React application roofing both Jest together with Enzyme.

13. Internationalization
This is some other of import theme for developing front-end which is used worldwide. You may demand to back upward the local GUI version for Japan, China, Spain, together with other Europian countries.

The RoadMap propose yous larn the next applied scientific discipline but they are all nether skillful to know:

React Intl
React i18next

Both these library provides React components together with an API to format dates, numbers, together with strings, including pluralization together with treatment translations.

14. Server-Side Rendering
You mightiness live thinking what is the deviation betwixt Server-Side Rendering together with Client Side rendering, let's clear that before talking virtually the library which supports Server Side Rendering amongst React.

Well, In Client-side rendering, your browser downloads a minimal HTML page. It so renders the JavaScript together with fills the content into it.

While inward the instance of Server-side rendering, React components are rendered on the server together with output HTML content is delivered to the customer or browser.

The RoadMap recommends next Server-Side Rendering:

Next.js
After.js
Rogue

But, I propose learning precisely Next.js should live enough, together with Thankfully, Max's React xvi - The Complete Guide also covers Next.js basics which should live skillful plenty to start with.

15. Static Site Generator
The Gatsby.js is a modern static site generator. You tin give the sack move Gatsby to exercise personalized, logged-in experiences website. They combine your information amongst JavaScript together with exercise wellformed HTML content.

16. Backend Framework Integration
React on Rails integrates Rails amongst (server rendering of) Facebook's React front-end framework. It provides Server rendering, frequently used for SEO crawler indexing together with UX surgical procedure together with non offered yesteryear rails/webpacker.

17. Mobile
This is some other expanse where learning React tin give the sack actually beneficial every bit React Native is chop-chop becoming the touchstone means to educate mobile application inward JavaScript amongst native expect together with feel.

The RoadMap suggests yous larn next libraries:

React Native
Cordova/PhoneGap

But, I think, precisely learning React Native is skillful enough.

Thankfully, at that spot are some skillful courses to larn React Native are also available similar Stephen Grider's The Complete React Native together with Redux Course which volition instruct yous how to construct total React Native mobile apps ridiculously fast!

18. Desktop
There also exists some React based framework to construct desktop GUI similar React Native Windows which allows yous to construct native UWP together with WPF apps amongst React.

The Framework suggests the next libraries:

Proton Native
Electron
React Native Windows

But, they all are for advanced exploring. If yous already mastered React, yous tin give the sack accept a expect at them.

19. Virtual Reality
If yous are interested inward edifice Virtual Reality based application so also yous induce got some framework similar React 360, which allows yous to exciting 360 together with VR experiences using React. If yous are interested inward that area, yous tin give the sack farther explore React 360.

That's all virtually The 2018 React RoadMap. It's indeed rattling comprehensive together with at that spot is skillful jeopardy that yous won't larn all of these inward the remaining 2018, but don't worry, all the technologies are withal valid for 2019 together with yous tin give the sack effectively move this every bit 2018 React RoadMap.

Other Programming Articles you may like
10 Reasons to Learn Python inward 2018
10 Programming languages You tin give the sack Learn inward 2018
10 Tools Every Java Developer Should Know
10 Reasons to Learn Java Programming languages
10 Frameworks Java together with Web Developer should larn inward 2018
10 Tips to boot the bucket a improve Java Developer inward 2018
Top five Java Frameworks to Learn inward 2018
10 Testing Libraries Every Java Developer Should Know

The 2018 DevOps RoadMap for Senior Developers

Closing Notes

Thanks for reading this article so far … Good luck amongst your React JS journey! It’s sure as shooting non going to live easy, but yesteryear next this roadmap together with guide, yous are ane measuring closer to becoming the React Developer yous ever wanted to be.

Please reckon entering subscribing to this weblog if you’d similar to live notified for every novel post, together with don’t forget to follow javarevisited on Twitter!

All the best for your React Journey !!

P.S. - If yous don't heed learning from gratis resources so yous tin give the sack also cheque out my listing of Free React courses to start your journey.

Cari Blog Ini

Get To Know Java