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.

Filter by
Sorted by
Tagged with
8
votes
2answers
6k views

Simple checkboxes with React

I was given the following exercise as part of a job interview process. I submitted my code and received the feedback that my solution is "close" but not "correct". My code executes just fine and ...
7
votes
4answers
638 views

Country Guessing Game

I'm learning React and I request you to review it. Preview it here ...
7
votes
1answer
3k views

React Native - Combining login and signup pages into one component

I have been building an app in React Native and have decided that since my Login and Signup components share much of the same ...
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 ...
6
votes
1answer
7k views

Unit tests for React component to submit an input form with validation

I'm very new to front-end/unit testing and have been having a difficult time understanding the point altogether, but I managed to push my way through testing literally everything I could possibly ...
6
votes
1answer
1k views

ReactJs stateWrapper for nested state objects

I made a simple state wrapper for a react project I am working on, so I can keep my state at the top component but reason about it at a lower class level. The example below is very simple, but it ...
5
votes
2answers
201 views

Calculator app in React

This is a simple calculator app that involves entering two numbers and allowing them to be editable and swappable. Calculations are done on the numbers, so the calculations should only be done when ...
5
votes
1answer
880 views

React typeahead component

In order to get a better grasp of React I decided to create a typeahead component. I'd really love some feedback on this in order to improve, learn or avoid mistakes regarding my code. I'm unsure ...
5
votes
1answer
144 views

React calculator

My company is going to make a big leap soon, and since we are currently still running on AngularJS 1.3.X we decided to make the switch to react for a myriad of reasons besides the obvious. Being the ...
5
votes
1answer
727 views

ReactJS app to add and validate items to a list

I wrote a sample app based on the ReactJS tutorial, and I would like some thoughts on how idiomatic this code is. Unfortunately there's no ReactJS integration with Stackoverflow snippets, but I do ...
5
votes
1answer
1k views

React app with table, search & pagination

I'm new to React. I major in Angular. And for me it's realy not so obvious here... Do I use this props & state variables in a good way or do I need to refactor/change something? Main goal is such:...
5
votes
1answer
1k views

React app for movie search, making AJAX call with input value from another component

I am building a movie search React app using themoviedb.org API. To make ajax call to pull the list of movies I need to get input value as a variable and feed to the url, but not sure how to fetch a ...
4
votes
1answer
499 views

Jest / Enzyme test for a React component to calculate average data speed

I'm trying to master testing. I struggle, conceptually, as to what should be tested. Is this Jest / Enzyme test sufficient for this react component? Is is too much? Are there better practices that I ...
4
votes
1answer
3k views

Class to create HTML heading tags in React

I have a class which is part of my page layout. It is creating header tag elements (h1 - h5). Could someone tell me how I could ...
4
votes
2answers
121 views

React.js calculator

I have a calculator (in React) and I wonder if the way I did is is good or what I could improve. I wanted to do it like the iphone calculator (you dont only see results when you press =) and I feel ...
4
votes
1answer
64 views

Reddit style comment chains in React

This isn't meant to be a fully-featured anything, isn't meant to involve any sort of api interactions. It's just meant to be a proof-of-concept of how I could implement nested reddit-style comments. ...
4
votes
1answer
3k views

React Exercise: Build a dynamic list application

Task Description: Create a div-element and take control over it using a Vue-Instance. Print an array of hobbies into the div-element. Provide some default hobbies. Add a 'New Hobby' button and a ...
4
votes
1answer
84 views

Tabby Cat - simple react app

I am new to ReactJS as a fun alternative to the old boring JS and for practicing I tried to make a sort of "tabby cat" app similar to the browser extension one (tabbycats.club) where you get a new ...
4
votes
1answer
88 views

FlightList application

The requirements are as follows: Create a Flight app service using React that does the following: Login page: When entering username: “user” and password: “password”, the user will be routed to the ...
4
votes
1answer
771 views

React component to list TV shows from a JSON result

I'm trying to rewrite my old project in Reactjs. As I am a beginner and this is my first app, I need some assistance in understanding what is the best way to do this in the React way and how I can ...
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
1answer
2k views

Building a multi-panel display with React and Bootstrap

The exercise is part of a React course in which I'm currently enrolled. Description: The way it shall look on desktop-screen: How it shall look on mobile: Here's my solution: HTML ...
3
votes
1answer
64 views

React setState function in useEffect

I'm toggling a state when the browser is resized: ...
3
votes
2answers
1k views

Filtered table in React.js

I am doing a filtered table in react, and I came up with the following code: ...
3
votes
2answers
157 views

Simple Kanban component

I am looking for some suggestions on how to make my code cleaner and simpler. Or put another way: more elegant and idiomatic. Any other comments on quality or anything would be appreciated. ...
3
votes
1answer
45 views

Code for printing list in React

Below is an implementation of a React app printing list. Are there any areas of improvement/suggestions in below code base ...
3
votes
2answers
199 views

Redux Recipe List

I made a simple React + Redux app which allows you to add and remove recipes to a list. Here are the user stories the app fulfills: User Story: I can create recipes that have names and ingredients....
3
votes
1answer
747 views

Analog clock in React.js, rendered using CSS rotation

I am new to ReactJS and I am trying to write a component which emulates an analog clock. The second, minutes and hour div elements are transformed every second using an interval function. However, I ...
3
votes
1answer
26 views

Babel code in React component to display tasks

I'm trying to think of ways to clean up this component in my app so it looks more readable to other devs. This is the best I came up with so far. It's not that bad, but I think it could be a lot ...
3
votes
2answers
419 views

Rendering plain text with paragraphs and line breaks as HTML

I have text inside a variable that I need to separate in paragraphs, and at the same time respect the manual breaklines. This is my code: ...
3
votes
2answers
84 views

React-based weather app

I am an experienced developer but pretty new to React. I wanted to go on my own and build a simple little weather app that updates the image, tempature, and description of each day when you click on ...
3
votes
1answer
300 views

Hover on list items to change map marker styling

I'm struggling to make a React/JS map I have more efficient. Essentially, I have a list of cards, and then a map of markers. When I hover on one of the cards, it changes the styling of the marker. ...
3
votes
1answer
192 views

Show 3d models loaded via asynchronous request

First I explain the data to give context: We have the following folder structure: ...
3
votes
1answer
561 views

React - Calculator App

I have just started playing with React today and built a simple Calculator app. Would someone please be able to advise on steps I could take to improve my code? Ideally, I want ideas on how to ...
3
votes
1answer
389 views
3
votes
1answer
2k views

Countdown timer in React.js

Code is a countdown timer. Should I keep this update function separate as is or can I save 3 lines of code and embed ...
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
208 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
76 views

Game of Life as a React app [closed]

I think the general functionality is there, but sometimes it looks a little slow/clunky when I try to run my app. Highlighting cells can be slow as it skips over some of the cells I hover over if my ...
3
votes
0answers
733 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
280 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
365 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 ...