DEV Community

Cover image for Switch from vanilla JS to React Js
Mithun
Mithun

Posted on • Edited on

Switch from vanilla JS to React Js

1) JSX (JavaScript XML):

Understand JSX, which is a syntax extension for JavaScript recommended by React. JSX makes it more readable and concise to describe what the UI should look like.

2) Components and Props:

a) Components: Learn how to create functional and class components.
b) Props: Understand how to pass data between components using props.

3)State Management:

useState Hook: Learn how to manage state in functional components using the useState hook.
State in Class Components: Understand state management in class components.

4)Lifecycle Methods:

If you're using class components, learn about lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount.

5)Event Handling:

Understand how to handle events in React components, both in functional and class components.

6)Conditional Rendering:

Learn how to conditionally render components or elements based on certain conditions.

7)Lists and Keys:

Understand how to render lists of items and the importance of using keys to help React identify which items have changed, been added, or been removed.

8)Forms in React:

Learn how to work with forms in React, handle form submissions, and manage form state.

9)React Router:

If your application involves navigation, learn how to use React Router to handle routing in a single-page application.

10)Managing State Across Components:

Understand strategies for managing state that needs to be shared across multiple components, such as lifting state up, using context, or using state management libraries like Redux.

11)Hooks (useEffect, useContext, etc.):

Explore other React hooks, such as useEffect for handling side effects, and useContext for accessing context in functional components.

12)Error Boundaries:

Learn how to use error boundaries to gracefully handle errors in your application.

13)Functional Components vs. Class Components:

Understand the differences between functional and class components and when to use each.

14)Testing React Components:

Explore testing frameworks like Jest and testing-library/react for testing React components.

15)Webpack and Babel:

Understand the basics of Webpack and Babel for bundling and transpiling your React code.

16)State Management Libraries (Optional):

Explore state management libraries like Redux or Recoil for more advanced state management scenarios.

17)React Hooks Libraries (Optional):

Explore popular React hooks libraries like react-query or react-query/devtools for managing asynchronous data fetching.

18) Next.js (Optional):

Explore frameworks like Next.js for server-side rendering and other advanced features.

Top comments (0)