DEV Community: Stef Cola

Learning React - Week 4

Stef Cola — Thu, 03 Aug 2017 04:30:28 +0000

This article originally appeared on stef.ninja.

This is the final post in my blogging driven learning exploration of React. I have been working through the React for Beginners course from Wes Bos and documenting my takeaways from each lesson.

This is an AWESOME course and I highly recommend it to anyone looking to learn React.

You can find more notes in Week 1, Week 2 and Week 3 of the series.

Day 22: Animating React Components

Animations are a fun way to inject movement into our webpage. This can be done via the traditional method of css (like the GIF below) or some more interactive React animations that we will explore further.

NPM Scripts & CSS Preprocessors

Today's lesson touched on a few new concepts including the use of styl as a CSS preprocessor. We also explored how this can be integrated in the npm scripts to enable hot reloading during development.

Using the npm scripts in the package.json we are able to call $ npm run watch in the terminal. It will then concurrently run start & styles:watch. Then if one of them breaks it's going to kill the other one and show an error in the terminal. This makes development really easy.

This is what the npm scripts look like at this point:

Note: In our development environment at work we don't use external CSS or CSS preprocessors as we have opted for styled components (I talked more about this in Day 4).

Animations

Now that we have our styling options sorted out we can get into the meat of animating React Components.

Our aim today is to animate our order with some subtle movements:

When a new fish is added to the order it should animate in.
When a fish is removed from an order is should animate out.
When the number of lbs of a fish increases the number should animate up.

These are only small movements and we will do a lot of work to make them happen but the polished finish that they give the website is a nice touch.

The first step we need to do is open up our HTML to include classes that we can hook into for our animations. You can do this using the CSSTransitionGroup.

We modified the ul component to be a CSSTransitionGroup component instead. This looks like this in the code:

Note: By adding the component="ul" this tells React that we want the component to render a unordered list component in HTML but maintain it as a ReactCSSTransitionGroup in React.

The additional attributes on the CSSTransitionGroup component control temporary classes on the ul HTML component. You can see how these classes display via the developer tools:

These temporary classes can then be hooked into via CSS. We are able to use CSS Transitions because there is an initial state (class order-enter/order-leave) and a final state (class order-enter-active/order-leave-active) that we can reference.

These can then be styled like this:

Note: the lack of {}, : or ; in the .styl documents

This renders out animations that look great:

The final task in todays lesson is to animate the count of the lbs for each fish in the order. The animation that we are aiming for looks like the previous number is being pushed out by the new number. This requires a duplication of the element that will let us animate the 'old' version of the element out whilst simultaniously animating the 'new' version of the element in.

This animation style requires us to duplicate the {count} span. To do this we will add a key attribute with the value {count} as well as wrap the {count} in a CSSTransitionGroup and additional span. The code looks like this:

This results in two spans being created - a new one with an updated {count} and a order-enter-active class and the original {count} that now has a order-leave-active class on it.

Now all that is left is to add the animation styles in:

To Do:

Import CssTransitionGroup from 'react-addons-css-transition-group' into Order.js
Modify the ul to be a CSSTransitionGroup & add the required attributes.
Modify the {count} to be wrapped in a CSSTransitionGroup & set the attribute key to {count} (so we have a unique reference available).
Add animation using CSS transitions in the _animations.styl document.

Today the app looks like:

[Video 22: Animating React Components]

Day 23: PropTypes for the Win

What are PropTypes? They are validators that make sure the data coming into a component is valid.

Today's lesson covered inserting PropType validations into every component of the app. We used the React.PropType to do this which you can read more about here.

As of React v15.5 we should be using the prop-types library instead of the React.PropTypes. This moves away from accessing PropTypes from the main React object which seems to be a common move in React v15.5. Read more about migrating from React.PropTypes here.

To Do:

Add proptype validators to all components.

Today the app looks like:

Note: There is no visual changes that were made in today's lesson.

[Video 23: Component Validation with PropTypes]

Day 24: Authentication with Firebase

Currently the database and state can be edited by all visitors. This level of authentication and security is too low for a production level app so we really need to reign that back in.

