If you want to learn React.js, I recommend the Next.js tutorial.

I was interested in using React and a friend of mine who is a front-end engineer recommended the Next.js tutorial to me, so I gave it a try.

Contents

1. React と Next.js
2. Next.js Tutorial
   1. FOUNDATIONS
   2. CREATE YOUR FIRST APP
3. What you can glean from the Next.js tutorial.
4. Learning and deliverables throughout the tutorial.
   1. FOUNDATIONS
   2. CREATE YOUR FIRST APP
5. To close

React と Next.js

React (React.js, ReactJS) is a JavaScript library for building user interfaces.
https://reactjs.org/

Next.js is a React framework.
https://nextjs.org/

In other words, React and Next.js are like "Vue.js and Nuxt".

Next.js Tutorial

The Next.js tutorial I recommend is on the following page:

Next.js Foundations
https://nextjs.org/learn/foundations/about-nextjs

Next.js Foundations consists of "FOUNDATIONS" and "CREATE YOUR FIRST APP".

The table of contents consists of

FOUNDATIONS

1. About Next.js
2. What is Next.js?
3. From JavaScript to React
4. From React to Next.js
5. How Next.js Works

CREATE YOUR FIRST APP

1. Create a Next.js App
2. Navigate Between Pages
3. Assets, Metadata, and CSS
4. Pre-rendering and Data Fetching
5. Dynamic Routes
6. API Routes
7. Deploying Your Next.js App

After first learning the basics, the flow is to actually create a Next.js application.

Not all of the "basics" are just reading, but there is actual hands-on work, so you won't get bored. (Although, each section is short, taking only a few minutes to read.)

FOUNDATIONS

In the foundation chapter, you will learn what React is, what Next is, and how it works.

You can learn not only by reading the explanations, but also by coding.

1. Writing simple JavaScript.
2. Write the same program as in the previous section, this time in React.
3. The same program is written again, this time in Next.js.

These steps made it very easy for me to understand, even though I have no knowledge of React.js.

CREATE YOUR FIRST APP

In this chapter, we will actually build an application using Next.js.

1. environment construction
2. application development
3. deploy

It covers application development from beginning to end, so that by the end of this tutorial, you will have enough deliverables to give you a sense of accomplishment.

What you can glean from the Next.js tutorial.

I had assumed that learning a framework would require some familiarity with the language and libraries on which it is based.

But in fact, this was not the case.

I worked on the Next.js tutorial and even as a beginner, I was able to reach the goal properly.

Not all the fundamentals, ideas, and features of React, Next can be understood in a single tutorial.

However, I was able to get to the point where I could complete the application, which gave me a lot of confidence.

Learning and deliverables throughout the tutorial.

Here are the actual deliverables that were produced once we proceeded with the tutorial.

FOUNDATIONS

In the basic section, you will eventually create a simple screen using Next.js. You can learn how React and Next.js work by creating a "like button" like the one below.

Actual screen and operation can be checked here.
https://202208-next-js-tutorial-foundations.vercel.app/

CREATE YOUR FIRST APP

Now that the basic chapter was over, the next step was to create the actual application, and this is where it started to get great.

There is a world line that does not suddenly use Next.js.

The opening section of this chapter contains this sentence.

This tutorial assumes basic knowledge of JavaScript and React. If you’ve never written React code, you should go through the official React tutorial first.

Create a Next.js App | Learn Next.js

Of course, if you don't need to do that, you can skip this section and create a Next.js application from the next page, but since I wanted to learn about React in the first place, I decided to take a side trip and proceed with the React tutorial first.

Tutorial: Intro to React
https://reactjs.org/tutorial/tutorial.html

The React tutorial was easy to follow and very impressive.

I was able to successfully complete the React tutorial, probably due to the fact that I had a minimum knowledge of React from the Next.js tutorial's basic section and actually wrote a simple code.

"By doing the Next.js tutorial, I also learned React." I look back and think the best experience was here.

Incidentally, the React tutorial itself is about building a tic-tac-toe game application, which was quite fun to make.

You can see the actual screen and operation here.
https://202208-react-tutorial.vercel.app/

Simple blog application

I am finally ready to work on creating a Next.js application. The next tutorial is a simple blog application creation.

Starting with environment construction, building an application, and deploying it. This course covers the entire process of building an application using Next.js, from environment construction to application building and deployment, up until the actual application is released to the public.

I did not get bored because each section was very short and organized, such as screen transitions, layout, rendering, etc., and I was able to go through it a little at a time. And above all, the explanations were very easy to understand.

You can see the actual screen and operation here.
https://202208-next-js-tutorial.vercel.app/

To close

A friend recommended the Next.js tutorial to me and it was a very good experience for me.

It is easy to understand because it is explained in an orderly manner, and the explanations are just very kind. There was not a single part that I was lost after implementing it until the end.

Thanks, my friend, for recommending it!