Learning a new programming language or framework can be daunting, but it is also an essential skill for any developer. In this series of articles, we will be exploring the process of building a fully responsive social media website using NextJS 13, Zustand, Tailwind CSS, Apollo client, and React i18n. But before we dive into the specifics of these frameworks, let's first discuss some general tips and strategies for learning a new language or framework.
I- Master the Fundamentals / Essential Skills
1. Understand the Basics of Programming:
Before you can effectively learn a new language or framework, you need to have a good understanding of the basics of programming. This includes concepts such as variables, functions, control structures, and data structures. If you're new to programming, consider taking an introductory course or reading a beginner's guide to programming. Personally, as a self-taught, I watched a bunch of training videos on YouTube, and the best channel for me was The Net Ninja.
One must give to Caesar what is Caesar's
2. Set Clear Goals
When learning a new language or framework, it's important to set clear goals for what you want to achieve. Do you want to build a small project to test out your skills, or do you want to become proficient enough to land a job as a developer? Having clear goals will help you stay motivated and focused on your learning journey. As a freelancer, I usually study new frameworks to improve my curriculum in order to apply for more jobs on Upwork and add more gigs on Fiverr.
3. Learn by Doing
One of the most effective ways to learn a new language or framework is to simply start building things. Choose a small project that you're interested in and use it as an opportunity to practice your new skills. As you work on your project, you'll encounter problems and challenges that will force you to learn new concepts and techniques. This is exactly why I decided to code a social media website, and also because I heard you can't be an accomplished developer without having code this type of website 😅.
4. Use Multiple Resources
There are many resources available for learning programming languages and frameworks, including books, online courses, documentation, and forums. Don't limit yourself to just one resource - try to use multiple sources to get a well-rounded understanding of the language or framework you're learning. Personnaly, my first step is to find a free tutorial on YouTube to have a grasp on the framework, and then I read its whole documentation. The first step make the second extremelly lighter.
5. Practice, Practice, Practice
Learning a new language or framework takes time and practice. Make sure you're consistently working on projects and practicing your skills. This will help you build your confidence and proficiency over time. It is only practicing over and over that will help the different syntaxes and patterns to get stuck in your brain.
The most important in studying a new framework or language is to understant why and how to use it, especially for frameworks. The syntaxes, patterns, and functions come after, simply because they will be always available on the documentation to copy. Let me explain what I mean.
II- Introducing the Frameworks
Now that we've covered some general tips for learning a new language or framework, let's briefly introduce the specific frameworks we'll be using in this series. Most of these are based on React which is a free and open-source front-end JavaScript library for building single page user interfaces based on components.
1. NextJS 13
NextJS is a React-based framework for building static-side generated (SSG) and server-side rendered (SSR) web applications. SSG means the code React is converted into an html page with specific style and script files associated once the application is built and can't be changed no more. SSR means the code React is converted into an html page directly on the server everytime the page is requested to this server. And there is more, the 13th version of NextJS add a third type which is Incremental Static Regeneration (ISR). Basically, this make it possible to do an SSG as many times as we decide.
You may wonder: "Why not just do an SSR instead of ISR ?" or "What is the specific difference between SSR and SSG anyway ?". Well, these are legit questions and their understanding is what make the difference between the programmers. However, this is not the purpose of this article, if you want more on NextJS 13, let me know in the comment section.
So, this is what I meant at the end of the first section. Specifically for this framework, it is essential to know the difference between SSR, SSG, and ISR, between dynamic and static routes, server and client components... How to create those won't be a problem, the only one will be how to use them properly.
2. Zustand
Zustand is a state management library for React. It allows you to easily manage complex state logic using simple, intuitive hooks. It is easier to use than redux but does it do the job as efficiently as redux does ? We'll find out.
3. Tailwind CSS
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for common styling needs. It allows you to quickly and easily style your application without writing custom CSS. It is easier than Bootstrap to manage and modify. Also, as we don't want to create every single component by ourself, we will use Flowbite components that are based on Tailwind.
We are not lazy just smart 😁
5. Apollo Client
Apollo Client is a framework that helps to manage GraphQL queries and mutations. Read the documentation but mainly the only things we will need is querying datas (GET) and mutating datas (POST, DELETE, UPDATE)
4. React i18n
React i18n is a library for internationalizing React applications. It provides a simple API for translating your application's text into multiple languages.
Learning a new language or framework can be challenging, but it is also a rewarding experience that can lead to new career opportunities and personal growth. By following the tips and strategies outlined in this article, you'll be well on your way to mastering your next programming language or framework. In the next article in this series, we'll dive deeper into the specifics of building a social media website using NextJS 13, Zustand, Tailwind CSS, Apollo Client and React i18n.
Please, if you liked it don't forget to like and subscribe for the other articles of this series. Thank you so much 👨💻!
Top comments (0)