In early 2016, I got so fatigued while trying to learn React that I almost gave up on being a developer. Impostor syndrome consumed me. Now, I am a full-time React developer and author of React.js for the Visual Learner.

How did I overcome impostor syndrome and finally learn React? There are a few reasons but one of the most significant ones was learning how to make pure CSS images.

Sinking Into Impostor Syndrome

In December of 2015, I graduated with a degree in Computer Science and wasn’t quite sure what in the world of development to focus on. After some exposure to entrepreneurial podcasts, I was fascinated by the fresh aroma of startups that had created revenue streams by making web applications. For that reason, I finally set a goal for myself to become a web developer.

As I researched modern web development, I realized that it was totally different than what I was taught in my formal education. My brief knowledge of HTML, CSS, JavaScript, and PHP looked totally different than all of these JavaScript frameworks that people were talking about. I saw a lot of buzz around React and decided to give it a shot.

Here’s a made-up conversation with myself that is accurate to the struggles I was experiencing in this pursuit:

Online Resources: React is what you want to focus on for creating user interfaces for modern web applications.

Me: Sounds great! What do I need to do to start a new React project?

Online Resources: Yeah. We can initialize our project with npm. Then, we just need to install and configure Webpack and Babel so we can write in ES6 instead of ES5. Then, we can install React and ReactDOM so we can start coding with React.

Me: Um. What’s ES6? Why do we need to use Webpack and Babel? Also, React and ReactDOM to use React? Is that a typo?

Online Resources: ES6 is a newer release of ECMAScript. It’s not well implemented in browsers but has some cool features that we can use. Babel processes the ES6 code and makes it compatible with browsers that support ES5. We can use Webpack to bundle our code and apply Babel. React is one library but you need to also include the ReactDOM library to make things work.

Me: ECMAScript? I thought we were talking about JavaScript. I’m not sure what bundling your code refers to. You know…this seems like a lot of work just to get started. What’s the benefit of React after all?

Online Resources: You can construct a user interface out of components that encapsulate JSX and data. It’s really modular.

Me: JSX?

Online Resources: Yeah it’s just JavaScript syntax for defining what you want your component to ultimately render as. It looks a lot like HTML…just use className instead of class.

Me: That kinda makes sense. Let’s carry on then.

Online Resources: Sweet. Let’s start by me showing you the code for a Hello World component.

Me: Looks kinda awkward at first but these components do seem like a cool concept. I mean that Hello World component wasn’t bad at all.

Online Resources: Great! I know you seemed a bit confused about creating a new React project. Don’t worry. There’s an awesome starter kit on GitHub that comes loaded with Webpack, Babel, and Webpack Dev Server. Go ahead and clone it.

Me: Woah. I have no idea what half of this code does. However, these components look familiar. I get the basic components, but why is their nesting of components going on?

Online Resources: Oh! That’s just because we can break up a view of a user interface into parent and child components. Then, we can pass data down between them.

Me: But there’s way more than a parent and child! There’s like a great great grandparent and great great grandchildren and the whole ancestral line in-between. What gives?

Me: You know what…don’t answer that. React is popular so it must be simple. I’m probably just dumb for asking so many questions. Clearly, I’m not fit to be a developer. I’ll give up on this attempt to learn modern web development.