DEV Community: Pawel Pioro

How to become a Full-Stack Developer: A Simple and Fast approach

Pawel Pioro — Fri, 23 Feb 2024 22:17:32 +0000

Want to become a full-stack developer? Unsure of what you need to know? Need a helpful point in the right direction? This post will explain how to link your frontend to your backend simply and quickly!

More specifically, I will give a quick way to link two very popular web technologies together: Django and React! We will use Cors Headers to make this magic happen. I know when I was introduced to Django, creating a frontend was always a challenging task and got complicated very quickly. React was a tool that I learned later, that simplified things, and connecting it to Django was ultimately my end goal. This is why I am writing an article to show this solution!

Setup

Firstly, you need to have created a Django project with an app called 'backend'. This will be the API for our project. We then need to install Cors Headers so Django allows our React frontend to make requests:

pip install django-cors-headers

We now need to install our frontend. I will use Vite for this example. CD: to the root of the project and type the following commands:

npm create vite@latest frontend-- --template react
cd frontend
npm install

Then we need to add cors-headers to our installed apps in settings.py . Make sure it looks like this:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # added below
    'backend',
    'corsheaders',
]

Then, below, add these lines of code to trust our frontend...

CORS_ALLOWED_ORIGINS = [
    'http://localhost:5173', # default port of react
]

CSRF_TRUSTED_ORIGINS = CORS_ALLOWED_ORIGINS

... and add this line to the middleware:

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    'corsheaders.middleware.CorsMiddleware', # add this line
]

And that is all you need for settings.py!

Usage

Now we have completed these steps, we can use this project by visiting the react app and making API requests to the backend port (default is 8000). An example of making such a request is:

axios.post('/api/{yourApiView}/', {})

And there you go! You can now connect your react app to your Django backend.

Want to become a programmer? This is the fastest way to master Python.

Pawel Pioro — Wed, 14 Feb 2024 12:03:15 +0000

Are you a beginner in programming? Do you want to master your first programming language? Are you unsure on how to do this? Or maybe you want to refresh your Python skills? If so, this post is for you as I explain how you can learn Python in the best way.

Why Python?

Firstly, why Python? Python has been one of the most popular programming languages for the past few years and will remain at the top. You can essentially do anything with Python, thanks to its large number of libraries and huge community. You probably are aware of why Python is the best choice for beginners, so I won't dwell too much on this.

How can I learn Python as quickly as possible?

Many go down the route of watching videos on YouTube. Although this is fine to get familiar with the syntax (how the language is written), many important concepts will simply not stick and be forgotten. I believe videos can be very helpful, however, they shouldn't be relied on and you must have hands-on practice actually coding in Python as that is the end goal!

So what is the best way to learn Python?

I believe the best way is through a course. More specifically, CS50P. The course, which is offered by Harvard University, has the perfect balance between videos and small projects that assess a specific skill that you have learned. It can seem daunting at first, but you can work on each problem set at your own pace. It doesn't matter if a problem takes a day, a week, or even a few weeks. After completing this course, I can confirm that it's a very valuable resource that we all have access to. You get a certificate that you can put on your resume to prove you have the essential skills in Python - for free! I strongly advise you to check the course: Harvard's CS50P Course

I have completed the course, what now?

If you have completed the course, you know the syntax of Python and have additional experience with more intermediate topics such as unit testing and OOP. You may not be ready to get a job yet, however, with the skills you have, you can start to learn any framework or library. If you are completely unsure, I recommend another CS50 course - Harvard's CS50W Course. This course is a little more complex, however, it will teach so much valuable material that it makes it worth it. At this point, you can strongly say you have achieved your goals and are a programmer!

If you have any questions or have a suggestion for a different learning material, feel free to comment. I look forward to hearing from you!