Learn React By Building A Twitter Clone

Nicos Tsourektsidis
26 min readMay 8, 2021

My goal with this article is to help you learn React. We will create a small twitter clone. I will guide you how to build your own app step-by-step and I will try to teach you all the little details you need to get started.

If you never tried React before in your life, this will be a good starting point for you. If you know already the basics of React, you may find this article boring at least.

You can fork my GitHub repo: @nicotsou/react-twitter.

Found something strange? You can suggest changes by creating issues. Pull requests are also welcomed. This tutorial is also available in my blog repo.

To follow this guide you must have Node.js installed. Any version above v10 will work just fine.

One last thing. For making my tutorials easier to read, I always remove the ; semicolons in my code snippets. In spite of the fact that they are not really needed, you will find them in the actual project.

Ready to write some code? OK, let’s go! 🐤 🤩

Create a React application

Open your terminal, move to your development directory and run the following command:

npx create-react-app my-twitter-clone

The following prompt will appear. Accept the installation and take a small ☕️ break. The installation will take some time, especially if you don't have any React projects in your system.

This will create a subfolder with all the files we need to run our newly created React application:

Let's have a closer look at the initial folder structure:

  • /node_modules: This hosts all third-party npm packages that are needed in order to run and deploy our application. This folder is ignored from git. Sometimes it makes sense to delete it and run npm install. re-create it.
  • /public: This folder hosts public…
Nicos Tsourektsidis

Lead Software Engineer @ Epam Systems Switzerland. I ❤️ JavaScript, React, User Interfaces, coffee and video games.