# Ncmaz-frontend plugin project development
In the Ncmaz theme, there are many components and pages rendered by React and Graphql
Example: Post cards, Gutenberg blocks, archive pages, search pages...
And all of them are developed in the **ncmaz-frontend** plugin. The *Ncmaz-core* plugin is only responsible for registering and developing Gutenberg blocks on the dashboard side.
So, if you are a web developer, then the below document will help you to customize the theme by developing with the **ncmaz-frontend** plugin.
### 1, Install *node\_module* and enqueue development mode
{% hint style="info" %}
Note: Ncmaz-frontend plugin attached to the Ncmaz theme has removed src folders to reduce the size, so to develop the plugin you need to clone the plugin again from the [repo GitHub](https://github.com/tuanfront-end/ncmaz-frontend/tree/v3) and replace it.
{% endhint %}
First, you need to open the **ncmaz-frontend** folder (full directory), then open the terminal and run the following commands to install **node\_module:**
1. `yarn install` - install node\_module
2. `yarn dev` - start running in development mode
3. Open file "***ncmaz-frontend/inc/ncmaz-enqueue-scripts.php*****"**
4. Comment on the line of code at line (188): `add_action('wp_enqueue_scripts', 'ncmazFe_registerScripts');`
5. Cancel comment on the line (222) : `add_action('wp_enqueue_scripts', 'ncmaz_frontend_enqueue_script');`
6. You can now open your WordPress theme in development mode. (*open the console tab in dev tool f12 and you will see it*)
7. After the development is done, you run the command "*yarn build*" to rebuild the plugin
8. Undo steps 4 and 5 above.
9. The plugin is ready.
### 2, Author page development example
Here is a guide on how the plugin works for author page development (Other pages, and other components will also be similar)
#### 1, Create a div as an anchor to react render to
The *ncmaz-frontend* plugin is a React project, created by CRA, and the working principle is to use the [React portal](https://beta.reactjs.org/reference/react-dom/createPortal) to render components to the anchor points that are declared in the **PHP** files. So you understand that, if you want to create any additional components, first you need to create a div as an anchor point and then in React you will render that component into that anchor div.
How to make a div as an anchor? You need to specify which page you want to develop on, then you will access that PHP page (eg single.php, author.php, archive.php, search.php ...) then select the location to render and add anchor div.
You can create your own anchor, or you can follow the generic way that I developed before,
````html
// author.php
```php
```
````
Where attr *data-is-react-component* must be unique (this is the attr anchor that will be searched by querySelector), attr *data-component-props* is the object props that will be passed to the React component.
````php
// Here is an example to create and pass PageArchiveProps props
```php
$PageArchiveProps = (object)[];
$PageArchiveProps->termId = get_queried_object_id();
$PageArchiveProps->termData = $graphql['data']['termNode'];
$PageArchiveProps->isCategory = is_category();
$PageArchiveProps->isTag = is_tag();
$PageArchiveProps->isFormatVideo = false;
$PageArchiveProps->isFormatAudio = false;
$PageArchiveProps->sectionCategoriesTrending = ncmazGetOptionForSectionTrendingArchivePage();
```php
```
```
````
#### 2, Create React component in ncmaz-frontend and render to anchor div
First, you need to create your React component (***YourComponent.tsx***) and it can be placed in the folder *ncmaz-frontend/src/components*
Then add the switch-case section in the **src/containers/*****FactoryComponents/FactoryComponents.tsx*** file
FactoryComponents.tsx
Here, the case is the attr *data-is-react-component*="..." that you declared in the anchor div in the PHP file
That's it, now you can save and check the rendered component (go to the author page and navigate to the anchor declaration location to see it)
#### 3, This example if you want to customize (develop) the author page
Currently, the author page is fully rendered by React, so if you want to develop anything further you can follow this tutorial
1. In the theme folder, find the file **theme/ncmaz/author.php**, and check the ***$PageArchiveDateProps*** variable, this is the variable that contains all the object props to pass into the react component ***PageArchiveAuthor.tsx***
2. Find the file **src/containers/PageArchive/PageArchiveAuthor.tsx**, this file renders the entire author page.\
3. In this **PageArchiveAuthor.tsx** file, you can take a closer look and customize what you want.\
Here, we use the global **window\.frontendObject** variable to check the settings in the *theme options*, and use **Graphql** to get the data and render them.
4. Customize and **save** and then you can see the change in your author page (open f12 dev tool and you will see react running)...\
\
Once everything is done, it's time to update the theme version and re-upload it to your hosting - remember to [run "yarn build" and re-enqueue](#1-install-node_module-and-enqueue-development-mode) and upload to hosting. You will need to update the version of both the theme and the **ncmaz-frontend** plugin.\
\
Hope can help. Good luck !!!
{% embed url="" fullWidth="false" %}
video - Ncmaz-frontend plugin project development
{% endembed %}
{% file src="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://nghiaxchis.gitbook.io/ncmaz-wordpress/how-to/ncmaz-frontend-plugin-project-development.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
