Build your first React JS Project Step by step

Kamran shaikh
3 min readMar 5, 2022

--

As demand for React js developers goes high again in 2022, and companies are not able to find quality developers. This blog will guide you through some initial fundamentals to learn in React JS which will help to build production ready applications even if you are new to React JS.

If you are already a frontend developer then it will be easy steps for you and if you know any other framework like Angular or Vue js, then it will be the smoothest for you. I will share you step by step guidance to cover all basic fundamental of React JS which will help you to create a project in Create JS.

So lets Begin

  1. To start Building projects on React JS framework you should know what are the prerequisites and how to get them. The initial setup will be covered this video: React JS Tutorial — 1 — Setup
  2. We always begin building project by building its unit and React JS project unit are called as component and in this video we will learn how to build Class type components: React JS Tutorial — 2 — Class Component
  3. We also have one another type of component which stateless, Functional components. You will learn how to create functional component: React JS Tutorial — 3- Functional Components
  4. Now we know how to create both types of components, we start using data inside these components. In this video, you will learn how to use and pass data to components as states and props: React JS Tutorial — 4- States and Props
  5. When we create multiple components, we will need to call components from each others. In this video we will learn that: React JS Tutorial — 5 — Calling a function of other component
  6. When we create projects with multiple pages, we have to route to one page to another. In this video we will learn react routing mechanism: React JS Tutorial — 6 — React Router
  7. We can pass data easily to directly connected components but to make the project clear and avoid redundant code we use Redux to pass data throughout project. In this video we will learn what exactly is Redux: React JS Tutorial — 7 — React Redux Introduction
  8. After knowing, in this video we will learn how to fit this Redux in our project: React JS Tutorial — 8 — React Redux Implementation
  9. Whats the html without css, so in this video we will learn different ways to add css in our React project: React JS Tutorial — 8 — React Redux Introduction
  10. When we create complex component, we need to show or hide on basis of some condition, so: React JS Tutorial — 10 — Conditional Views
  11. We need to show list of things ( movies list ) all the time which requires loop so in this video we will see looping: React JS Tutorial — 11 — List View
  12. To get data on the frontend, we should know how to make an get api call and in this video i will explain that: React JS Tutorial — 12 — HTTP GET Request using Axios
  13. After getting data, if we make some change in data, we have to push the data back to server, post api will be required in that case: React JS Tutorial — 13 — HTTP POST Request using Axios
  14. At last, using all these fundamentals, we will create a basic UI: React JS Project | YouTube replica in react JS | source code of the project

If you go through all these videos you will at least build small ui projects and then you can easily apply for Junior frontend developer Job. After this you will learn few things with experience and will conquer the world of frontend, Happy Coding!!!

--

--

Kamran shaikh

Software Engineer, Freelancer, Music, Movies, TV Series, Table Tennis