To do this we will create an application that requires you to login with GitHub, Facebook or Twitter before you can edit the Inventory of a store. The first person to login to that store will be saved as the owner of that store (not a super practical realworld workflow but good enough for todays purposes). This authentication is all going to be completed client side with the backend being handled by Firebase.

All of the sensitive API Secrets and Client IDs are going directly into Firebase rather than our client facing app. This adds a level of security that we don't even need to think about.

Login Authentication with Firebase

Wes makes this look super simple. He follows these steps:

Create a Facebook App with Facebook Login.
Create a `Sign-in Method` with Facebook enabled on Firebase.
Copy the `OAuth redirection URI` from the Firebase tab into the Facebook App settings.
Enable `Embedded Browser OAuth Login` in the Facebook App settings. Save the changes.
Copy the `App ID` and `App Secret` into the Firebase Facebook authentication settings.

You can do a similar process for all of the Sign-in Providers (Email/Password, Google, Facebook, Twitter, GitHub).

Connecting to Firebase

Connecting to Firebase is super simple with the Rebase package that we imported. We simply need to Import base from '../base'; at the top of our component and we can now connect to Firebase.

It appears that this lesson covers an outdated method of connecting to Firebase.com. The new Firebase console and 3.x SDKs ask for a diferent method. I will explore connecting to Firebase.com using the method that Wes uses and then also the new and updated method. I will need to research how 'Rebase' works with the new vs old method. You can read more about Upgrading your Web / Node.js app from Firebase.com.

The Firebase.com method of Authentication via OAuth is:

ref.authWithOAuthPopup("twitter", function(error, authData) {
  if (error) {
    // An error occurred
    console.error(error);
  } else {
    // User signed in!
    var uid = authData.uid;
  }
});

This can be compared to the new Firebase Authentication functionality that lives behind the firebase.auth() service. There have been heaps of methods that have been renamed in this transition and the way that you authenticate users with OAuth is one of those:

var auth = firebase.auth();

var provider = new firebase.auth.TwitterAuthProvider();
auth.signInWithPopup(provider).then(function(result) {
  // User signed in!
  var uid = result.user.uid;
}).catch(function(error) {
  // An error occurred
});

Securing Firebase

Earlier in our lessons we opened the security rules of our Firebase database right up. This was to help with ease of development. Now that we are nearing production release we need to close these right down. Wes provided sample rules for this in security-rules.json:

These rules don't allow people who know the syntax of Firebase to edit it in a destructive manner. So the first rule doesn't allow anyone to delete currently existing data but allows all data to be read. The second rule only allows the store owner to edit data that already exists.

{
  "rules": {
    // won't let people delete an existing room
    ".write": "!data.exists()",
    ".read": true,
    "$room" : {
      // only the store owner can edit the data
      ".write" : "auth != null && (!data.exists() || data.child('owner').val() === auth.uid)",
      ".read" : true
      }
  }
}

To Do:

Create GitHub, Twitter & Facebook sign up methods in the Auth section of Firebase.
Create a method to render out the login buttons in the Inventory component.
Put a conditional statement into the Inventory render method.
- Check if the user is logged in. If not, return the renderLogin method.
- Check if they're the owner of the current store. If not, return a 'Sorry you're not the owner' & 'Logout' button.
- If they pass both of these checks the user must be logged in & the owner of the current store. So, we will leave the default return in place.
Set the default state of the uid & owner to null (in the Constructor method).
Create & bind an authenticate method that takes in provider. Import base (to connect to Firebase). Use the base.AuthWithOAuthPopup method.
Create & bind an authHandler method that handles errors & returns the User information payload from Firebase. Store the User Information in the state.
Pass the storeID down from App to Inventory via props.
Grab the store information from Firebase.
Check whether the store has an owner set, if not, set the current user as the owner.
Hook into the componentDidMount lifecycle method and check to see if there is an authenticated user present. If so, call the authHandler method.
Hook up the Log Out button.
Increase the security of the database rules in Firebase.

Today the app looks like:

This will be the last image I put up detailing the App progress as the final lessons are around deployment (with no visual changes).

[Video 24: Authentication]

Day 25: Building React for Production

