Freelancer service with great care and enthusiasm.

React

Displaying 1 - 11 of 11

React Resources And Reference, especially when integrating with Drupal

This article is a collection of important links and resources for React beginners and React experts who wish to integrate between them, It will include reference resources, links, images, and even media.

Please comment with every important link.

DrupalVIP technical notebook & support

Drupal Support

React

JSX

javascript

The form is one of the most-used HTML elements in web development.
Since the introduction of React, the way forms have been handled has changed in many ways.
In React, there are two ways to handle form data in our components:
The first way is the Controlled Component:
We handle form data by using the state within the component to handle the form data.
The Second way is Uncontrolled Component:
We let the DOM handle the form data by itself in the component.

Uncontrolled Component

Code Snippet

Controlled Component

import React, { Component } from 'react';

class App extends Component {
    state = {
        message: ''
    }
    updateMessage = (newText) => {
        console.log(newText);
        this.setState(() => ({
            message: newText
        }));
    }
    render() {
        return (
            <div className="App">
                <div className="container">
                    <input type="text"
                        placeholder="Your message here.."
                        value={this.state.message}
                        onChange={(event) => this.updateMessage(event.target.value)}
                    />
                    <p>the message is: {this.state.message}</p>
                </div>
            </div>
        );
    }
}

Props or properties in react are a functional argument by which different components communicate with each other.
Props is just a data/information that allows us to pass in JSX tags.
With the help of props, we can pass values like JavaScript objects, arrays or functions, etc.

DrupalVIP technical notebook & support

Code Snippet

import React from "react";

function Course(props) {
  return (
    <div>
      <ul>
        <li>{props.courseName}</li>
      </ul>
    </div>
  )
}

function App() {
  return (
    <div>
      <h1>Guvi Courses</h1>
      <Course courseName="Full Stack Development"  />
    </div>
  );
}

export default App;

All modern browsers come with an inbuilt fetch Web API, which can be used to fetch data from APIs.
In this tech article, I will to show you how to do fetching data from the JSON Server APIs.

DrupalVIP technical notebook & support

Code Snippet

import React, { useEffect, useState } from "react"

const UsingFetch = () => {
  const [users, setUsers] = useState([])

  const fetchData = () => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => {
        return response.json()
      })
      .then(data => {
        setUsers(data)
      })
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <div>
      {users.length > 0 && (
        <ul>
          {users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default UsingFetch

When you develop an application, you will often need to fetch data from a backend or a third-party API.
In this article, I will try to go through the process of fetching and displaying data from a server using React Fetch.

DrupalVIP technical notebook & support

Code Snippet

import React, { useEffect, useState } from "react";

function handleClick() {
    alert('You clicked node ');
}

export default function RWTaskIssues({nodeid}) {        
    const FetchAPI = '/rwtask/issues?task=' + nodeid + '&op=get';
    console.log("api fetch: " + FetchAPI);
    
    const [issues, setIssues] = useState([]);
    const fetchData = () => {
        fetch(FetchAPI)
            .then(response => {
                return response.json();
            })
            .then(response => {
                console.log("response data: " + response.data.items);
                setIssues(response.data.items);
            });
    };

    useEffect( () => {
        fetchData();
    }, []) ;   
    
    console.log("issues data: " + issues);
    
    return (
        <div className="block block-layout-builder block-field-blocknoderwtaskfield-rwtask-issue">
            <h2 className="block-title">תיאור הבעיה</h2>
            <div className="block-content">               
                {issues.length > 0 && (
                    <div className="field field-name-field-rwtask-issue field-type-text-long field-label-hidden field-items">
                        {issues.map(item => (
                            <div key={item.key} className="field-item" dangerouslySetInnerHTML={{__html: item.value}} />
                        ) ) }
                    </div>
                )}
                <button onClick={handleClick}>
                    Edit
                </button>            
            </div>
        </div>
    );        
}

DrupalVIP technical notebook & support

error on activating: npm run watch

DrupalVIP technical notebook & support

Module build failed: Error: Cannot find module 'fs/promises' on centos

This is a starter-kit or tips to ignite the use of react under Drupal

Code Snippet

import React from 'react';
import ReactDOM from 'react-dom';

let helloElement = React.createElement(
  "h1",
  { id: "greeting", className: "hello" },
  "Hello, World!"
);
let rootElement = document.getElementById("react-root");
ReactDOM.createRoot(rootElement).render(helloElement);

DrupalVIP technical notebook & support
Integrating React and Drupal can help you create an interactive and engaging user experience as a developer.
React gives a better user experience compared to jQuery, also when working with pop-up dialogs you will find that there are many issues with jQuery and Drupal some were not fixed yet.
Following I will explore all the tips and tricks for combining those two powerful tools.

Decoupled Architecture

Progressively Decoupled Architecture

Fully Integrated

Its time for a more powerful client-side with drupal, and we can do this with React

So, what is React and how can we integrate it with Drupal. I will try to answer both questions and more within this article.

React is a JavaScript library that makes it easy to create interactive user interfaces.

Drupal is a content management system (CMS) with a powerful web services API.

Web development teams across the world highly prefer AngularJS and ReactJS.
However, technical decision-makers, like project managers and development managers face the dilemma of choosing between the two.
As you will agree, every business has its unique development needs. Therefore, there is no standalone framework that would suit the varied development needs.
We’ve attempted to offer a detailed comparison to support the business processes.

Subscribe to React

The Freelancer Assistance

Review All Services

Buy Hourly Support

Drupal platform support for complex websites. The service includes support, training, troubleshooting, fixes, updates, tool creation and module building.
* Minimum order is for 5 hours of support
* For every 20 hours of order you will be entitled to an additional hour of support
* For every 50 hours of order you will be entitled to 5 additional hours of support

>> Payment <<