Examples of well written React app
I am new to React. I am looking for examples of apps written in React where I can learn the best practices. Like how to organize code, where to put different types of components.
A middle-size app with source code on github.com would be really useful.
Trending on Indie Hackers
I have not nearly as much experience building giant web apps, but there are a few mental tricks I can recommend to make it work as well as possible:
ADS sucks. You are limited by levels of abstraction. Atoms, molecules, organisms. What if your component should be more complex. This is unlogical to use organism inside another organism for example.
Thanks for pointing this out. It's something which I have been dealing with for a while now, yet I have not found a better way to organise this better. I'm currently at about 111 different components, and at that size even ADS starts falling apart. Though the amount of abstraction is great, I find great difficulty in organizing components for certain parts of the application. Atoms are almost always generic, though molecules are usually already targeted towards a specific piece of functionality.
Would an uniform naming system solve these problems, where a component is prefixed by the data model it uses? May be. Do you have suggestions on how to grow from ADS?
Thanks for the link. I will check it out.
I wish there was a good resource for this. You've probably already seen these:
https://reactjs.org/community/examples.html
https://github.com/enaqx/awesome-react#real-react-apps
https://reactjsexample.com
https://dev.to/gethackteam/5-examples-of-react-applications-to-learn-from-275b
It's been a while since I've tried researching good examples, but it was very difficult to find the right example projects that fit my needs. Most are either too simple or too complex. Also, I prefer plain JS (I don't use TypeScript) and hooks though reading TypeScript and class-based components isn't too hard.
Let me know if you find any good ones!
My main suggestion is to not over-organize your code. I see a lot of react app structures with too much boilerplate for beginners. Start with create-react-app and start with a simple folder structure like this in /src:
/components
index.js
index.css
Then add folders as needed as your app gets bigger. My medium-sized app currently has the following /src
/assets (for icons, images, etc.)
/components (everything goes here, no subfolders. currently have about 50 components which for me is quite manageable with no further organization needed)
/config (for Firebase and redux)
/constants
/dnd (for react-dnd)
/redux (I put action types and action creators in one file (e.g. databaseActions.js) and reducers in another file (e.g. databaseReducer.js))
/routes (react-router, public and private routes)
/styles (using bootstrap scss import)
/utils
index.js
But that structure evolved over time where I created new folders once I felt like things were getting messy and needed organization.
Also, I name my components like so:
ProjectPage.js
ProjectList.js
ProjectItem.js
ProjectAdd.js
All of this for me will probably change if/when my project gets more complex.
Hope that helps!
Thanks. The links are very useful. Where would you put non-ui components in your structure for example that are doing communication with your REST service?
"Non-ui component" is not really the right idea – components by definition generally render something. I think you mean where do you put your REST communication functions.
Assuming that your REST communication is async, you probably want to put that into a useEffect hook at the top-level component (e.g. <App/>). If you Google "fetch data with react hooks" you'll see some examples like this: https://www.robinwieruch.de/react-hooks-fetch-data
or this
https://www.valentinog.com/blog/hooks/
(If you're not using hooks, then the equivalent is putting it into componentDidMount in a react class component. But hooks are way better than classes in my opinion.)
If at anytime your function gets too long/complicated then you can create a separate file and put that in the /utils folder (e.g. /utils/restApiCalls.js) and import that function into App.js to use in your useEffect hook (or componentDidUpdate).
I personally use redux, so I put my async data calls in redux actions using redux-thunk. But I would not recommend using redux until your app gets sufficiently complicated that you need a more robust state management tool like redux. There is a bit of a learning curve and extra boilerplate for redux.
crossposting here:
Any react + firebase mentors willing to do a code review? Thanks.
I am in early stage of learning it while working on a new B2B concept and have found great, fast to digest, yet comprehensive material from Wes Bos, Brian Traversy and Reed Barger. Reed offers a hybrid cheatsheet/major tutorial to learn from. I like it to check progress.
https://www.freecodecamp.org/news/the-react-cheatsheet-for-2020/
There's a lot going on with React, changes the last few years have been massive but it seems to be getting easier to put the pieces of the puzzle together.
great link! Thanks!
I wouldn't worry too much about code quality if you're just starting out. Most of the knowledge for code formatting, best practices and patterns will come along the way as your building real-world applications.
Why am I saying this? I've had a scholarship classmate drop out because our professor would force us to run unit tests, code quality and coverage reports on basically Hello World-Apps for 4 semesters straight.
While the intention might be benign, it demotivated my once very motivated classmate because he was put on the spot for every little misplaced byte. After failing two classes he decided to pursue a different career. He now works in UX.
We have a middle-size codebase and we are planning to add more to it, before that I need to make it a bit more organized. I am looking for clues how to do that... but I agree with you :)