create-react-app has a build step. It is as simple as running the command npm run build in the terminal. This process exports all of the files that we will need to run our app in production. This includes minifying the JS and CSS files and creating source-maps for our JS and CSS. These source-maps will make debugging our app 100% easier by referencing the JS or CSS file that the code was written in rather than the compiled line.

It also outlines how to upload and run this on both a local and a remote server.

The create-react-app output at the top level is index.html and a static folder. This output doesn't come with an actual server. This means that if we just uploaded these files onto a server we would be served a bunch of errors. We need a server that knows to serve the index.html regardless of the URL and that relinquishes the routing to the browser.

The next few lessons will be covering how to deploy this app onto various servers that fit this bill. As these are all related to building React for Production I will complete them all today.

Deploying to now.sh

now.sh publishes your JavaScript (Node.js) or docker powered apps, websites and services in the cloud easily, quickly and reliably. It also comes with free open source hosting. This means deployment of anything you're happy to open source is quick, free (up to a limit) and easy.

The now-serve (found here) command that Wes uses is depreciated and instead we are directed to use now-static (found here). I was unable to get this working today and will revisit it after learning the other deployment processes.

To Do:

Run npm run build command.
Choose a server to deploy to.
Deploy to a server.

[Video 25 & 26: Building React for Production, Deploying to now.sh]

Day 26: Deploying to GitHub Pages

Another (hacky) way that we can host our create-react-app application is by using GitHub Pages.

This process is 'hacky' because we need to work around the fact that our Application will be hosted in a subfolder (rather than the root directory). To account for this before running the build process we need to add "homepage": "https://YOURGITHUBNAME.github.io/YOURREPONAME". We will also need to alter the React Router to account for this subfolder.

GitHub pages doesn't allow you to control the routing for your pages so the suggested (hacky) way around this is to duplicate the index.html page and rename the copy as 404.html. This will mean that everytime the browser receives a 404 code the app is still presented. I hate this as a concept and am immediately taking this page down & deleting this repo.

To Do:

Set up a blank GitHub repo.
Set homepage in package.json
Modify react-router (in index.js) to run in a subfolder. (set the attribute 'basename' equal to the subfolder name). You can do this by getting the variable from the URL with:

const repo = `/${window.location.pathname.split('/')[1]}`;
const Root = ()
...
<BrowserRouter basename={repo} >

run npm run build
From the new build directory initialise a new Git Repo (with git init).
Add the remote (with git remote add origin git@github.com:YOURGITHUBNAME/YOURREPONAME.git)
Run git add -A, git commit -m "fishy", git push -u origin master.
In the settings of your GitHub repo publish the master branch as the source for your GitHub page.
Duplicate index.html as 404.html & commit & push this change.

[Video 27: Deploying to GitHub Pages]

Day 27: Deploying to an Apache Server

Now we're getting into the good stuff. Today we're deploying on a standard Apache server (like the kind you pick up from GoDaddy or Bluehost for a couple of bucks a month).

If you're going to deploy to a subdirectory (not the root domain or a subdomain) then you will need to update the react-router information in index.js and the hompage: declaration in package.json. If not, these additions can be deleted.

We need to tell the server that index.html should be served for ALL routes. For an Apache server you can do this with a .htaccess file. Enter the following:

RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME}% !-f
RewriteCond %{REQUEST_FILENAME}% !-d
RewriteRule . /index.html [L]

These rules breakdown to - whenever you have ANY / serve up either the requested filename OR if nothing is found then serve up index.html instead.

Note: To do this for an nginx server you could use the following in an nginx.conf file:

location / {
    try_files $uri /index.html;
}

To Do:

run npm run build
FTP these files up to your Apache server.
Create a .htaccess file.
Allow the domain on Firebase (so your login OAuth continues to work)

[Video 28: Deploying to an Apache Server]

Day 28: Property Initializers and Getting Rid of .bind()

Anytime we want to add a custom method that we want bound to the instance of our component we need to use .bind() in the constructor method. This is a lot of repeated and convoluted code and in today's lesson Wes shows us how to get rid of it using public class fields that are proposed for future iterations of JavaScript (ES6).

Note: Wes references the ES Class Fields & Static Properties proposal to JavaScript but this has since been merged with another proposal to form the ESnext class features for JavaScript.

