The 2018 React Developer Roadmap

The React JS or only React is i of the leading JavaScript libraries for developing front-end or GUI of spider web applications. Backed past times Facebook, React JS, also known equally exactly React is has grown past times leaps together with bounds inwards recent years together with became the de-facto library for component-based GUI development. Though in that location are other front-end frameworks similar Angular together with Vue.js available, what sets React apart from others is mayhap the fact that it exactly focuses on component-based GUI evolution together with doesn't invade on other areas.

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

So, if you lot already withdraw keep libraries to practise those materials or you lot powerfulness non demand them altogether than React is a smashing choice, but learning React is non so easy, peculiarly if you lot are starting equally fresh inwards spider web development.

When I started learning React JS this year, I withdraw keep some background inwards spider web development, used HTML, CSS, together with JavaScript before together with knows a thing or 2 almost front-end development, but I also fighting a lot to acquire React JS. In fact, I am nonetheless learning it.

When I was doing some query almost the correct means to acquire React JS, I come upwards across this fantabulous React Developer RoadMap which outlines what is mandatory, what is adept to know together with what are some extra materials you lot tin dismiss acquire equally React developer.

This React Developer RoadMap is built past times adam-golab and it outlines the paths that you lot tin dismiss withdraw keep together with the libraries that you lot would desire to acquire to acquire a React developer.

So, if you lot are wondering What should you lot acquire adjacent equally a React developer? together with so this roadmap tin dismiss aid you.

Similar to the DevOps RoadMap I withdraw keep shared earlier, this React JS roadmap is also smashing on exploring the React together with you lot tin dismiss purpose this to acquire a improve React developer.

But, if you lot are wondering where to acquire those mandatory skills, together with so don't worry, I withdraw keep also shared some online courses, both complimentary together with paid, which you lot tin dismiss withdraw keep to acquire 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 popular off through the RoadMap measurement past times measurement together with uncovering out how you lot tin dismiss acquire the essential skills to acquire a React Developer inwards 2018:

1.Basics

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

HTML
It is i of the outset pillar together with the most of import science for spider web developers equally it provides the construction for a spider web page. If you lot desire to acquire HTML together with so you lot tin dismiss 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 await good. If you lot desire to acquire CSS together with so you lot tin dismiss uncovering a yoke of complimentary 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, thus you lot should know JavaScript together with know it good before attempting to acquire React JS. To start amongst you lot tin dismiss withdraw keep a await 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 class similar The Web Developer Bootcamp past times Colt Steele which volition learn you lot all the essential skills you lot demand to acquire a spider web developer.

2. General Development Skills

It doesn't affair whether you lot 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 hold out inwards the programming world, together with hither is a listing of some of them

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

If you lot demand to a greater extent than choices together with don't heed learning from complimentary resources together with so you lot tin dismiss also explore my listing of free courses to acquire Git.

2.2 Know HTTP(S) protocol
If you lot desire to acquire a spider web developer together with so it's an absolute must to know HTTP together with know it well. I am non asking you lot to read the specification but you lot 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 industrial plant inwards general.

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

If you lot demand to a greater extent than choices, you lot tin dismiss also explore my listing of free Linux courses for developers.

2.4. Algorithms together with Data Structure
Well, this is i time to a greater extent than i of the full general programming science which is non necessarily needed for becoming a React developer but absolutely needed to acquire a programmer inwards the outset place.

To acquire Data Structure together with Algorithms you lot either rad a few books or bring together a adept class similar

If you lot demand to a greater extent than choices, you lot tin dismiss also cheque my listing of free Data Structure together with Algorithms courses.

And if you lot honey 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 acquire blueprint patterns to acquire a React Developer but you lot volition practise a Earth of adept to yourself past times learning it. Design patterns are tried together with tested solutions of mutual employment occur inwards software development.

Knowing them volition aid you lot to uncovering a solution which tin dismiss withstand the essay of time. You tin dismiss read a few books almost blueprint patterns to acquire them or bring together a comprehensive class 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 primary deal. you lot got to acquire React together with acquire it good to acquire a React developer. The best house to acquire React is the official website but equally a beginner, it tin dismiss live a footling chip overwhelming for you.

That's why I propose you lot enroll inwards a yoke of courses similar Max's React MasterClass or Stephen Grider's React together with Redux to acquire to React well. Those 2 are my favorite React courses together with also trusted past times thousands of spider web developers.

If you lot are serious almost your React skills I strongly propose you lot await at these courses.

And, if you lot don't heed learning from complimentary resources, together with so you lot tin dismiss also withdraw keep a await at this listing of complimentary React JS courses.

4. Learn Build Tools

If you lot desire to acquire a professional person React developer together with so you lot should pass some fourth dimension to acquire familiar amongst tools that you lot volition live using equally 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 inwards this roadmap:

Package Managers

npm
yarn
pnpm
Task Runners
npm scripts
gulp
Webpack
Rollup
Parcel

Btw, It's non of import to acquire all these tools, exactly learning npm and webpack should live plenty for beginners. Once you lot withdraw keep to a greater extent than agreement of spider web evolution together with React Ecosystem you lot tin dismiss explore other tools.

5. Styling

If you lot are aiming to acquire a front-end developer similar React developer together with 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 inwards JS.

I propose you lot to at to the lowest degree acquire Bootstrap, the unmarried most of import CSS framework you lot volition halt upwards using every straightaway together with then.

And, if you lot desire to acquire bootstrap, If you lot desire to popular off i measurement ahead, you lot tin dismiss also acquire Materialize or Material UI.

6. State Management

