Complete Intro to React

So let's actually discuss what we're going to build today: a basic Netflix experience. This is going to afford us several fun experiences and use cases to explore with our new-found stack. Our app is going to have a home page, a browse/search page, and a video page. Over the next few chapters we are going to be talking about Redux and react-router and their rather-central roles to the React eco-system. But first let's keep diving into React.

Rather our toys we've made so far to demonstrate how to make React components, let's actually start building our web app. We are going to make our home page. The home page is going to have a sweet background image, our logo, a text input to search for a specific show, and another button to just browse all videos.

I have predone most of the CSS for you for this particular course for you. Later in the course we're actually going to explore using styled-components but for now let's just import the CSS I wrote for you and tackle styled-components later. Follow the structure of the HTML and class names and you'll be golden. If at any time your styles look broken as compared to mine, chances are you misnamed a class or misstructured the tags.

We are going to add a link tag to our HTML. Typically you wouldn't have both external CSS and styled-components but believe me I'm going to save you a bunch of typing by limiting how much CSS I'm going to have you write. This is not a CSS course, haha.

Add this to index.html: <link rel="stylesheet" href="/public/style.css" />. From here on out we'll have to use a webserver or else you'll have to mess with the paths to get the CSS to display correctly.

Let's start building our app. You can delete MyTitle.jsx if you desire; you can also leave it. We're not going to be using it any further. Go ahead and clear out most ClientApp.jsx and let's start putting our new app in here.

Oh, and you also have to name your video service. I named mine svideo but name your app whatever you want!

Right now it's going to be pretty simple. Drop in this:

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

const App = () => (
  <div className="app">
    <div className="landing">
      <h1>svideo</h1>
      <input type="text" placeholder="Search" />
      <a>or Browse All</a>
    </div>
  </div>
);

render(<App />, document.getElementById('app'));

Just in case you're not familiar, notice that we have no curly braces and only parens around our JSX. This means there's an implicit return and it's required by the Airbnb rules. If this is confusing for you, I recommend the 2ality post on it.

Save and run npm run build. If you followed the CSS naming and HTML structure, you should see a nice looking landing page. Also a good time to make sure if your code is still lint-compliant.

So, another tooling detour here: I'm getting pretty sick of having to hit the terminal every single time to see run build. Furthermore, build for webpack is pretty slow despite how small our code is. So let's take advantage of webpack's watch feature. This will watch for every time you save rebuild automatically. Additionally it will keep the unchanged bits (like the React library) in memory so it doesn't have to rebuild it every time. Try running webpack --watch in your terminal. It will use the same config we already made. See how much faster it is after running? Let's add a new npm script.

// in package.json in scripts
"watch": "webpack --watch",

Great, right? So, another part that's been bothering me is that it's such a pain to have to re-run ESLint every time. Either that or you'll get a bunch of errors all at once when you run it before you commit. Luckily we can have Webpack run ESLint each time it compiles. It will then notify you when you have errors.

Just like we're using the babel-loader to transpile our code, we're going to use the eslint-loader to run our linting for us. eslint-loader is similar to babel-loader, except it won't change our code: just warn us of linting errors.

Let's change our webpack config to use our new eslint-loader. eslint will automatically use our .eslintrc.json, regardless is called via the CLI or programmatically via webpack.

// inside rules, before babel-loader
{
  enforce: "pre",
  test: /\.js$/,
  loader: "eslint-loader",
  exclude: /node_modules/
}

If you were already running yarn watch, stop and start it again.

Nice! Any time you save now using yarn watch it will both compile your code and lint it. Pretty slick. And it all runs so much faster. We're going to get to how to make your code reloads even faster. We do the enforce: pre part to make sure that the lint part is loaded before the build step, ensuring our uncompiled code (and not the intermediary) is always the one being linted.

Now let's switch to the Webpack dev server which makes things just that much easier. The Webpack dev server speeds up development by letting you run a local server and serve all your content from the dev server. It watches and keeps everything in memory so rebuilds go faster. Add the following to your server to get it to serve your statics correctly:

// add as a top level config item
devServer: {
  publicPath: '/public/'
},

Now try running this from the directory of your project: ./node_modules/webpack-dev-server/bin/webpack-dev-server.js. You could install this globally but we'll use npm's cli to make this easy. You should see in your CLI a bunch output from the build and probably some linter errors. Feel free to fix your errors but now you should be able to go http://localhost:8080 to see your project running. You should also see the build output in the console of the browser. Cool! Add the following line to your npm scripts: "dev": "webpack-dev-server",. Now you can do yarn dev and your code will start building and serving right away!

But first let's keep going with our app. Our landing is pretty much done for now. We want to start working on the browse all page, but we need to move onto the router to do that real quick.