So how does these Property Initializers relate to removing .bind()?

We can remove this from the constructor():

this.loadSamples = this.loadSamples.bind(this)

We then alter the method from:

loadSamples() {
  this.setState({
    fishes: sampleFishes
    });
}

TO:

loadSamples = () => {
  this.setState({
    fishes: sampleFishes
    });
};

This works because the arrow function binds to the parent (essentially doing the same work as the .bind() we were using earlier with much less hassle). It is important to note that this is a feature that hasn't been implemented into JavaScript yet and there is no guarantee that it ever will.

We are also able to remove any state declarations that were made within the constructor():

this.state = {
  fishes: {},
  order:{}
}

We can then remove the dot notation and set it outside of the constructor():

state = {
  fishes: {},
  order:{}
};

This is a property Initializer that has been added to every instance of App. This means that every instance of this component will be initialised with this state.

Futher dot notation removal can happen to anything that needs to happen after the component. For example, our propTypes are checked below the render() of the component. These can be moved inside the component return and given a static flag (as we don't need a new version everytime there is a new instance of this component).

App.propTypes = {
  params: React.PropTypes.object.isRequired,
}

This can be moved into the render() function and modified to:

static propTypes = {
  params: React.PropTypes.object.isRequired,
};

To Do:

Replace .bind() Property Initializers.
Move all propTypes into the component & make them static.

[Video 29: Future React Today - Property Initializers and getting rid of .bind()]

Day 29: Throwing Away the create-react-app Parachute

create-react-app is brilliant because it handles all of the hard behind the scenes magic (cough webpack cough) and allows you to just get in there and start creating. However, there may be a time where the default set up isn't going to work for you any more and you need to eject from create-react-app.

Warning: There is no way to 'uneject' from create-react-app so make sure you are doing this on a GitHub branch.

Ejecting from create-react-app is as simple as runinng the command npm run eject.

It will then install all of the dependencies that the app needs to work. It will also create two new directories (config & scripts). It will also add a literal butt-tonne of devDependencies to your package.json file.

You can now edit and update the webpack config, eslintConfig and babel as needed.

To Do:

Create new ejected branch in repo
Run command npm run eject
Customise as needed.

[Video 30: Ejecting from create-react-app]

Day 30: Deploying to Firebase

It's the last day of my 30 day challenge and I have run out of official React for Beginners lessons. The one thing that I was curious about during the last couple of lessons is how we could use Firebase to host the app (as well as handle the persistent state management with the database). I'm also curious if we would be given enough control over the routing to server index.html regardless of the location.

With a little bit of quick research I can see that this is not only possible but it looks as though Firebase is built for it. So without further ado, let's get this app deployed onto Firebase hosting.

Deploying create-react-app to Firebase

The create-react-app documentation goes through how to deploy your app to Firebase. Follow the instructions here (as they will be better than anything I can describe).

Customising Hosting Behaviour on Firebase

Firebase opens up the control of how content is hosted - this includes custom error pages, redirects, rewrites and headers. In our case, we're interested in rewrites.

To do this I added some customisations to the firebase.json document. My additions tell Firebase to make build the public directory and redirect all routes to the index.html file. It also tells it to ignore the files that don't need to be included in deployment.

It now reads like:

{
  "hosting": {
    "public": "build",
    "rewrites": [{
      "source": "**",
      "destination": "/index.html"
    }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Now you can view my App here if you ever want to check it out.

To Do:

Install Firebase CLI.
Run the create-react-app build command.
Customise the firebase.json
Deploy to Firebase.

Read more in this series: Week 1, Week 2, and Week 3 Or get the React for Beginners Course for yourself.

Learning React - Week 3

Stef Cola — Thu, 03 Aug 2017 04:29:46 +0000

This article originally appeared on stef.ninja.

This is the third post in a series of notes from the React for Beginners course from Wes Bos that I am working through. This is an AWESOME course and I highly recommend it to anyone looking to learn React.

You can find more notes in Week 1 and Week 2 of the series.

Day 15: Display Data from the State

We have the sample fish data saved in our state. Let's get these fish displaying in the UI.

JSX doesn't have any loops or logic built in so to combat this we can use regular javascript (by encapsulating it in {}). To display a list of our sample fish we will map over the entire list of keys within the fish object like so:

<ul class="list-of-fishes">
  {
    Object
      .keys(this.state.fishes)
      .map(key => <Fish key={key} />)
  }
</ul>

Wes gives a good tip around ES6 destructuring that means when we are referencing the props that are sent down to the child we don't have to repeat ourselves with this.props all of the time.

const {details} = this.props;

Further reading: Wes Bos has A Dead Simple intro to Destructuring JavaScript Objects

To Do:

Pass the details about each fish down to the Fish component via the details prop. Hint: details={this.state.fishes[key]}
Use the formatPrice function in the helper file to format the Price detail.
Make a component (Fish.js) that displays the data for each fish. Return this all in a <li>.
Iterate through a list of the sample fish in the fish object & display the Fish component.

Today the app looks like:

[Video 15: Displaying State with JSX]

Day 16: Updating State

Today we're linking up the Add To Order button so it actually adds the corresponding fish to the state.

The button has an awesome feature where it dynamically changes depending on whether a fish is available or not. To do this we will be implementing some logic around details.status using a ternary operator.

const isAvailable = details.status === 'available';
const buttonText = isAvailable ? 'Add To Order' : 'Sold Out!';

To Do:

Change the content of our Add To Order button to be dynamic depending on the details.status.
Change the button to be disabled if the fish is unavailable.
Add addToOrder method on the app component. //Take a copy of the state //Update the new number of fish ordered e.g order[key] = order[key] + 1 || 1; //Update state.
Bind the method to the app component.
Pass the addToOrder down to our child via props.
Add an onClick handler to the button that updates the state of the order. Note: To do this we will need a reference to the key. Pass this down as a prop on the Fish component.

Quick Note: I send these notes over to my best dev friend Mark to read through before publishing & he always gives me great notes on things that I'm not 100% across. Below are his notes on the function that we used to update the number of fish ordered:

If the key isn't set in order then order[key] will return undefined, which means order[key] + 1 => undefined + 1 => NaN, and because NaN is falsey the 1 in the NaN || 1 expression is returned. It is small but important to understand the sequence of transforms that the data goes through so you don't get tripped up later on.

Today the app looks like:

It looks exactly the same as yesterday because we didn't make any UI changes.

[Video 16: Updating Order State]

Day 17: Display State via JSX

In today's lesson we are taking the order state that we have been working with and injecting it into the UI via JSX.

This is the first time that we are calling another method within the render method to handle a fair bit of our JSX output. Wes mentions that this can be done using another component but he has opted to an additional method within the Order.js component to keep it simpler (no need to hand down props once we bind it).

To Do:

Todays Goal: Display fish order via Order.js. This component needs to include the number of lbs, name of fish, total cost of each line item, and total cost. We will do this by:

Passing the fishes & order state to the order component via props.
Create a running total price of all of the fish included in the order.
Importing and using the formatPrice() function from the helpers file.
Creating a renderOrder() function within the Order component to handle the JSX returned for each fish within the order. This can be called from within the render() function like this: {orderIds.map(this.renderOrder)}
Bind our custom method to this via a constructor.
Remember to add the key to all list items to ensure that React can reference them.

Today the app looks like:

[Video 17: Displaying Order State with JSX]

Day 18:

Persiting data requires a backend service. In this lesson we use Firebase from Google as our backend service.

It uses HTML5 Websockets which Wes was pretty excited about but I had to do some research around. This video was a really good explanation of it with an example: Introduction to Websockets and Firebase - How to Build Real-Time Apps

So with Firebase we have a realtime backend database. A great feature of the Firebase Realtime Database is that it is basically a giant object. Which syncs perfectly with React State also being an object.

During this lesson we also explored the React Lifecycle Hooks. These lifecycle methods offer us different entry points into a component.

We focussed on the componentWillMount method that is invoked before the initial component is rendered. This is a great time to sync the database object with our state object. It also has a coupled componentWillUnmount method that allows us to break the connection.

To Do:

Sign up for a Firebase account.
Create a new Project in Firebase.
Edit the Realtime Database rules to be less secure (don't worry we will fix this us in the authentication lesson set for day 24). Set the Realtime Database rules to:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Use the re-base package to implement Firebase into the React app with the following being entered into base.js:

import Rebase from 're-base';

//Get some information from your Firebase project
const base = Rebase.createClass({
    apiKey: YOUR API KEY,
    authDomain: YOUR AUTH DOMAIN,
    databaseURL: YOUR DATABASE URL,
  });

export default base;

import base into the App
Hook into the componentWillMount() lifecycle method to sync the App state with the Firebase Realtime database.

Today the app looks like:

[Video 18: Persisting our State with Firebase]

Day 19: Persisting State with localstorage

In todays lesson we explored persisting the state of our order via HTML5 Local Storage.

Local Storage allows us to store the data associated with the order within the browser. It is a good option for the order to be stored in because it is secure, local and doesn't impact on website performance.

Local Storage uses key value pairs. The value only accepts numbers, strings or booleans. This means we need to transform our order object into a string. We can do this via the JSON.stringify() method (you can always turn it back with JSON.parse()).

We were also using the React Lifecycle Methods in this lesson. Specifically the componentWillUpdate method that is invoked immediately before rendering when new props or state are being received. This method also isn't called for the initial render which suits this data object (order) well.

The Lifecycle methods on <App> currently look like:

To Do:

Pass down all of the params to the <Order> component.
Hook into the componentWillUpdate method and set the localStorage to our order state.
Hook into the componentWillMount method (already called) and check whether there is any order in localStorage.
If there is an order saved in localStorage then update the order state.

Today the app looks like:

[Video 19: Persisting Order State with localstorage]

Day 20: Live State Editing with Bi-directional State

Today was a pretty involved lesson. We managed to set up state editing via the inventory management from the UI of the app.

First we needed to create a form for each of the fish objects within our state. This was done in the Inventory component via a new renderInventory() method we created:

Once the form had been created we needed a new method to handle the updates. This was done with the handleChange method that we created:

The final method we added was on the App component and it made the magic happen. The state is only updated via the App component so this is why everything had to be passed up there.

This pattern of copy the current state, overwrite the section that has changed, then update the state is becoming a go to when writing React code.

Note from Mark:

Passing each of these functions inline is a great opportunity to use memoization. Currently, with every change that is put through any of those inputs all children are re-rendered. This isn't a giant performance suck at this level as they are only inputs (not large components) but it is good to get into the habit of memoization early.

We used lodash.memoize. This is the improved functions that we worked out:

Further reading on this:
Lodash memoize
The Big O Notation

To Do:

Loop over all of the fish within the state and output an inventory management form (much like the new fish form)
Pass fishes down to <Inventory /> via props.
Create renderInventory() method that will handle all of the form rendering.
Add the current values of the fish (from state) into each section.
Data bind the values so each time an edit is made this is reflected in the state (and on the Firebase database) (remember to use defaultValue instead of value so that the field is mutable). Use onChange{(e) => this.handleChange(e, key)}.
Create a custom handleChange() method and bind it using the constructor. Within that method take a copy of the fish state. Then use the computed target to update ONLY the element that has changed:

handleChange(e, key) {
  const fish = this.props.fishes[key];
  //Copy the fish and update it with new data
  const updatedFish = {
    ...fish,
    [e.target.name]: e.target.value
  }
  this.props.updateFish(key, updateFish);
}

Pass the updated fish up to the <App /> component.
Create a custom method to set the state of the fishes to the updated fish (use updateFish()).
Make the updateFish() available to the <Inventory />

Today the app looks like:

[Video 20: Bi-directional Data Flow and Live State Editing]

Day 21: Deleting Items from State

CRUD (or Create, Read, Update and Delete) is the basic functions required for persistent storage. We have already worked through creating objects to save in the state, reading the state and updating the state. In today's lesson we focus on deleting objects from state.

To do this we run through a similar pattern to the one I highlighted yesterday:

removeFish(key) {
  //Copy the current state
  const fishes = { ... this.state.fishes };
  //Delete the specific fish
  //Note: 'null' needs to be used because of Firebase
  fishes[key] = null;
  //Set the State
  this.setState({ fishes });
}

That's it. The fish is now deleted. Obliterated from existence.

To Do:

Create a removeFish method that deletes a specific fish from the state.
Create a Delete Fish button within the renderInventory JSX
Link the onClick handler up to the removeFish method.

Today the app looks like:

[Video 21: Removing Items from State]

Read more in this series: Week 1, Week 2, and Week 4 Or get the React for Beginners Course for yourself.

Learning React - Week 2

Stef Cola — Thu, 03 Aug 2017 04:28:36 +0000

This article originally appeared on stef.ninja.

This is the second week in my 30 days, 30-minute challenge to learn React via the brilliant course from Wes Bos React for Beginners.

You can catch the first weeks round up here.

Please note: these posts are in no way a replacement for the course. They are my notes as I progress through the 30 days. I 100% recommend purchasing the course or following Wes Bos on Twitter if you're interested in React.

Day 8: Stateless Functional Components

True React components are complex beings. They have a whole bunch of inherited features like lifecycle methods along with other additional methods that we create.

Sometimes we simply don't need this complexity. For instance, our Header component is only used to render HTML to the DOM. It doesn't need to be anything more than an arrow function.

This means we can convert it from a full React Component into a Stateless Functional Component:

Rule of thumb:

if( component only uses render method ){
convert it to a stateless functional component
}

Further Reading: This was only a short video so I was able to do some more reading about Stateless Functional Components for the rest of the 30-minutes. Here are some of the good resources I found:

Today the app looks like:

Note: There were no visual changes from yesterday

[Video 8: Stateless Functional Components]

Day 9: Using React Router

Today we explored the React Router tool. It doesn't come as part of the React package but it is the industry standard for implementing routing within React applications.

Our application routing will be handled by a simple component that has some if/else style logic built in. It calls the Match and Miss from React Router to handle the heavy lifting.

Import { BrowserRouter, Match, Miss } from 'react-router';

const Root = () => {
  return(
    <BrowserRouter>
      <div>
        <Match exactly pattern="/" component={StorePicker} />
        <Match pattern="/store/:storeId" component={App} />
        <Miss component={NotFound} />
      </div>
    </BrowserRouter>
  )
}

Note: This is using an outdated version of React Router. The latest verison would look more like:

Import { Switch, Route } from 'react-router-dom';

const Root = () => {
  return(
    <Switch>
        <Route exact path="/" component={StorePicker} />
        <Route path="/store/:storeId" component={App} />
        <Route component={NotFound} />
    </Switch>
  )
}

The results can be seen below. The only other task from todays workshop was to create a NotFound component that can display as a sudo 404 page.

Today the app looks like:

[Video 9: Routing with React Router]

Day 10: Helper Functions

Today was a short and sharp lesson about helper functions. These aren't React specific but is something that Wes Bos chooses to put into his Javascript applications.

If a function is going to be used throughout the app but isn't important/big enough to warrant creating a module for it then putting it in the helper.js file is a good idea.

The project files were generated with a few helper functions that allow us to generate random Store names and format the price to display in a currency format nicely.

Using these functions is as easy as importing the function & then calling it:

import { getFunName } from '../helpers';
...
<input type="text" required placeholder="Store Name" defaultValue={ getFunName() } />
...

Today the app looks like:

[Video 10: Helper and Utility Functions]

Day 11: React Events

A couple of things of note from today's lesson:

React events are handled via the SyntheticEvent
React events are done in line.
To get data out of an input we need to use a function ref.
render() is a method that is inherently bound to the component.
When adding an additional/custom method do a component you need to explicitly bind it to the component so that we can use this within it.

There are a few ways that you can bind custom methods to the component:

You can reference them within the constructor() e.g:

class StorePicker extends React.Component {
  constructor(){
    super();
    this.goToStore = this.goToStore.bind(this);
  }

  goToStore() {
    //Custom method.
  }

  render() {
    //Standard method
  }
}

You can bind the method when it is being called by the onSubmit event handler. e.g:

render() {
    return(
      <form className="form" onSubmit={this.goToStore.bind(this)}>
        <input type="text" ref={(input) => {this.storeInput = input}}/>
        <button type="submit">Submit</button>
      </form>
    )
  }

You can run an arrow function when the method is being called by the onSubmit event handler. e.g:

render() {
    return(
      <form className="form" onSubmit={(e) => this.goToStore(e)}>
        <input type="text" ref={(input) => {this.storeInput = input}}/>
        <button type="submit">Submit</button>
      </form>
    )
  }

We didn't do to many app changes today but we put a console.log() into the event handler so you can see the refs being passed through.

Note: This lesson sparked a lengthy discussion with my development team. Whilst, traditionally the constructor was used to initialise state, however, with the changes in JS we are able to initialise state directly as a class property. This reduces noise in the code as well as increases the performance. Added bonus: when using create-react-app there is no need to worry about transpiling your code - it is already built in. You can read more about this here in React Components and Class Properties by Michal Zalecki.

Today the app looks like:

[Video 11: Working with React Events]

Day 12:

Today we are finishing off the GoToStore() method. We are already receiving in the data that we want to work with (from the input ref) and now we need to action that with a redirect.

To do this we are using the transitionTo method made available to us by React Router.

Because of the one-way data flow of React, we need to surface the router from the parent using contextTypes. This will make it available to our component.

This is done by adding the following below our component on StorePicker.js:

StorePicker.contextTypes = {
  router: React.PropTypes.object
}

Now that the router object is available to us all we need to do is call the transitionTo() method in our goToStore():

goToStore(event){
    event.preventDefault();
    const storeId = this.storeInput.value
    this.context.router.transitionTo(`/store/${storeId}`)
  }

Today the app looks like:

[Video 12: All About React Router]

Day 13: Introduction to State

The video for today is titled 'Understanding State'. I'm going to dial that back and instead reference it as 'An Introduction to State'.

Wes does mention that this is one of the videos that you should come back and watch on a regular basis until this concept has cemented itself for you.

Below are my notes from the video:

You store all of the application data within this master object called 'state'. Then if you want to change the page then you edit the 'state' and you let React handle the HTML for you.
You edit the data. React edits the HTML for you.
This is so powerful because once you change some of the data within the state object it is updated everywhere that state is called within your application. No need to worry about each implementation.
React needs to know the initial state of the component. In ES6 components this is done within the constructor method by setting this.state = {//state}.
When updating your state you should take a copy of your current state, then update your state. This is done for performance and removing race conditions. eg.

//Make a copy of the current state
const fishes = {...this.state.fishes};
//set time stamp
const timestamp = Date.now();
fishes[`fish-${timestamp}`] = fish;
//set state
this.setState({  fishes });
You can call a function from a child component via props.
e.g. in App.js:
<Inventory addFish={this.addFish} />
then in Inventory.js we can pass this down via props:
<AddFishFor addFish={this.props.addFish} />

I'm not 100% across the intricacies of state but I'm going to leave it there for today. We will be going over this again in other videos.

Today the app looks like:

[Video 13: Understanding State]

Day 14:

Today we are focusing on putting a Load Sample Fishes button onto the page. This is handy for quickly inserting some dummy data into the app so we can play around with the display of data in the next lesson. It also gives us a run through of loading state via onClick().

ToDo List:

Create a button at the bottom of the Inventory Panel.
Have the onClick() call a function (loadSamples()) that loads the object in sample-fishes.js into the state.

Remember: State is on parent component App so this is where the function needs to be. We need to pass this down to the child component via props (just like we did yesterday).

Today the app looks like:

[Video 14: Loading data into state onClick]

Read more in this series: Week 1, Week 3, and Week 4 Or get the React for Beginners Course for yourself.

Learning React - Week 1

Stef Cola — Thu, 03 Aug 2017 04:24:50 +0000

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.

Hi, I'm Stef

Stef Cola — Mon, 10 Jul 2017 05:50:01 +0000

I am currently transitioning from a project manager position into a full stack developer role (and I am PUMPED).

I completed my Diploma of Website Design & Development earlier this year and am looking forward to putting my skills to use in my new role. I have a mega supportive team that point me in the right direction to continue my learning journey.

You can find me on Twitter as @stefdotninja

I live in Bendigo, Australia.

I am currently learning more about React.

Nice to meet you.