Questions tagged [jsx]

JSX is an open source programming language, or an AltJS with classes and static types. The source code is compiled into JavaScript which is highly optimized.

60 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
7
votes
0answers
4k views

React Native - Rendering different scenes based on application state

I am using react-native-router-flux to organize the routes for my application. Using Firebase, I am able to call ...
4
votes
0answers
78 views

React - pomodoro clock

I'm looking for some feedback on a pomodoro clock that I recently wrote with React. I'm pretty new to React and coding in general. I followed a couple of online courses, but I'm mostly self-taught. ...
4
votes
1answer
127 views

React component that plots d3 graph

Edit: if there's a better way to make this reproducible, please let me know. I can create some dummy data and put this in a codepen, but that wouldn't really reflect the interaction with React that's ...
3
votes
0answers
32 views

Prettified GridView: is this JS code concise?

I been writing code for my company for years and there is never any constructive criticism for what I do. I am the only developer here and I would appreciate your opinion on this web page I made. It ...
3
votes
0answers
21 views

React.js component to lazy-load image

I'm trying to design a better solution for img srcset with lazy load. Below is the code from the component responsible for lazy load img, maybe someone has a better way to achieve this effect. Full ...
3
votes
0answers
66 views

Reusable grid layout for React.js

I have taken someone else's HTML and CSS code for grid layouts and reactified it. When converting the code to React, I tried to make it as simpler. I would like to learn from community, if any ...
3
votes
0answers
211 views

First React App: ToDo list

This is my first attempt at React and I don't want to pick up any bad habits for the long term. The code is adopted from a example app, but I have added a fair amount of new features. I.e. Clicking ...
3
votes
0answers
736 views

React native circular progress view

This is a functional component that I have developed in React Native for creating a circular progress view. The code does not use any external libraries, just pure CSS. Article that I wrote while ...
3
votes
0answers
282 views

Form validation for the last name

I created an example of a simple form for a last name input in React, where I can check the validation of the data at the time of input. The last name should contain only small and capital letters. If ...
3
votes
0answers
3k views

React component: click to edit text

I am an experience backend programmer wanting to bring my frontend skills up to par. (My js experience up to this point is mashing things until they work rather than structured frontend applications). ...
3
votes
0answers
369 views

Timepicker React component

I have developed a simple timepicker component. I did this only for learning and getting more familiar with reactjs. The feature this timepicker will have a) Select time in AM and PM b) Convert am/...
3
votes
0answers
2k views

Routes requiring authentication in react

I'm looking for a way to do some route protection with react-router-4. Looking at an example in the documentation, they create a Component which is rendered like this: ...
3
votes
0answers
509 views

React Tic Tac Toe

This is a project that grew out of the React Tutorial and is one of my first efforts at solving React problems on my own. There is a lot of code here and I am sure that there are more concise ways ...
3
votes
0answers
372 views

React component with conditional form loading

I'm remaking an existing application into a single page application. I've created this component to take the place of multiple pages in the previous version. It shows a form with disabled data about ...
3
votes
0answers
38 views

A 'top 100' app that displays list of users ordered in two different ways

I built a small app that gets data from a remote json file and displays it in a list of users. In each list item, an image of the user, their name, and their points tallies are shown. The list is ...
2
votes
0answers
25 views

Method to hide/show table columns with React/JSX

I am writing a function inside of a React component to hide/show columns in a table. The table is generated from an imported config object containing objects which model the column data. We render by ...
2
votes
0answers
25 views

Access object in an custom attribute efficiently

Im trying to access the attribute directly in the parent component, that why Im using the ref method. here an example of why Im trying to achieve: https://...
2
votes
0answers
21 views

Grouping and displaying people by political demographics

I have a function that sorts and groups items inside an array and then adds a corresponding jsx element to the page. I've already refactored it from 100 lines of code to 44, but I'm sure that its ...
2
votes
0answers
193 views

Tic-Tac-Toe with React hooks

I have found similar posts which has some optimizations on Winning-checking logic: React Tic Tac Toe My primary focus for this post is about hook setters being ...
2
votes
0answers
55 views

Textbox validation component

My intention is to have a component that serves as a textbox wrapper and able to set the error state, error message, and allow the parent to pass a function that sets its local error as I did not see ...
2
votes
0answers
100 views

ReactJS Typewriting animation

One of the dream idea to build typewriting in ReactJS. The code seems to be working, still there are something looks not that great in the code 😔 Looking for better solution (best practice) in the ...
2
votes
0answers
55 views

Markdown Previewer app done in ReactJS

What do you think of my markdown previewer, which uses the marked library? I'm asking because I'm new to React. And also what do you think of app itself? Did I use React correctly and properly? HTML: ...
2
votes
0answers
613 views

Two-player Tic-tac-toe game in React.js

I followed React Official Tutorial and before implementing time travel, I wanted to add a "New Game" button, and a LockBoard method that graphically prevents further inputs. Since I'm new to React, ...
2
votes
0answers
105 views

Implementation of CRUD todo list

We have a todo list, which by default holds two of them. The newTodo means what has been recorded in the input form to be the next todo to be added. needsUpdate and idOfTodoToUpdate are used to handle ...
2
votes
0answers
212 views

React.js calculator with memory function

One of the first React project which is building calculator with memory function. Could you please have a look is any changes should I make. I would be great if you can suggest some best practice ...
2
votes
1answer
317 views

