ReactJS

Beginning ReactJS with TypeScript – Part III. Setting Up Local Workspace from GitHub Repo

13 Nov 2017 by ManishHPatil

This is the third part in the series, which will show how to setup the development environment for ReactJS with Typescript. This part will focus on creating a local workspace by cloning the GitHub public repository - react-typescript, created in the second part of the series.

Deploying a React app to Azure App Service - Tutorial and Lessons Learned

12 Nov 2020 by g96b10

In-depth instructions covering several headaches, and personal musings

Using a synology NAS for development?

4 Aug 2021 by OriginalGriff

With all the NAS's I've used, you can map a NAS folder to a virtual disk on the PC: I do it all the time with NASes. But ... using a NAS won't give you the same speed you do from a local disk - I get 500Mb/sec locally, and 35 Mb/Sec write speed...

Flutter

next.js

Can I post an article about new product?

2 Nov 2016 by phil.o

Here[^] you will find what you need about submission guidelines (especially the Tips section which seems to hold something relevant to your case).Kindly.

HTML

A Simple React-Flux Example Using ES6

30 Mar 2017 by Muddassir Mohammed

This article demonstrates how to implement a simple Flux workflow using React along with a working example.

Update State of a Component from Another in React

18 Nov 2017 by rohit7209

How to change state of child from parent, state of parent from child and state of sibling from another sibling

Docker Compose: Redis, Flask and ReactJS – Part 1

25 Jan 2018 by Philipp_Engelmann

How to set up and deploy web applications using Flask and Redis on the Backend, and ReactJS on the Frontend. Using Docker Compose, it will be very easy to start, debug and deploy this application.

Beginning ReactJS By Example

26 Jan 2018 by Shawn Lawsure

Learn ReactJS with a simple drop down UI element example.

Cant able to implement social login in react native

31 Oct 2018 by Janardhanam Julapalli

