React is a JavaScript library for building user interfaces. It uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible.
1
vote
0answers
37 views
ReactJs Todo List push state [migrated]
I have written the start of a todo list in reactjs and was looking to improve the functionality of how the todos are added to the state. Currently I am concat(ting) the value in put to an array which ...
1
vote
1answer
41 views
React Smart and Dumb Components separation query
I have been working on React and would like to know best practices for separating smart and dumb components.
This example is a Parent controls state, but I have put the button UI in render. Should ...
0
votes
1answer
45 views
Using a destructuring assignment on a style object to extract two members
Recently, one of my colleague decided to destructure the React-Native styles object this way:
...
2
votes
0answers
33 views
Update state to render data in a form
I have a form which needs to display value in its input field initially. There is no post API used, only get and put. I could show the data initially by updating the state from the ...
0
votes
0answers
28 views
React.js with Ramda functions - hiding rather than removing from DOM
I would like to make this function more efficient. Currently, its performance is lacking.
From my understanding, for large list that is being kept locally - I may might be better doing ...
3
votes
1answer
46 views
Generic dataloader for redux-thunk using axios
I am developing an application where there are lots of async actions. I wanted to go with redux-saga but most have insisted to continue with redux-thunk. In redux-thunk, inside each action we have to ...
0
votes
0answers
33 views
An Mp3 player using React and Redux and the HTML5 web audio API
I built a simple MP3 player with React and now I would like to incorporate Redux to the app as it is getting larger and I feel Redux will help it to be more organized and efficient.
I was wondering ...
0
votes
1answer
46 views
React components to render two kinds of form elements
I have two React components. The only difference is the input tag vs select tag. I'm trying to move the bulk of the duplicate code to a higher order component but I can't wrap my head around it. Any ...
3
votes
1answer
56 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 ...
3
votes
0answers
53 views
1
vote
0answers
31 views
Frequency Checker
I am building a language analysis tool based on a library called nlp compromise. I am using react / electron / node apis for building the best I can but I am not sure whether I am following some bad ...
2
votes
0answers
99 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:
...
5
votes
1answer
186 views
A simple MP3 player with React.js
I've been learning React.js for the last few days and am working on a simple MP3 player. I have a few years experience with JavaScript, however, I am just trying to get used to the idea of components ...
4
votes
1answer
56 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 ...
0
votes
0answers
31 views
Friend search by user email > returns userID > gets user details
I'm in the process of learning JavaScript and React native and I've created a friend search feature.
I'd have to say the code doesn't seem very performant as I noticed the list doesn't always ...
3
votes
1answer
135 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
47 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 ...
1
vote
0answers
55 views
Subscribe to a newsletter with e-mail validation
This is my first unit testing and also my first React project. I'm coming from an AngularJS background, but in terms of testing, this is my first try.
I spent some time reading about tests and I got ...
1
vote
0answers
67 views
Todo application in React with shouldComponentUpdate and Immutable.js
I have been tinkering with a project I found on GitHub to learn how to use Immutable.js with React's own shouldComponentUpdate. The code works, but I am not sure it ...
2
votes
0answers
22 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
...
1
vote
1answer
21 views
Determining the state of matter for some substances
I am new to React and still getting a handle on props and state. I tried
to adopt the example of lifting state from
the React Docs
and add the feature of different criteria by liquid type for ...
1
vote
0answers
24 views
Point utilities in ClojureScript and Reagent
As one of my first "real" projects in Clojure(Script), I took one of the programming exercises from my Algebra II textbooks. The goal is to receive two 2D coordinates from the user and calculate the ...
1
vote
0answers
24 views
Create exact replica of react component with different name
I have a react native component called "width". It has 3 width values which have associated <TextInput>s which map to the redux store as
...
2
votes
2answers
137 views
Tic Tac toe in React
I wrote this tic tac toe game in react. I am learning react now. Feedback is welcome. I deliberately used single file, to focus on React and not other aspects.
...
2
votes
0answers
64 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 ...
3
votes
0answers
50 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 ...
0
votes
1answer
65 views
React props children with List and Spinner Loader
I have a custom component with a List. I need to know if this way is the best for show a Spinner while the fetch is working.
I'm using child props for that, but I ...
5
votes
1answer
66 views
A recipe box that adds, edits, and removes recipes
I made a recipe box with ReactJS. Please let me know what room for improvement you see. I did notice that with codepen, the list of components started to become lengthy to look at. Is it a best ...
3
votes
0answers
47 views
Simple Coffeescript React component
This was mostly taken from this boilerplate.
How can I avoid having to write out all the HTML elements I need in every file? Can I add some kind of constructor hook on ...
1
vote
0answers
70 views
Reset an input field after submission
i have some issues dealing with a simple case in my redux-react app: i want to reset an input text after an asynchronous operation ignited by a button.
Let’s say we have an input text in which you ...
1
vote
0answers
37 views
Checking an existing item doesn't already exist in my component's list of items
Here's a function in my PersonList component:
...
1
vote
0answers
37 views
Squares with different background colors
Titles is an array populated by numbers (1, 2 and 3). Depending on the number, a Square component should have a different ...
0
votes
1answer
50 views
React App that runs tests with varying (randomly generated) time lengths
I recently got a take-home project for a company hiring for front-end developers. The task can be found here.
I was given two hours to complete it, and did, but was told they wouldn't be moving ...
3
votes
1answer
675 views
Suppress console output from React in Jest testing output but not in browser output
I have a React app that I am testing with the built-in jest testing tools. In the process of debugging, I sometimes send data to the console (e.g. console.log, <...
0
votes
0answers
27 views
React componentWillReceiveProps check
There are two code snippets below. The do the same things, but they differ. Which one do you think is better (performance, readability, etc.)
1.
...
4
votes
0answers
128 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
2answers
642 views
Simple Tic-Tac-Toe game in React.js
I'm relatively new to react and attempted to create a simple Tic-Tac-Toe game. Would be great if i could get some feedback on this. Again, at this point using only React (no Redux).
main.js - main ...
3
votes
0answers
48 views
Filtering search results for apartment and car rentals
I am developing an app which is somewhat similar to airbnb. There are two search function, one for searching apartment and other for searching car rental. When searching apartment, the result page ...
0
votes
0answers
92 views
Conway's game of life in HTML5, Javascript and React.js
In my attempt to learn React.js library I wrote a simple game of life. Hereby here humbly I request for review of my code, especially of my usage of react.js. What should I improve, what should I ...
1
vote
0answers
272 views
React Redux quiz app
I started learning about React and redux recently and I created a dummy project based on drf-redux project and react-redux-quiz-game
This application uses Django rest framework for API and React with ...
1
vote
1answer
102 views
Login page without header/footer bars
I'm creating an app where the login page doesn't have the header/footer bars that the pages, after being logged in, would have. I've created an example that works, but I'm unsure if I am using the ...
2
votes
1answer
68 views
Immutable ES7 global state store
I am quite an experienced developer but I am quite new to JS/frontend/functional programming and I am working with react-native in my day-job now.
I'm trying to do my own flux implementation to ...
2
votes
0answers
56 views
Higher order component for verifying authentication
I am new to React.js. On the server side, I am using Passport.js for social authentication setting a cookie. With that cookie I am verifying on the client side with a higher order component (HOC). ...
5
votes
1answer
56 views
Component that reacts on data changed from the store
I have a React/Flux web app and want to follow the architecture best practices:
I will focus on one view for my question, the component used to insert/update an entity (a User in occurrence).
...
3
votes
2answers
48 views
Locale language reducer
I am learning redux by doing a small project. Everything is working fine, but I need to know how I can refactor such code. For this situation, it might be good to use ...
0
votes
1answer
67 views
1
vote
0answers
513 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
78 views
Filtering and hiding content with React
This is some filtering logic, according to a simple data set:
Hiding tags (entertainment types/genres) that no longer are relevant
Representing the tags on levels (according to "tagelevel")
Stopping ...
0
votes
1answer
55 views
Managing drag in React on-off component
I made a on-off switch to be more fluent in React and added touch functionality to it.
The idea is to have it independent of the state management library/logic, and be easy to import into a project, ...
8
votes
1answer
146 views
A box for comments
I made this as a practice application to learn React. It is simply a box where someone can enter their name and a comment and submit it, and display other comments. This animated GIF illustrates what ...
