React.js: My first 20 hours

I have listened to Josh Kaufman several times talk about first 20 hours to learn something new. So I have decided to try the concept for myself while learning React.js.

The first thing I did was to identify what are the main concepts in React. The most common ones I could find were.

1. JSX
2. Components
3. Props
4. States

The second thing was to identify good learning resources that would focus on learning these concepts.

I found 3 resources that I think are excellent according to my current knowledge of React which is none. Zero.

Getting Started with React

1. Getting started with React by Tania Rascia -Primary resource
2. React FreeCodeCamp -Secondary resource
3. React crash course by Brad Traversy -Tertiary resource

Day 1: Setting up Dev environment and Hello world

I spent day one creating a hello world create-react-app using my own index.js and app.js files. I also practised the Javascript import and export and understanding of how these two files talked to each other.

I was also able to create components in separate files and add the separate components to the main App.js file.

Day 2: Simple Components and Props

I spent 2 hours on simple components and props. I also spent an additional 15 minutes tackling challenges in Freecodecamp.

I made some notes while learning. Some of the things I learn are:

1. Simple components are React component made using a function instead of a class.
2. Props are properties. React uses props and states to handle data.

Day 3: State & review of props and components

Today, the plan was to tackle state in React. I was not feeling very confident in the props part of React so I reviewed my notes a little bit and then proceeded to the State section of Tania Rascia’s React tutorial I mentioned earlier.

I managed to go through the state section of the tutorial. However, at the end of that section, my code was not doing what it was supposed to be doing.

Once I clicked on the button, I got this error which I tried to solve to no avail.

I decided to pick the Freecodecamp curriculum(my secondary resource) where I left yesterday and solve some of the challenges. This way I can build up my knowledge well enough to troubleshoot this challenge. And that is what I did.

I was able to tackle 9 challenges involving props and components. These are:

1. Render a Class Component to the DOM
2. Write a React Component from Scratch
3. Pass Props to a Stateless Functional Component
4. Pass an Array as Props
5. Use Default Props
6. Override Default Props
7. Use PropTypes to Define the Props You Expect
8. Access Props Using this.props
9. Review Using Props with Stateless Functional Components

In total, I spent 2hours 30 minutes learning React today.