Learn enough React to start learning Next.js

React.js is a JavaScript library that revolutionized the way we build front-end applications. It established a declarative way to develop apps and made the process faster, more efficient, and more scalable. Much innovation has been done in the React community over the last decade. One such innovation is "meta-frameworks", frameworks that are built on top of core React.js.

The most popular of them all is Next.js. It provides several rendering patterns, an advanced way of data fetching, file-based routing, and many features that core React.js does not support. Therefore it is the widely accepted React meta-framework today.

In this blog, let us directly jump to the topic and understand what core React concepts you need to know before learning Next.js.

The basics

Foundational knowledge is essential no matter the framework you choose.

Start with reading about how React differs from Vanilla JavaScript or other libraries before React. Then learn how React works and how it renders elements on the webpage.

React.js uses a syntax called JSX. It lets you write HTML-like code in JavaScript files. JSX makes it easy to create reusable components, which are the building blocks of React apps.

Components can have their own state and props. The state is the data that changes over time in a component, while props are the data passed from a parent component to a child component. You can use state and props to manage your app's data flow and interactions.

Start with how React renders, then learn JSX, components, props and states

Hooks in React

The second step is to learn about hooks. Hooks let you use React features like state management, side effects, etc. It makes your code more readable and maintainable. Knowing when and how to use hooks will make you a better developer.

While learning hooks, you must start with understanding how hooks are helpful in functional-based React architecture. Then, read about the rules of hooks, and know when you can use hooks and when you can not.

We will look at different hooks you should learn in the following sections.

Learn why hooks are used, and the rools of hooks

State management

State management is managing the state of your app across different components. React provides built-in hooks for state management, such as useState and useReducer. The useState hook lets you create a simple state variable and a setter function. In contrast, useReducer lets you create a more complex state object and a dispatch function.

However, sometimes you may need to share states across multiple components that are not directly related. In that case, you can use Redux or Context API. Redux is a popular library for state management that uses a central store, actions, and reducers to manage the state. Context API is a feature of React that lets you create and consume contexts and objects that hold some global data for your app.

Learn useState, useReducer. Then learn Redux or Context API.

Side effects & refs

Side effects are anything that affects something outside of your function component, such as fetching data, interacting with the browser API, changes in the user input, etc. Use the useEffect hook to perform side effects in your function component. useEffect takes two arguments: a callback function that runs after every render and an optional array of dependencies that determines when the callback should run.

Use the useRef hook to create refs in your function component. Ref refers to DOM elements or variables that persist across renders. It takes only one argument: an initial value for the ref. You can access the current value of the ref by using the .current property.

Know about useEffect and useRef.

Memoization

Memoization is a technique of caching the result of a computation so that it can be reused later without repeating the computation. Memoization can improve your app's performance by avoiding unnecessary re-rendering or re-computation. You can use the useMemo and useCallback hooks to memoize values and functions in your function component.

Memoization is an advanced topic both in programming and React.js. Make sure you spend enough time knowing its real-world use cases and practical ways to implement them.

Spend enough time and become comfortable with useMemo and useCallback.

Custom Hooks

Custom hooks are functions that use other hooks to create reusable logic for your app. Custom hooks let you extract and share common functionality across different components. Custom hooks follow the same rules as other hooks and should start with the word "use".

For example, you can create a custom hook called "useFetch" that uses useState and useEffect hooks to fetch data from an API and store it in a state variable.

Learn how to create custom hooks as well.

Concepts you can skip

React.js is more than just components, states, props, and several hooks. However, you can skip most of it initially and pick it up as you need while building apps with Next.js.

For example, you don't need to learn react-router-dom, a library for routing in React apps. You would see this in many React courses; hence you might want to learn it. But Next.js has its own file-system-based routing system that is simpler and more powerful than react-router-dom.

You also don't need to learn data fetching techniques. Next.js provides some built-in methods for data fetching, such as getStaticProps and getServerSideProps.

Another concept is file/folder structure. If your plan is to shift to Next.js (or any other meta-framework), don't spend too much time understanding React's file structure. Because not only it depends on the approach you used to start your React app (CRA, Vite, etc.), and every meta-framework has its own structure.

Lastly, styling is also something you should not pay much attention to. Learn the basics of how you can add styling to React apps and stick with any one. Later in Next.js, you will have a modules-based approach to style your apps.

Don't pay much attnetion toreact-router-dom, data fetching methods, folder structure and stylling.

Fast Answers and Questions

Let's briefly discuss questions that you, as a beginner, could have in your mind:

What is Next.js?

Next.js is a meta-framework that is built on top of React.js. It incorporates all React features and provides some new additional features with it. It makes multi-page React apps production-ready and SEO-friendly. It has features like server-side rendering, code splitting, and routing, making it easy to create high-performance websites with minimal configuration.

Are React.js and Next.js the same?

No, they are not the same. React.js is a JavaScript library for building user interfaces that use client-side rendering. Next.js is a framework that uses React.js to create server-side rendered applications.

Next.js is a "wrapper" around React.js. It takes all of React's core features, adds more features, and makes it production ready.

Why choose Next.js over React.js?

React.js is best suited for single-page applications. It fails when we need to build dynamic multi-page applications ready for production and SEO-friendly. Next.js, on the other hand, lets us configure production-ready, SEO-friendly apps with minimal configuration.

Can I directly learn Next.js?

Well, yes. You can entirely skip learning React.js and start with Next.js. You can know React concepts as you go.

Ideally, you shouldn't. Both are fundamentally different though used for similar use cases. Next.js is developed on top of React, which is a library in itself. You should understand the difference between React.js and Next.js. If you learn both at the same time, it will be more difficult to retain certain framework-specific concepts. Furthermore, learning them both at the same time will increase your learning curve.

Where can I learn React.js?

Showwcase has a complete React roadmap to start learning React. It will help you build strong foundational React.js knowledge that will help you learn Next.js.

Closing notes

While learning React, start with the basics. Then learn hooks, state management, side-effects, refs, and custom hooks. You can skip routing, data fetching, and styling.

React's official docs suggest using Next.js as one of the methods to start a React app. Also, the maintainers of Next.js and React.js are working closely together to make the front-end ecosystem better. Hence transitioning to Next.js is a must step as React developer.

That's it for today's blog. Hope you are clear on what you need to learn. If you found this blog helpful, share it with your friends. Also, consider checking out my blog, where I write about front-end development, technical writing, and open-source. Catch me on Showwcase if you want to say hi!

Until then, keep coding! 👨‍💻