Learning React - Week 1

This article originally appeared on stef.ninja

Today I'm starting a 30-minute challenge. I will commit 30 minutes a day to learning React via the React for Beginners Course written by Wes Bos.

Side Note: This is by far one of the best courses I have ever taken. Go and get it. Now.

Day 1: Development Environment

Setting up my development environment & going through the starter files.

This included:

• Ensuring my node version is up to date.
• That I have a ES6 syntax highlighter set up for my text editor (language-babel for atom).
• Installing the React Developer Tools extension into Chrome.
• Forking the starter file github project.
• Introduction to 'create-react-app'.

We also went through an introduction to React Components and how the Props, State, & Context relate to these components.

[Video 1: Introduction, Tooling & Editor Setup & 2: Thinking and Understanding React Components]

Day 2: Components?

Creating my first component. This included:

• Creating a new 'StorePicker.js' file in the components directory.
• Importing the required dependencies
• Creating a class & returning JSX via render().
• Importing the new component that I just created into the 'index.js' file.

My files now look like this:

index.js:

import React from 'react';
import { render } from 'react-dom';

import StorePicker from './components/StorePicker';

render(<StorePicker/>, document.querySelector('#main'));

components/StorePicker.js

import React from 'react';

class StorePicker extends React.Component{
  render() {
  return <p>Hello</p>
  }
}

export default StorePicker;

This basic implementation seems pretty straight forward. I like the use of the es6 class and the basic requirements to always return at least one method (render() in this example).

[Video 3: Creating our First Components]

Day 3: JSX

The problem: Writing HTML in JavaScript sucks.
The solution = JSX.

The first step is setting up my text editor (Atom) to use the Emmet Plugin installed. This opens up access to Emmet shortcuts that make writing JSX approximately 948% easier.

I used this Atom Editor Tutorial to run through a quick explanation of what Emmet is & how to use it: https://www.youtube.com/watch?v=BQurqKG6nGY

Quick note: the default Keystroke to expand the abbreviation in a JavaScript file is 'ctrl-e' not 'Tab' as used in HTML.

Back to learning the intricacies of JSX and how it works with React.

Things to remember:

• To write a comment within JSX you need to use the format '{ /* Comment here */ }'. Don't put this at the top level as it will treat it as an element.
• 'class' is a reserved word in Javascript so you need to use 'className'. Emmet helps with this.

[Video 4: Writing HTML with JSX]

Day 4: Styling in React

There are plenty of options (and opinions) on how CSS should be loaded into React applications. A couple of these options are:

• Reference a style.css sheet in your index.html document - much like standard HTML & CSS.
• import a style sheet into your index.js document - hybrid option: import './css/style.css';
• Create a CSS sheet for each component that only includes the CSS for that single component. This allows greater control over the component styling. e.g. import './css/store-picker.css';
• Inline styling using JSX formatting.

The method that you choose will depend on the project that you're working on, the current practices and the complexity of the project.

This question sparked a big conversation in my office around why we use 'styled-components' and how this has impacted our development style. It was a great learning opportunity and I have found it is a handy concept to explore not just how but why we do things a certain way.

Usage Notes:
Our team just upgraded to using prettier 0.34.0 in-house. It beautifies the CSS in styled components now. Top notch addition.

Also, the package language-babel has proper syntax highlighting for styled-components in Atom.

The rest of today's 30 minutes was spent reading about styled-components:
https://github.com/styled-components/styled-components
https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/
https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55

If you don't want to read anything about styled-components take the time to watch this instead:
https://www.youtube.com/watch?v=bIK2NwoK9xk

[Video 5: Loading CSS into our React Application]

Day 5: Transition to Linux

Today I moved over from Windows to Linux (Ubuntu).

This included setting up all of my tools and dependencies as well as getting the project code up to date with where I was on my Windows set up.

Setting everything up again is what I focused on today. It was much quicker and smoother this time around.

Day 6: Components

Today we delved further into the basic requirements of a component (class, render, return) and how these individual building blocks can be used to build a layout.

With the following basic component structure we were able to map out our entire application layout:

import React from 'react';

class MyComponent extends React.Component {
     render() {
          return(
               <p>MyComponent Content</p>
          )
     }
}

export default MyComponent;

These components were then brought together via an 'app.js' component that returned a single div with all of the layout included. This was a great lesson.

[Video 6: Creating our application layout with components]

Day 7: Using Props

Today we moved away from strictly static components and into injecting some dynamic content onto the page via props.

We started off simple by changing the content of our subheading text in the 'Header.js' component to reference the tagline prop:

<h3 className="subheading">{this.props.subheading}</h3>

We can then set a specific prop to be passed down and injected into the content like this:

<Header subheading="Those Fresh Feels" />

What is happening here is not only is the Header component being called but the subheading prop is being passed along with it. This means that any time we reference this component we can inject customised content. For instance:

<Header subheading="Those Fresh Feels" />
<Header subheading="This is the second Header component" />

Yay for components!

[Video 7: Passing Dynamic data with props]

After the first week of learning my project looks like this:

Read more in this series: Week 2, Week 3, and Week 4

Get the React for Beginners Course for yourself.