I have used react-native-simple-auth for social logins.My code is like import React from 'react'; import { AsyncStorage } from "react-native"; import firebase from 'firebase'; import { StyleSheet, Text, ScrollView, Picker, View, ActivityIndicator, ...

reactive

How to use nodejs and reactjs for andriod development

21 Nov 2018 by MadMyche

The bestest link is going to be Google 1. Find the simple "Hello World" tutorial at Getting Started · React Native[^] 2. Find credible sites with sets of tutorials advancing further

Android

React.js first application with .NET core 2.0

2 Jan 2019 by simpledeveloper

Hi I am working on react.js trying to understand a basic application first, here is the link that I am following: Tutorial (ASP.NET Core) | ReactJS.NET[^] I did ask question under the article but have not received it yet but I am trying my luck here too, if anybody has solved it already -...

ASP.NET-Core

MVC4

How do I paginate this page? Reactjs

21 Oct 2019 by Andy Lanng

Seems pretty simple: https://www.npmjs.com/package/react-infinite-scroller[^] I can't see any implementation of infinite scroll components in your code. 1: look at the examples on the npm page 2: include some simple pagination in your record fetch 3: keep track of what pages have loaded (a...

How to call .NET DLL using reactjs

15 Feb 2020 by Dave Kreskowiak

You don't. ReactJS code runs in the client browser, not on the server. Your .NET code runs entirely on the server-side.

.NET

Windows

Setup React and Redux Development Environment From Scratch

28 Oct 2020 by NitinShrivastava

Basic skeleton of React and Redux development environment for a book store application

How to make a button inactive in a form

25 Oct 2021 by Rustam Bagirov

I have a form with a transition to another page after authorization. I need the button to be inactive until the number of characters is not enough. type User = { � name: string; � password: string; }; function Login() { � const adminUser:...

How to create a react app project inside a solution in visual studio

2 Nov 2021 by phil.o

Here is a tutorial to create a React web app over Node.js with Visual Studio; no ASP.NET involved. Create a Node.js and React app - Visual Studio (Windows) | Microsoft Docs[^]

ASP.NET-Core

Visual-Studio

Payumoney bolt launch method in react js

23 Feb 2022 by OriginalGriff

Never, ever, accept code from a insecure website to handle anything to do with real money. You do not know who is giving you the code, you do not know what it does, you do not know that it places the monies correctly into the appropriate account,...

Validation error when I post data in mongodb using node

16 Apr 2022 by Mr Dev 2022

const [input, setInput] = useState([]); change this code like this. const [input, setInput] = useState({});

MongoDB

How to add / pull HTML data to a javascript object ?

13 May 2022 by Member 15627495

Hello Damianroiz ! as far as I understand your request : you want a "notification feature" , am I right ? when users click on one only grid box, a notification will appears. isn't it ? to achieve this feature : - define your container with...

How to divide array in different consecutive sequences

8 Jun 2022 by Dougy83

Have a look at the splice function. let arrnew = [0, 1, 2, 3, 4, 5, 6, 7, 8, 12, 13, 14, 15, 17, 18, 20] ; let arr2 = []; for (let j = 0; j

How to reduce size and width of an image in react component?

25 Jun 2022 by Richard MacCutchan

You can use the relevant attributes of the HTML img tag[^].

image

Which is best for speed applications angular or react on ui ?

6 Oct 2022 by Dave Kreskowiak

Your question is un-answerable. You haven't said anything about what you're doing on the "front end" and why speed matters at all. Most web applications, unless you're doing large amounts of processing on data in the browser, do not care about...

Angular7

angular-cli

As I'm learning react and trying to build a Facebook clone, I have been experiencing minor errors within a few classes

7 Dec 2022 by Graeme_Grant

Warnings are not errors, they are there to assist you. If you don't require those variables, then you can usually tell the linter to ignore them. Here is how from the eslint documentation: Ignoring Code - ESLint - Pluggable JavaScript Linter[^] ...

Delaying event listener from firing an event?

29 Dec 2022 by medium block

I am developing an app where on mouse wheel up and down navigates the user to different routes in the App. I also have animations corresponding to which way the user scrolls: when scrolling down the next route will intialize from below and the...

React fetch API returning index.html file?

25 Jan 2023 by Afzaal Ahmad Zeeshan

Quote: its returning my react index.html file That happens when your server is unable to route the request to the proper router to handle it, and provide a response. If you can debug your server (if you are developing it at the same time!) you...

Sharepoint Framework (SPFx) Large List Webpart using React & Office UI Components

20 Mar 2018 by Santosh Anniyappa

SharePoint framework webpart to retrieve SharePoint list items using React & Rest API and display the results using details DetailsList Office UI fabric component

How to Create a Code Editor in React and ChakraUI

2 Jun 2023 by Glenn Viroux

A step-by-step tutorial on how to implement your first code editor in React

I cant delete data from fetch in react.

14 Jul 2023 by Andre Oosthuizen

The problem lies within your 'removeElm' function when you try to laod 'userid - the path to 'demo/users is not found and thus no 'userid' is returned. Some steps to try and find the reason why the file is not found - 1) Make sure your localhost...

MongoDB

Setmystate is not a function

20 Jul 2023 by Andre Oosthuizen

Laravel and React not one of my strong points. You need to explicitly pass the 'setMyState' function down from the parent component to your 'ProductsMy' component - Using a function in `setState` instead of an object[^] Remove the '{children}'...

PHP

Laravel

Edittable field in reactjs

30 Sep 2023 by Graeme_Grant

This is a very common, so there is lots of documentation, tutorials, and examples on this. Here is a Google search with many answers for you: react working with the input field - Google[^] Here is the official documentation with examples:...

HTML5

Edittable field in reactjs

30 Sep 2023 by OriginalGriff

Quote: bro plese send solution in this code While we are more than willing to help those that are stuck, that doesn't mean that we are here to do it all for you! We can't do all the work, you are either getting paid for this, or it's part of...

HTML5

I want to show country dropdown and state dropdown based on selected country and show city dropdown based on selected country and state

CORS issue when making OIDC login requests from react frontend to express backend (BFF approach)

28 Sep 2023 by Richard Deeming

res.redirect(authUrl); Your AuthPage endpoint is redirecting to https://sso-Myauthserver.com/as/authorization.oauth2. You would need to set up the appropriate CORS headers on that site to allow your JavaScript code to connect to it. However,...

10 Nov 2023 by Maciej Los

Start here: Create Cascading Dropdown In ReactJS[^] This all what you need (country->state->city)!

How to get recurring auto payments from the NMI payment gateway using webhook API endpoint in MERN

22 Dec 2023 by Richard MacCutchan

As your problem is specific to the NMI system, you should use their help forum.

Auto-increment logic on button "hold" causes infinite loop/freeze

24 Sep 2015 by Member 12009559

Hi everyone,I'm currently trying to implement a button long-press/hold for both mouse and touch events so that you can simply hold the button and have the component just keep increasing the element value until you let go. I'm not sure why, but even setting the state out of the loop logic, it...

How to output a comment with ReactJS

9 Oct 2015 by Super Lloyd

I am trying to improve some knockout code I have with JSX, defining the template inline with JSX.I would like to output HTML comment, as in:

Knockout.js

15 Dec 2015 by Member 12187094

Hi, I´m a student and my PC broke down and I can´t afford to fix it at the moment. So what i have at the moment is:Pentium4 1.5GHz640MB RAM 20GB HDWindows XP SP3Can I install React Native somehow? Am not experienced with packaging managers. Tried to install React Native, but does...

15 Dec 2015 by OriginalGriff

To be honest with you, I wouldn't even try: VS 2008 on it's own has a minimum requirementsof: 1.6 GHz or faster processor384 MB of RAM or more2.2 GB of available hard-disk spaceBut I wouldn't even think of running XP in less than 1GB, and preferably 2GB. And that 20GB HDD is going to...

15 Dec 2015 by Sergey Alexandrovich Kryukov

Well, this is a tough case…Even old not-so-good Windows XP along makes little to no sense of such configuration. I think Linux would be much better choice, and even not just Linux, but better some really lightweight distro. Most likely, you would want it with desktop environment and...

15 Dec 2015 by Member 12187094

Hi, thanks for the responses. Perhaps my tag "ReactJs" is misleading, Iused it because there is no "React Native" tag defined.React Native is normally installed with npm, which during installing uses node-gyp, which on Win has Visual C++ compiler as dependancy. React Native seems to do a...

21 Dec 2015 by Member 12187094

Hi again, istalled Lubuntu as recommended and works fine on the old pc. Built the React-Native and dependencies libs (on linux you can use gcc for node-gyp)and managed to build release APK for Android, just in case anybody is interested regarding really old PCConcerning WinXP SP3 on the PC,...

Getting Started with React

20 May 2016 by Eric Greene

This post serves as an introduction to a series of blog posts on how to build components with React.

Create a login authentication page in react.js

22 Feb 2017 by Graeme_Grant

Have you looked on Google Search? I can see many helpful examples for you: react.js login page[^] like:* Tutorial: Build a React.js Application with User Login & Authentication | Stormpath[^]* 58 ReactJS Examples, Demos, Code[^]

MongoDB

What should I learn before start angular js and react js?

30 May 2017 by Patrice T

Quote: what should i learn before start angular js and react js. what are the concept , language etc that must be clear to start angular and react ? Since you didn't tell what you already know, a good tutorial site about what you need to master to build web apps. W3Schools Online Web Tutorials[^]

AngularJs

Sencha ExtReact: The Most Complete Set of React Components

18 Jul 2017 by adwankar

ExtReact gives you the most complete set of components for your React apps in a single, commercially supported, and professionally maintained package. Let’s take a look at what’s inside.

How do I display a tooltip if a digit is entered in my textinput component- reactjs es5?

18 Jul 2017 by arunkx

My textinput component is given below: const React = require('react') module.exports = (props) => { return ( props.onBlur(props.fieldName, e.target.value)} ...

ECMAScript

How to resolve aliases defined for paths when unit testing reactjs components

26 Dec 2017 by bbirajdar

Dear Community I have a React JS application with a set of components. Some are simple components which render HTML whereas others are nested components which use other components in it. Here is the example - Header.jsx component uses the HtmlRow component referenced by a alias.

Karma

testing

Docker Compose: Redis, Flask and ReactJS – Part 2

31 Jan 2018 by Philipp_Engelmann

Redis, Flask and ReactJS – Part 2

Show bootstrap modal with custom title using react JS

5 Feb 2018 by demouser743

Hi all I have my working code here what all I need is I need to assign custom text, here is the code pen for the same.What I need is I would like display the username in the header section can some one help me What I have tried: A Pen by Dorababu[^]

How to integrate react js in visual studio

5 Apr 2018 by Member 11551853

I am beginner in react js frame work, and i have experienced in visual studio .ney mvc frame work,i have learn to integrate a react js in visual studio environment. What I have tried: Please tell me how i will integrate react js in visual studio environment.

reactive

How to create a searchable dropdown in reactjs

8 May 2018 by nishac189

Hello, Can you please help me to create a searchable dropdown in reactjs. Eg-I can enter a keyword in dropdown box and it should display only matching suggestion. Using reactjs What I have tried: I have tried using jquery. create a dropdown component but not getting how to combine that with...

React call a component with onclick

11 May 2018 by Ali Javani

Hi all great programmers thanks for reading my question. My problem in react language is I want to call another component by one click. if you see code I have provided the necessary explanations with //******* class CategoryList extends React.Component { constructor(props) { ...

jQuery

Cell click handle in react-table

25 May 2018 by Ali Javani

in need handle click with current row data in react-table What I have tried: Cell: ({ e }) => ( { debugger; console.log(e.cn); console.log(e); console.log(c) }}> Users ) all results is undefined !

Reactjs environment setup

28 Jul 2018 by Member 13929033

> reactapp@1.0.0 start C:\Users\jmwan\Desktop\reactApp > webpack-dev-server --hot The CLI moved into a separate package: webpack-cli. Please install 'webpack-cli' in addition to webpack itself to use the CLI. -> When using npm: npm install webpack-cli -D -> When using yarn: yarn add webpack-cli...

React-native run-android failing on windows?

20 Aug 2018 by Josh415

-----Environment--------------...

reactive

How to read the current URL in the react application

23 Aug 2018 by Member 13959279

I would like to read and print the current URL in the react application. Right now i am using "window.location.pathname" to read the URL but would like to know if there is a better way or some react way to read the URL What I have tried: window.location.pathname to read the current Screen URL

Typescript

Problem in setting up the react native environment

10 Sep 2018 by Janardhanam Julapalli

Unable to resolve module `AccessibilityInfo` from `C:\Users\v89\awesomeProject\node_modules\react-native\Libraries\react-native\react-native-implementation.js`: Module AccessibilityInfo does not exist in the Haste module map. This might be related to...

Problem in setting up the react native environment

10 Sep 2018 by Janardhanam Julapalli

react-native init ProjectName --version 0.55.4 This worked for me!

How to use nodejs and reactjs for andriod development

21 Nov 2018 by Member 14062481

I want to start building Android Apps, I'm from web development background switching towards Android. I love Javascript frameworks and that's why I want to start building android apps using NODEJS and REACT NATIVE. Is this possible to build android apps with the above techs,if so what are the...

Android

How to show error message when someone leave empty fields

13 Jan 2019 by Member 14065457

I want to add Error Message in my form. Currently i am working on ReactJs and i am absolute new new to reactJs i used ant-design form and form is already validated but did not show error message in text when someone leave empty fields . Please help me out because i am really stuck . Thank You...

Check the render method of `customnavbar`.

31 Dec 2018 by harristars

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of...

npm

How to show error message when someone leave empty fields

13 Jan 2019 by Bohdan Stupak

A quick glance tells me that your import statement is wrong as you should also import Form from antd. And also looks like you should use Form.Item instead of FormItem There might be more errors so I suggest you to verify your code against this demo which has required functionality

Form builder application with wizard multiple steps in react js

7 Mar 2019 by Member 10498742

I am developing a form builder application in react js and want to integrate a wizard feature in it. Wizard should be dynamically add the steps. please suggest me how can i achieve this feature in react js. What I have tried: i googled but didn't find required link or information about this.

Ihealth lab pub notification

22 Apr 2019 by Gerry Schmitz

You skipped step 2: Quote: Have our user authenticate and authorize your application with iHealth. Step 3: Quote: Make requests to our API Endpoints with your authenticated OAuth credentials.

REST

I installed create-react-app and not able to change folder structure.

8 May 2019 by jatinp510

After installing create-react app I want to modify my files. Despite various attempts I am not able to delete various files properly and can't modify folder structure of my react app. Please help me . Error shown in visual studio is : Error : EPREM : operation not permitted, unlink...

Cant display data using the reactjs

26 Aug 2019 by Kioshilol

How i can display my data using the reactJS? what i did wrong? What I have tried: Controller public class EmployeeController : Controller { private IUnitOfWork _dataBase; private IMapper _employeeMapper; public EmployeeController(IUnitOfWork...

ASP.NET5

Cant display data using the reactjs

26 Aug 2019 by Afzaal Ahmad Zeeshan

This kind of problems arise normally in React, nothing to worry about. I have modified your code a bit, and ran in my own environment and it works just fine. Here are a few of the suggestions I want to make in order to correct your React code. First of all, JSX needs to be wrapped in small...

ASP.NET5

Pull file from client machine folder

28 Aug 2019 by kedar001

In my application, file editing is done using a shared folder on server. but which is a security risk. is there any other way to edit Microsoft word file. or is there any way to upload file from downloaded folder or any temp folder from client machine without user interaction using any...

Pull file from client machine folder

28 Aug 2019 by Afzaal Ahmad Zeeshan

Quote: file editing is done using a shared folder on server. but which is a security risk. It will be a security risk as long your users can edit the files anonymously. You must try requiring them to login before they can access the resources and suddenly this will be a beautiful feature in your...

Problem with react routing ASP.NET MVC

19 Jan 2020 by Kioshilol

I can’t do routing, nothing is displayed on the page, what could be the problem? just a blank page What I have tried: Employee.jsx its must display on index page Employee.jsx (Candidates такой же почти) import React from 'react'; class Employee extends React.Component { ...

ASP.NET

Can't understand why map() is not a function

3 Sep 2019 by ZurdoDev

This has been answered on StackOverflow, javascript - Can't understand why map() is not a function - Stack Overflow[^]

Storing the web api urls for a react or reactredux application

20 Sep 2019 by simpledeveloper

Hi, I am developing a React Application, I could able to finish the development part for the application almost, now there is one problem that I facing where should I store urls of the Api calls that I making - any help would be greatly helpful, any suggestion, a code snippet or even a link...

Problem with checkbox onchange on react JS doesn't work properly

23 Sep 2019 by Member 12426018

hello everyone! Don't me judge too hard. I am pretty new on using React JS. I wrote some code using React JS, but the problem is that checkbox isn't working on Front-end side. It doesnt have an issue on backend side i.e. everything is being changed on Database if user clicks on the button. ...

How do I paginate this page? Reactjs

21 Oct 2019 by Member 14628534

I've been given a task, from my tutor, to figure out how to paginate the following code, and to use whatever resources I have to figure it out. Using ReactJS, to develop a web application. What other files do i need? I'd love to have a sort of infinite scroll feature, but even if it's just...

How to trace angular app to know which component is executed when do some action ?

18 Nov 2019 by ahmed_sa

I work on angular 7 project integrated with asp.net core 2.2 API this Angular project done by another persons and i dont know any thing on project I need to modify left side menu and what component called when click on any item on menu but i need any tools or any thing help me to show...

Angular7

How to trace angular app to know which component is executed when do some action ?

18 Nov 2019 by Mehul M Thakkar

I would suggest first start with angular basics and how to debug the angular app. Read about Components, Directives, Templates, Routes. https://medium.com/@vamsivempati/a-guide-to-debugging-angular-applications-5a36bd88b4cf[^] This link will help more how to debug the angular app. There are some...

Angular7

Proper way on how to install and add an audio file in react native?

13 Dec 2019 by Richard MacCutchan

Sorry, but this site does not provide code to order. And the expression "but it doesn’t work" tells us nothing that would lead us to suggested solutions.

react-native

Proper way on how to install and add an audio file in react native?

13 Dec 2019 by Afzaal Ahmad Zeeshan

Quote: I’ve installed the npm install --save react-audio-player but it doesn’t work. It would not work on its own. You have to configure the project to run properly, and also make sure that you are using the valid file types. This package react-audio-player uses the native tag to...

react-native

How to enable clients to change payment method in-app? . We use stripe.

9 Jan 2020 by ZurdoDev

You need to contact stripe and/or read their documentation to see how you can update data that they have stored. They have a lot of documentation, https://stripe.com/docs/api[^]

payment-gateway

How to enable clients to change payment method in-app? . We use stripe.

9 Jan 2020 by Sanwar ranwa

check stripe document carefully https://stripe.com/docs/payments/payment-methods[^]

payment-gateway