React Django Crud Tutorial - Learn React Python Django In 1 Hour | For Beginners

Learn how to seamlessly integrate React and Django in this comprehensive tutorial! We'll cover setting up both frameworks, building a full-stack application, and handling front-end and back-end communication. Perfect for developers looking to enhance their skills with two powerful technologies.

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

#reactjs #django

[okellocrystal]

This was perfect, very intricate but also easily palatable and flowing. You should def make more of this. Thank you so much.

[AAA-fm]

YES!!!!
Are we going to get an intermediate video?

[Mr.ilyassLofi]

Thank you for this work, I learned a lot from you. 🐾🌀

[arhabersham]

The tutorial I been waiting for, from the content creator I been growing with ❤

[davidmukoro]

Nice one. let's try to deploy this to shared Linux server and also with Mysql .

[bahdcoder]

as i saw this video and i started praying for you.. thank you pedro

[derek]

labeled "for beginners" I really wish there was more guidance on set up, atleast direction to useful articles, as python especially for mac users runs into a lot of issues

[oliver.quiroz]

How did you install your django and djangoframework in your mac?

[madhurabs]

Thank you so much I really mean it!!!! I completed the complete Tutorial. I learned a lot from this.. I used axios in my project.This is very helpful in the long run

[tomahocbc]

please can you add authenticaion, login, logout etc..

[l.r]

Dude, amazing tutorial. Helps me a lot! Thanks!

[xzex]

I add some functionality to the create end point not to let add books when it is available in the data base and when the title is null I will copy the code for others.
@api_view(['POST'])
def create_book(request):
data = request.data

title = data.get('title')
release_year = data.get('release_year')

if not title and not release_year:
return Response({'detail': 'the title and the year is not provided'},

if Book.objects.filter(title=title, release_year=release_year):
return Response({'detail': 'Book already exist'},

serializer = BookSerializer(data=data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data,

return Response(serializer.errors,

[xzex]

this was very helpful but actually there are a lots of problems that needed to be taken care of, Like
the input fields must have been two way bounded so you can control the field after creating the book (clean them).
the back end needed to check if the book is already exist and don't let you add more.
the front end needed to check if the response is ok then add the contents so the empty book does not added when the database reject that the book is already exists.

the backend needed to check if the both of the fields are provided then add them to the database

I add some of the solutions
if not title and not release_year:
return Response({'detail': 'the title and the year is not provided'},
if Book.objects.filter(title=title, release_year=release_year):
return Response({'detail': 'Book already exist'},

add value field in the input for twoway bounding and settitle('') setReleaseYear('') in every functions the it needs

and check the response
if (response.ok) {
const data = await response.json();
setBooks(b => [...b, data]);
// Reset the input fields after adding the book
setTitle('');
setReleaseYear('');
} else {
const errorData = await response.json();
console.log("Error:", errorData);
alert("This book already exists in the database.");
}

and lastly use turnary opetator instead of if else

setBooks(b => b.map(book => (book.id === id ? data : book)));

[godofwar]

Hey will you make a backend series with javascript

[xzex]

this was great . simple . right to the point. good stuff

[Deus-lo-Vuilt]

Thank you, I was just looking for a video like this

[Amankhowal]

How do you manage to enable Server Side Rendering?

[mikeross]

pls do some videos on jwt authentication with Django rest framework!

[sick]

Pedro, thanks for all the content. i have a request: if you could help us by making a vid on how you would implement a register, login and logout to this same CRUD app. thanks in advanced!!

[roseklaynk]

I am so grateful Thanks so much for the video i did run into some errors with React and i saw the if statement and replaced it with this turnary instead
const data = await response.json()
setRecipes((prev) => prev.map((recipe) => recipe.id === pk ? data : recipe
)) and you can add the catch (err) etc here