Learning Path Series-Get Started in REACT Development

Introduction

First developed by Facebook, REACT is a modern and powerful Javascript library for dynamic applications. As per official REACT JS site, it makes painless to create Interactive User Interfaces. Especially the ones who state changes as per changes in data. It's based on encapsulated components and follows the principle of 'learn once write anywhere'. It makes it very easy to re-use your existing code.

Job Opportunities

REACT JS is heavily used or web application development. Also with the onset of REACT Native JS, it is becoming an increasingly popular choice for application development in Android and IOS. REACT JS would come under the umbrella of Web development, web application development and Mobile application development. So the job opportunities are immense and booming with REACT JS as a core skill in the overall Web and application development.

Now let's cover the learning path to get started in REACT development.

Beginners Topics to Cover in REACT[ Days 1 - 5]

  1. Installing VS Code
  2. Understanding REACT components
  3. “Hello World” in REACT
  4. REACT ES6 and JS6
  5. REACT Props, State, Developer tools
  6. Event Handling in REACT
  7. Lists, User Input, Styling custom Component

Intermediate Topics-I to Cover in REACT [ Days 6 - 13 ]

  1. Handling REACT Events with Methods
  2. State Manipulation, understanding useState() hook 
  3. Stateless Vs Stateful Components
  4. Method Referenced between components, two-way binding
  5. Conditional Content Rendering
  6. Lists & State, Lists & Keys, Flexible Lists
  7. Setting Class names Dynamically
  8. Usage of Radium, Media Queries
  9. Enabling and Using CSS Modules, Pseudo Selectors, Media Queries

Intermediate Topics-II to Cover in REACT [ Days 13 - 17 ]

  1. Debugging in React, Error Messages, using Dev tools and Source maps
  2. Splitting Application into separate components, Stateless Vs Stateful components, Classbase Vs Functional Components
  3. Component Lifecyle- Creation, Updation for Props and State changes
  4. Understanding useEffect() behavior, Lifecycle hooks
  5. Component Optimization
  6. DOM Updation
  7. Rendering of adjacent JSX Elements

Intermediate Topics-III to Cover in REACT [Days 18- 25]

  1. HOC- Higher Order Component
  2. Passing Unknown Props, Setting State, Prop types
  3. Using Refs, Refs with REACT hooks
  4. Prop Chain problems
  5. Context API, ContextType, useContext()
  6. HTTP Request in REACT, GET data, rendering fetched data on screen
  7. Fetching Data on Update, without infinite loops
  8. Posting data to Server, sending DELETE request
  9. Error handling
  10. Interceptors for Global execution and Axios Instances

Advanced-I Topics to cover in REACT [Days 26 - 30]

  1. Routing and SPAs, Understanding Multi-Page in Single Page Application
  2. Settings Links, Router Packages, react-router Vs react-router-dom
  3. Preparing Project for Routing, setting and rendering of routes
  4. Page Switching, links for page switching, routing props
  5. “withRouter” HOC & Route Props
  6. Passing and Extracting Route parameters
  7. Nested Routes, Redirecting Requests, Conditional Redirects
  8. Routes Lazy loading, REACt suspense
  9. Routing and Server Deployment

Advanced-II Topics to cover in REACT [Days 30 - 35]

  1. Understanding REDUX, Managing State Flow
  2. Setting Reducer and Store
  3. Connecting REACT to REDUX
  4. Updating STATE, ARRAYS immutably
  5. Outsourcing Action Types
  6. Multiple Reducers
  7. REDUX Devtools
  8. Deploying APP to the Web

Complementary Skills

Like in all other learning paths, here are some other skills that complement REACT JS, while applying for jobs in industry:

  1. HTML 5
  2. CSS
  3. SQL
  4. Jquery
  5. NoSQL

Popular Job Titles with REACT JS Skills

  1. REACT JS Developer
  2. Web Application Developer
  3. Full Stack Developer
  4. Front-End Engineer
  5. Software Engineer

Conclusion

This brings us to the end of this learning path for REACT development. We hope this learning path helped you. Let us know in case of any further questions or feedback here, QuickCode team will be here to help you with your learning needs.