Simple blog using react redux react-router

I've implemented the logic of my app, but I'm not sure whether it appropriate way or not. Task: create a react app using redux, react-router v4 which has a page with a form for adding new post and ...
2
votes
0answers
172 views

Applying CSS styling based on different pages in React

Short Story: I created this website last year in plain HTML, CSS, JS which I can't even remember how I wrote that and now I can't even edit the website without breaking it. So, I'm re-writing ...
2
votes
0answers
723 views

React app with paging

I want to create react app with paging, which will keep state on page reloading. I'm using react-router-dom and my own Paging ...
2
votes
0answers
56 views

Task-List: Adding, updating and deleting tasks with CSS animations

I would really like to improve, so any feedback is so appreciated! Tasks.js ...
2
votes
0answers
149 views

Personal resume and project site using React

Recently, I enrolled in the React Fundamentals course by Tyler McGinnis, and afterwards, I decided to rewrite my personal site to entirely run with ES6 React. Since I'm really new at this, I was ...
2
votes
0answers
1k views

Small camera app in react-native for Android

I'd like you to help me review a small camera app. Most of the code comes from here; I just changed it a little bit. I started dabbling with react-native for the first time. It seems kinda neat but I ...
1
vote
0answers
28 views

Beginner React App - handling different components with the same variable

I've made a simple app that shows if the term entered into the search bar is present in a number of common English words. This is the stackblitz: https://stackblitz.com/edit/react-mostusedwords Note ...
1
vote
0answers
32 views

Allows the use of Redux to manage the state of a grid with the Kendo React Library

I wanted to use Redux to manage the state of my KendoUI components such as the grid. The online examples from Telerik do not seem to contain clear information on how to do this, so, I started to ...
1
vote
0answers
14 views

React tabbed template

I made this simple tabbed app template and one thing in particular I am not sure about is my creation of a pageMap object. The thinking behind it is that you can ...
1
vote
0answers
22 views

Propagating data in React

I'm learning React recently, but I've been having some issues regarding propagating data from component to component. My general situation is: I have a textarea ...
1
vote
0answers
767 views

Implementation of Private Route with Auth using react-router and Context API

I'm trying to implement safe routes and checking if the user is authorized using only Context API. I'm also trying to avoid that the user can see a PrivateRoute, ...
1
vote
0answers
724 views

React Hooks conditional in useEffect

I'm starting using hooks, and I have a specific scenario that I'm thinking useEffectis appropriate for. Essentially what I'm doing is: I have some ...
1
vote
0answers
30 views

Conditionally show various video panels

The use case that this code tries to meet is There will be an interview session where the video calling is done between two participants, interviewer(ER) and ...
1
vote
0answers
844 views

Stateless tooltip component using React hooks and ref

What I'm trying to create is a generic tooltip component that I can use anywhere. I decided on a stateless component and the use of hooks and ref. Explanation 💡 Hook, because I wanted to have a ...
1
vote
0answers
13 views

ReactJS code that allows at most one profile pic to be selected

I am making a profile picture selection screen, basically you select a picture pic1, if another picture pic2 is selected, then we cancel the highlight of pic2 and highlight pic1. Here is my code right ...
1
vote
0answers
50 views

React context API design pattern

I created a boilerplate from react-boilerplate. I have removed redux and immutable for use context API and ...
1
vote
0answers
397 views

React Native app screen for booking appointments

I've been building a two-sided (both clients and service providers would use the app) appointment booking app. This is a screen from which a service provider can confirm their profile after having ...
1
vote
0answers
27 views

In React/Redux, fetch a list from a server and create a randomized subset with lifecycle methods

This is my first React/Redux project. I'm pulling down a list of Google Fonts, then displaying a list of 3 randomly selected ones. I want the list of random fonts to be populated automatically after ...
1
vote
0answers
869 views

React + Django (session) authentication

Is authentication implemented correctly? At the entry point to the app, which is App.js, query the Django server, which responds whether the current user is ...
1
vote
0answers
164 views

React form to add contacts to an app

I was recently building a form to add contacts to a play app I'm making and I finally got it to work. The problem is I'm not too happy with it. It's my first time building an application with React, ...
1
vote
0answers
2k views

React: Simple Event Emitter on form example

I decided to study EventEmitter and play around with it in React JS for on example of a simple form. I built EventEmitter and added event 'newdata' to it. On event 'newdata' is called function where ...
1
vote
1answer
8k views

onChange vs onKeyPress for input in React

I have an input form, and when you press enter I want it to call a function. I was wondering what "the right" way of doing this is. Right now I have an input looking like this: ...
1
vote
0answers
61 views

React.js MVC to-do app

I'm getting started with React, so I made a very simple unstylized app on CodePen. I don't know if I'm using some bad practices/patterns, so I'd like some advice https://codepen.io/towc/pen/...
1
vote
0answers
477 views

Simple React Open Weather Application

I'm a new developer looking for some code review for my ES6 React Weather Application, want to learn from my mistakes and make sure I'm not picking up any bad habits. Anyone interested in pulling my ...
1
vote
0answers
40 views

Rendering two logos in a React search component

Using React.Perf I found that there are few bottlenecks in the render code of one component from the big React app (look at the numbers 1 and 2 in the code below). For sake of simplicity I stripped ...