Metadata-Version: 2.1
Name: django-react-templates
Version: 0.2
Summary: A Django app that allows React templating.
Home-page: https://github.com/brenodega28/django-reactive
Author: Breno Gomes
Author-email: brenodega28@gmail.com
License: MIT  # Example license
Classifier: Environment :: Web Environment
Classifier: Framework :: Django
Classifier: Intended Audience :: Developers
Classifier: Operating System :: OS Independent
Classifier: Programming Language :: Python
Classifier: Programming Language :: Python :: 3
Classifier: Topic :: Internet :: WWW/HTTP
Classifier: Topic :: Internet :: WWW/HTTP :: Dynamic Content
Requires-Python: >=3.8
License-File: LICENSE

======================
Django React Templates
======================

React Templates is a Django app made to integrate React into Django Templates.

Installation
____________

``pip install django-react-templates``

Update your `wsgi.py` file with:

.. code-block:: python3

    import os

    from django.core.wsgi import get_wsgi_application
    from react_templates.wsgi import get_web_application

    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "main.settings")

    application = get_wsgi_application()
    web_application = get_web_application() # Make sure this is after the application


Once `runserver` command is called, React Templates will setup it's necessary files and packages.

Important Files
_______________

React Templates creates several files inside your root:

- `package.json` - For managing the React packages, you can also install your own packages inside.
- `yarn.lock` - Lockfile for your packages.
- `.babelrc` - Configuration file for Babel compiler.

*Removing any of these files (or altering .babelrc) will result in unpredicted results or failure.*

Quick Start
___________

Inside any app in your project, create a `web` folder and a `.js` file.

.. code-block:: js

    // File inside /my-app/web/HelloWorld.js

    import React from "react";

    function HelloWorld() {
      const [number, setNumber] = React.useState(0);
      return (
        <div>
          <h1>Hello World! {number} times!</h1>
          <button onClick={() => setNumber(number + 1)}>Click me!</button>
        </div>
      );
    }

    export default HelloWorld; // Defines which component will be rendered as an entrypoint.


Once you have your React Component, create a view that renders that template:

.. code-block:: python3

    # File inside /my-app/views.py
    from react_templates.render import render_react

    def hello_world_page(request):
        return render_react(request, "my-app/HelloWorld.js") # Notice you must not mention the web folder!


Now you can path it to some url and it will render a html page!

Importing
_________

Importing components from your own project must be done using the relative path from it. For example, if we have a component in a different app:

.. code-block:: js

    // File inside /my-app/web/Home.js

    import { OtherComponent } from "../../../new-app/web/components/OtherComponent.js";

    ...

Context
-------

You can pass a context to the main component and it'll be received as a prop.

.. code-block:: python3
  
  ...
  def my_view(request):
    return render_react(request, "my-app/MyComponent.js", {"name": "Breno Gomes"})

.. code-block:: js

    function MyComponent({name}){
      return <h1>{name}</h1>
    }

The code above will render a title with the name "Breno Gomes".
