Learn React with a project for beginners

In the olden days, developer had to do a lot of configurations like webpack, babel and what not to get a basic react project together.

DevHoot

The aim of this tutorial is to get you started with Reactjs by building a project and teaching you fundamentals of React along with it. :+1:

Prerequisites: Basic grasp on Javascript and strong experience with HTML, CSS.

Project: We’ll be building a website in React that does the following.

  • Fetch data from API
  • Render the data
  • Navigate between multiple pages

From above list it may seem to you that not much is happening here, but trust me this will teach you all the fundamental concepts of React & prepare you for advanced React training.

Learnings: The concepts you’ll learn in this project are:

  • CRA (Create React App)
  • React Router
  • import/export components
  • designing components.
  • fetch data
  • parse and render data
  • styled components :sunglasses:
  • state management
  • lifecycle methods
  • best practices

All the code for the website and instructions to setup on local machine are available here on GitHub.

CRA a.k.a Create React App

In the olden days, developer had to do a lot of configurations like webpack, babel and whatnot to get a basic react project together. But you don’t need to worry. Our friends at facebook created a utility tool called the Create React App to simplify things.

CRA is officially supported and gives you a react project’s scaffold with no build configuration required manually.

Extra: Read more about CRA here

Step1: create a react project

npx create-react-app website

This will scaffold a react project for you named website. Congrats for creating your first react project :fire:

Let’s move into the project folder

cd website

And let’s preview our website by starting the hot-reloading server that comes bundled with CRA.

yarn start

Tip: Always prefer yarn over npm when working with React.

Now go to localhost:3000 in your browser and you should see a basic react website.

Open your project in your text editor.

Go to src directory and create another directory called components inside it. This is where all our components will reside in.

Inside components create two files Navbar.js & Footer.js. These will be used as Navbar & Footer in all our Components. Now inside the components directory create two other folders called Home & About. In Home directory our components related to the Home page will reside & in About components related to About page.

This is a common design pattern followed while designing components in react. In react everything is a component.

You’ll be more successful in react if you can better visualise and plan components for you app before-hand based on what data you need or the user interacts the most etc.

To learn more about component driven architecture & to practice The Component Philosophy read.

As of now, since you are a beginner, knowing that react follows a component driven approach is sufficient for now.

Inside About create two files named About.js & Header.js & inside Home create two files named Home.js & Body.js

Ultimately, you shall have this project structure.

folder structure

Tip: The name of the component files in react are kept same as the name of the component made inside of the file. The name of the components follow the convention of first letter capital.

Subscribe below or here to receive new content whenever I publish. 👇

No new content, No new e-mail. Promise !!!