This is some other of import expanse for a React developer to focus upon. The roadmap advert 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 likewise much to you, I propose you lot to exactly focus on Redux, it's smashing together with in that location is a smashing class from Stephen Grider to acquire Redux framework well.

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

7. Type Checkers

Since JavaScript is non a strongly typed language, you lot don't withdraw keep the luxury of a compiler to select handgrip of those sneaky type related bug.

As your app grows, you lot tin dismiss select handgrip of a lot of bugs amongst type checking, peculiarly if you lot tin dismiss purpose JavaScript extensions similar Flow or TypeScript to type cheque your whole application.

But fifty-fifty if you lot don’t purpose those, React has some built-in type checking abilities together with learning them tin dismiss aid you lot to select handgrip of bugs early.

Since Angular also uses TypeScript, I intend it's worth to acquire TypeScript along amongst JavaScript, together with if you lot also intend so together with so you lot tin dismiss cheque out the Ultimate TypeScript class on Udemy.

And, If you lot demand to a greater extent than choices, together with don't heed learning from complimentary resources together with so you lot tin dismiss also cheque out my listing of free TypeScript courses for spider web developers.

8. Form Helpers
Apart from Type Checkers, it's also adept to acquire Form Helps similar Redux Form, which provides the best means to handle your shape the world inwards Redux. Apart from Redux Form, you lot tin dismiss also withdraw keep a await at Formik, Formsy, together with Final form.

9. Routing
Components are the ticker 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 you lot desire to withdraw keep bookmarkable URLs for your spider web app or a composable means to navigate inwards React Native, React Router industrial plant wherever React is rendering.

Apart from React-Router, you lot tin dismiss also withdraw keep a await 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 inwards adept detail.

10. API Clients

In today's world, you lot volition rarely construct an isolated GUI, instead, in that location is to a greater extent than adventure that you lot volition construct something which communicates amongst other application using APIs similar REST together with GraphQL. Thankfully, in that location 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 tardily means to purpose GraphQL to construct customer applications. The customer is designed to aid you lot rapidly construct a UI that fetches information amongst GraphQL together with tin dismiss live used amongst whatever JavaScript front-end

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

11. Utility Libraries

These are the libraries which brand your locomote easier. There are many utility libraries available for React developers equally shown below:

Lodash
Moment
classnames
Numeral
RxJS
Ramda

I don't propose you lot acquire all these together with so does RoadMap. If you lot await closely entirely Lodash, Moment, together with Classnames are drawn inwards yellow, stating that you lot should start amongst them.

12. Testing
Now, this is i of the of import science for React Developers which is oftentimes overlooked, but if you lot desire to remain ahead from your contest together with so you lot should focus on learning libraries which volition aid you lot inwards testing. Here also, you lot withdraw keep libraries for Unit testing, Integration testing, together with end-to-end testing.

Here is a listing of libraries mentioned inwards 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 dismiss acquire the library you lot 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 topic for developing front-end which is used worldwide. You may demand to back upwards the local GUI version for Japan, China, Spain, together with other Europian countries.

The RoadMap propose you lot acquire the next applied scientific discipline but they are all nether adept 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 powerfulness live thinking what is the departure betwixt Server-Side Rendering together with Client Side rendering, let's clear that before talking almost the library which supports Server Side Rendering amongst React.

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

While inwards 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 exactly Next.js should live enough, together with Thankfully, Max's React xvi - The Complete Guide also covers Next.js basics which should live adept plenty to start with.

15. Static Site Generator
The Gatsby.js is a modern static site generator. You tin dismiss purpose Gatsby to practise personalized, logged-in experiences website. They combine your information amongst JavaScript together with practise 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, oftentimes used for SEO crawler indexing together with UX functioning together with non offered past times rails/webpacker.

17. Mobile
This is some other expanse where learning React tin dismiss actually beneficial equally React Native is rapidly becoming the measure means to railroad train mobile application inwards JavaScript amongst native await together with feel.

The RoadMap suggests you lot acquire next libraries:

React Native
Cordova/PhoneGap

But, I think, exactly learning React Native is adept enough.

Thankfully, in that location are some adept courses to acquire React Native are also available similar Stephen Grider's The Complete React Native together with Redux Course which volition learn you lot 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 you lot 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 you lot already mastered React, you lot tin dismiss withdraw keep a await at them.

19. Virtual Reality
If you lot are interested inwards edifice Virtual Reality based application together with so also you lot withdraw keep some framework similar React 360, which allows you lot to exciting 360 together with VR experiences using React. If you lot are interested inwards that area, you lot tin dismiss farther explore React 360.

That's all almost The 2018 React RoadMap. It's indeed really comprehensive together with in that location is adept adventure that you lot won't acquire all of these inwards the remaining 2018, but don't worry, all the technologies are nonetheless valid for 2019 together with you lot tin dismiss effectively purpose this equally 2018 React RoadMap.

Other Programming Articles you may like
10 Reasons to Learn Python inwards 2018
10 Programming languages You tin dismiss Learn inwards 2018
10 Tools Every Java Developer Should Know
10 Reasons to Learn Java Programming languages
10 Frameworks Java together with Web Developer should acquire inwards 2018
10 Tips to acquire a improve Java Developer inwards 2018
Top five Java Frameworks to Learn inwards 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 enough non going to live easy, but past times next this roadmap together with guide, you lot are i measurement closer to becoming the React Developer you lot ever wanted to be.

Please regard 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 you lot don't heed learning from complimentary resources together with so you lot tin dismiss also cheque out my listing of Free React courses to start your journey.

Sumber https://javarevisited.blogspot.com/

The 2018 React Developer Roadmap - You Lot Conduct To Cash Inward One's Chips A Modern Spider Web Developer