20 Lessons I Learned From Creating My First React App

Before I begin I just want to make it clear that what I write may not be true and only be applicable to myself based off my personality, background, temperament, attitude, etc.

Lesson 1: Web development is complicated, so be ready to get confused.

Complexity creates confusion - (paraphrased) Douglas Crockford

There is a lot to learn and being self-taught means that the most important decision to make is "What should I learn/focus on next?"

Documentation isn't enough because I've noticed that authors have to assert some level of prior knowledge on account of the reader. I heard Douglas Crockford say something along the lines of "Complexity creates confusion.", and web development is complex. It's the most complex thing I've endeavored to learn, which leads me to the next lesson...

Lesson 2: A mentor helps a lot.

One of my favorite books is Mastery by Robert Greene which illustrates a medieval apprenticeship model of learning that I prefer.

Luckily I have a friend who is a senior developer who is willing to lend his advice. Because web development is complex, it's much easier to just say, "My goal is _____. What should I do next?" Otherwise it's easy for me to waste time anguishing over what path to take.

Note: I have no preferences on any specific tool, language, or path. My friend suggested front-end web development based off my prior arts/music background. Others may be different.

Lesson 3: Don't get advice from too many people or sources.

Again, complexity creates confusion. Confusion has a negative impact on learning and productivity. In my experience it's better for me to make decisions from limited information without dragging it out and learn to live with the outcomes.

I may ask questions in huge forums, like Twitter, but I think it's better to limit the advice I consider.

Lesson 4: Don't spend too much time testing.

Testing got pretty difficult when I started to look at mocking data from API calls. It did not seem simple. I got advice from Vincent Tang to not spend too much time with testing. Back to lesson 3, I didn't ping 15 other people. I just stopped with testing as I had already learned the basics of Jest.

Lesson 5: Having so many different tools makes it easier to seek a solution in the wrong document.

Using create-react-app as a beginner, having made no React app prior, meant that I wast starting out with more tools. For example there is React.js, create-react-app, testing-library, jest-dom, and Heroku for my deployment. They all have documentation on certain aspects of development.

More importantly, I had no prior-experience with any of these tools.

For example, I found myself looking up deployment details on Heroku for Node.js apps. Later I learned there was different information from the create-react-app developer documents about deploying specifically to Heroku.

This caused confusion for me. The app seemed to build okay following Heroku's docs, but it wasn't clear which way was better or if it even mattered.

Lesson 6: Headaches are a sign I'm in over my head.

Jest's documentation on mocks was painful for me to read. I found myself not having the necessary prior knowledge to understand them.

I felt irritation, frustration, and pressure in my skull. This is not a good mental state for learning and waste of time. This is part of the reason I took a step away from testing.

Lesson 7: Programming -ahem- informs me if I am not clear on some prior foundational concept.

This is related to lesson 6. Bugs and sore eyes are the result. Time to move a level down.

Lesson 8: Sometimes the hardest decision is what to do.

I think I'm repeating myself? Web development is complex. It's important to me to know when to cut myself off from considering options and move forward.

My mentor suggested I just go to the school of hard knocks. There is nothing wrong with making mistakes. It's how I learn.
"Not doing that again. Jeez."

Lesson 9: It's easy to get lost in details and forget the big picture.

100% this being my main weakness. This is why feedback is critical for me. I have to tell someone what I am doing.

Lesson 10: People are capable of change.

By default I'm very methodical in learning and doing things. As I've become less afraid of failure, I'm noticing that with learning web development I'm a bit more 'jump right in' than I've typically been in the past.

Lesson 11: Don't run npm init with create-react-app.

This added entries to package.json that broke \%PUBLIC_URL%\

Lesson 12: Consider leaving configuration alone.

I tried following the install instructions for eslint configurations of react-testing-library and jest-dom. I just broke stuff and things didn't work. David K Piano suggested I leave the configs alone. That made things simpler and easier, which I learned later is the purpose of create-react-app.

Lesson 13: Check that the API serves over https://.

In the end I was unable to get my app fully functioning in deployment because of a "mixed content" error. I chose to drop an entire feature so I could finish and move on. Doh! This is what I'm talking about when I say "The harder the mistake, the better I remember."

Lesson 14: Having generalized project action steps would be great, thanks.

This is again about being clear on next actions. I'll be spending some time researching and creating a general project checklist template with a focus on keeping it simple, ie. no complicated project management tools.

Lesson 16: Starting a project from the basis of a tutorial can result in not being able to do something important later on.

I learned React first on FreeCodeCamp.com around the end of 2019. It teaches class components. My official decision to learn React is recent and someone suggested Kent C. Dodds' free beginners Egghead.io course on React using function components and hooks.

This course focused on CDN links to deliver react and react-dom with all of React happening in index.html as a static web page. Even though in the end I did not figure out how to protect my API key I did run into the problem that I could not access process.env within a static html file.

Lesson 17: Mocking an API call is hard and beyond my level right now.

There is a huge gap in my knowledge on how to make this work. My impression is that it has to do with understanding and manipulating back-end code. Knowing where I lack is a good thing because it tells me where to focus next.

Lesson 18: API integration may be good to be done before front-end code is built.

It felt clunky to be figuring out API proxy servers and such after having already built the front-end.

Lesson 19: Protecting API keys is not a simple task in React...at least right now.

Again, I think this has to do with my lack of knowledge in back-end coding since setting up a proxy server seems to be the solution.

Lesson 20: Creating a React app with a need-to-know strategy is okay.

There are many ways to learn. My default for learning has been to follow courses and tutorials top to bottom. Sometimes for me (not speaking for others), doing courses and tutorials too much is a sign of a fear of failure or making mistakes.

In this sense, learning piece-meal has been valuable on a personal level.

Thanks for reading!

If you're interesting in giving me feedback on my project I'd greatly appreciate it. You will find a working version, minus the API feature, on the codesandbox.