{"id":445,"date":"2023-09-07T13:10:51","date_gmt":"2023-09-07T13:10:51","guid":{"rendered":"https:\/\/python.garden\/?p=445"},"modified":"2023-09-07T13:10:55","modified_gmt":"2023-09-07T13:10:55","slug":"beginners-guid-to-using-react-js-with-django","status":"publish","type":"post","link":"https:\/\/python.garden\/index.php\/2023\/09\/07\/beginners-guid-to-using-react-js-with-django\/","title":{"rendered":"Beginners Guid to using React.js with Django"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">What is React.js?<\/h3>\n\n\n\n<p>React.js is a popular JavaScript library for building user interfaces, maintained by Facebook and a community of individual developers and companies. Its primary focus is to build UI components that handle the view layer for web and mobile apps.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is Django?<\/h3>\n\n\n\n<p>Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It follows the model-template-views (MTV) architectural pattern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Combine React.js and Django?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>React.js<\/strong> handles the frontend, making your web apps more interactive and dynamic.<\/li>\n\n\n\n<li><strong>Django<\/strong> manages the backend, making it easier to deal with databases, security, and other server-side logic.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up React and Django<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Django Setup<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install Django:<br><code>bash pip install django<\/code><\/li>\n\n\n\n<li>Create a new Django project:<br><code>bash django-admin startproject myproject<\/code><\/li>\n\n\n\n<li>Navigate to the project folder and create a new app:<br><code>bash cd myproject python manage.py startapp myapp<\/code><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">React Setup<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install Node.js and npm from the official website.<\/li>\n\n\n\n<li>Navigate to your Django project&#8217;s root directory, then create a new React app:<br><code>bash npx create-react-app myreactapp<\/code><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Integrate React with Django<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Build the React App<\/strong>: Inside <code>myreactapp<\/code>, run the build command to generate static files: <code>npm run build<\/code><\/li>\n\n\n\n<li><strong>Serve Static Files with Django<\/strong>: In your Django <code>settings.py<\/code> file, add: <code>STATICFILES_DIRS = [BASE_DIR \/ 'myreactapp' \/ 'build' \/ 'static']<\/code><\/li>\n\n\n\n<li><strong>Point to the React <code>index.html<\/code><\/strong>: In your Django <code>urls.py<\/code>, add: <code>from django.views.generic import TemplateView urlpatterns = [ path('', TemplateView.as_view(template_name='index.html')), # ... other paths ]<\/code><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Create a Simple React Component<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Inside <code>myreactapp\/src<\/code>, create a new file called <code>MyComponent.js<\/code>.<\/li>\n\n\n\n<li>Add this code: <code>import React from 'react'; function MyComponent() { return &lt;h1&gt;Hello from React!&lt;\/h1&gt;; } export default MyComponent;<\/code><\/li>\n\n\n\n<li>Import and use <code>MyComponent<\/code> in <code>myreactapp\/src\/App.js<\/code>: <code>import MyComponent from '.\/MyComponent'; function App() { return ( &lt;div className=\"App\"&gt; &lt;MyComponent \/&gt; &lt;\/div&gt; ); }<\/code><\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Communication between React and Django<\/h3>\n\n\n\n<p>Typically, you&#8217;ll use REST APIs or GraphQL to let your React frontend communicate with your Django backend. Django Rest Framework is a good choice for this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>This is just a starter guide. You&#8217;ll need to learn much more to become proficient in both technologies. But combining React with Django gives you a powerful toolset for building dynamic, data-driven web applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is React.js? React.js is a popular JavaScript library for building user interfaces, maintained by Facebook and a community of individual developers and companies. Its primary focus is to build&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-445","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"featured_image_src":null,"author_info":{"display_name":"shababdoo","author_link":"https:\/\/python.garden\/index.php\/author\/shababdoo\/"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/posts\/445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/comments?post=445"}],"version-history":[{"count":0,"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/posts\/445\/revisions"}],"wp:attachment":[{"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/media?parent=445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/categories?post=445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/python.garden\/index.php\/wp-json\/wp\/v2\/tags?post=445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}