Learn React: My best-Curated resources to master the JS framework

In 2021, we had a presidential election in Uganda. The whole internet was shut down for the entire week of January. Then it was partially reinstated for another month or so. Most social media websites we banned. In fact, even two years later Facebook is still banned. So, I decided to learn React JS. I really just wanted to get my mind off the depressing political situation in the country.

Alright, enough with the backdrop to my journey. I have grown to like React as a framework for creating dynamic single-page Apps (SPAs). It’s mostly useful for building rich front-end interfaces that are highly dynamic.

If you’re starting your journey with React or looking for key tools in its ecosystem, the following are some of the resources I found helpful, along with some context and modern recommendations.

Core React & Project Setup

These are the absolute basics for getting started with React itself.

• Official React Documentation: https://react.dev/ (Note: the older reactjs.org link still works but react.dev has the latest docs). This is the definitive source for learning React concepts, APIs, and best practices. Start here!
• Project Scaffolding (Setting up a new project):
  • Older approach: Create React App (https://create-react-app.dev) was popular but is now less recommended for new projects.
  • Modern approaches: The official React docs now recommend starting with frameworks like Next.js, Remix, or using a build tool like Vite (Vite Guide). Vite, in particular, offers a very fast development experience for standard React SPAs.

Essential Development Tools

Tools to make development and debugging easier.

• React Developer Tools: Browser Extension Link (Chrome) (also available for Firefox/Edge). Absolutely essential. Allows you to inspect the React component hierarchies, view component props and state, and profile performance within your browser’s developer tools.

State Management

As your application grows, managing the application’s state (data) becomes crucial. Redux is a popular library for this, although React’s built-in Context API can suffice for simpler cases.

• Modern Redux (Recommended): Redux Toolkit (RTK) https://redux-toolkit.js.org/. RTK is the official, opinionated, batteries-included toolset for efficient Redux development. It simplifies most Redux tasks, eliminates boilerplate code, and includes tools like Thunk for async logic and Immer for easier immutable updates. **Strongly recommended for new Redux projects.**
• Older Redux Patterns (Often simplified by RTK):
  • Core Redux: https://redux.js.org/ – The fundamental library.
  • React Redux: https://react-redux.js.org/ (react-redux package) – Official bindings to connect Redux with React components.
  • Redux Thunk: https://github.com/reduxjs/redux-thunk – Middleware for handling asynchronous actions (like API calls). Included in RTK.
  • Redux Logger: https://github.com/LogRocket/redux-logger – Middleware to log state changes in the console for debugging. Development-mode logging is often handled well by Redux DevTools.
  • Redux DevTools Extension: https://github.com/reduxjs/redux-devtools – Browser extension for powerful Redux debugging (time travel, action inspection). RTK configures this easily.

Routing

Handling navigation between different ‘pages’ or views within your single-page application.

• React Router: https://reactrouter.com/. The de facto standard library for routing in React applications. Allows you to define routes that map URLs to specific components.

Styling

Libraries to help style your React components.

• React Bootstrap: https://react-bootstrap.github.io/. Rebuilt Bootstrap components specifically for React. Provides pre-styled UI components like buttons, forms, modals, etc.
• Material UI (MUI): https://mui.com/. A very popular and comprehensive library of React components implementing Google’s Material Design system.

Backend Simulation

Tools for creating mock APIs for frontend development before the actual backend is ready.

• JSON Server: https://github.com/typicode/json-server. Quickly sets up a fake REST API based on a simple JSON file. Very useful for development and prototyping.

Understanding Common Dependencies (package.json Examples)

When you look at a React project, you’ll often find a package.json file listing its dependencies. Here’s an explanation of some common ones you might encounter (note: the versions listed below are examples and might be older):

1. "axios": "^0.21.1": Axios is a popular promise-based HTTP client for making requests from the browser or Node.js to backend APIs.
2. "bootstrap": "^5.1.3": This typically refers to the standard Bootstrap CSS/JS library. If using React Bootstrap components, you might just need the CSS part.
3. "next": "^12.0.7": Next.js is a powerful React framework that provides features like server-side rendering (SSR), static site generation (SSG), file-based routing, and API routes.
4. "react": "^17.0.2": The core React library containing the functionality to define components and manage UI updates.
5. "react-bootstrap": "^2.0.4": The React-specific implementation of Bootstrap components (mentioned above).
6. "react-dom": "^17.0.2": Provides DOM-specific methods, primarily used to render your React application into the HTML DOM (e.g., ReactDOM.render() or createRoot()).
7. "react-redux": "^7.1.0": The official package to integrate Redux with React components (mentioned above).
8. "redux": "^4.0.4": The core Redux state management library (mentioned above).
9. "redux-devtools-extension": "^2.13.8": Facilitates the integration with the Redux DevTools browser extension (mentioned above, often handled by RTK now).
10. "redux-thunk": "^2.3.0": Redux middleware for handling asynchronous actions (mentioned above, included in RTK).

These packages, especially React, ReactDOM, often a router, and potentially a state management library and styling solution, form the foundation of many React applications.

I hope you found these links and resources helpful.