For those who are new to the gang, you can officially join the best react developer gang on Earth by Subscribing below.
Subscribe to my channel. Thanks! ❤️
React has been around for over a decade. More and more developers are choosing React for their next project due to its promising features.
In this tutorial, we are going to talk about everything you need to know to build your own website from scratch.
What do You need? 👀
Absolutely nothing.
You don’t even need to know what is React to get started with this. This course is specially built for the complete beginners. I will show you everything from scratch.
What is React? 🤷
- It is a Javascript library.
- Something that allows us to create websites (single-page applications).
Single-page applications:
Have you noticed this? In the usual websites we use, when we are trying to navigate from page to page you can see it is loading.
What happens in a single-page application (SPA), is the entire website loads on the first visit instead of loading individual pages.
So, there is no loading after the first visit, giving us a faster and much smoother web experience.
Below you can see an illustration of what is happening in a react application. It loads the whole thing from the server, with the first request we give.
To have the experience of a React-built application, visit the link below.
Let’s build our own React app.
Now you have a very basic understanding of what React is and how it works, it’s time to start building our first-ever project.
After completing this tutorial you will be ready and confident to make your own large websites without any aid.
Through this, we are going to cover all the fundamentals of React;
- Using states.
- React Router.
- Some basic Hooks.
- How to fetch data.
- And who knows what will come to my mind. If the feedback is good enough, this will be a long long series. 😇
Let’s Set Up our Garden. 🌲
A) Installing VS Code and Setting it up.
This will be the code editor I use for this entire course. So, If you don’t have it with you, please visit the link below to download it.
Download VS Code.
Then navigate to this icon that I have rounded and install the “ES7 + React/Redux/React-Native snippets” extension to your code editor.
Then tap the setting icon in the bottom left and select settings, search “Emmet” on the search box, and include the following Language.
This will come in handy and make it easy to keep developing by saving us a lot of time.
B) Follow Best Practices.
As you now have chosen to be a developer, one thing is very important.
You have to keep All in a record.
Keeping well-organized records is essential for showcasing your work to others and can serve as an additional qualification for securing a good job.
And the best way to keep your work organized is by using GitHub.
We will discuss that in the next tutorial. I will show you step by step, how to keep your work in GitHub.
See you next time.
Don’t forget to follow me ❤️ So you will never miss a tutorial.
