前端入坑(五)--------react(react 可以在自己的机器上开发 )

Hey there,

Up until now we’ve been using CodeSandbox to write our projects. It’s a great tool, easy to use… but sometimes writing apps in a browser feels a little… fake.

It’s a bit more fun (and useful in the real world) if you can develop on your own machine. And even better if you can deploy that app to a server.

Today, we’re doing both of those.

Local Development

For local React development, you need to have a few tools installed:

Node.js and NPM: https://nodejs.org/
Optionally, Yarn: https://yarnpkg.com/
A text editor (I like Vim, and VSCode is nice too)
Create React App

The last one is not strictly necessary to write React apps, but it’s an awesome tool that makes for a nice development experience (DX) and it hides away all the complexity of setting up Webpack and Babel. And: it’s not just for toy examples. It includes a real production build, which we’ll use later today.

Install Create React App by running this from a command line:

npm install -g create-react-app

Create the Project

And then create an app for our example by running this command:

create-react-app reddit-live

When you run that, CRA will install a bunch of dependencies, and then give you further instructions. Follow what it says: switch into the new directory and start up the app.

cd reddit-live
npm start

Open up the project in your favorite editor.

You’ll see that CRA generated a few files for us already. There’s the src/index.js file, which is similar to what we’ve had from CodeSandbox. And then there’s an App component in src/App.js, along with tests, and some styling.

For this example we’re going to ignore everything other than index.js, though.

Just as we’ve done before, open up index.js and delete everything within. Replace it with this code, which should look familiar from yesterday’s lesson:

import React from "react";
import ReactDOM from "react-dom";
import axios from "axios";

class Reddit extends React.Component {
  state = {
    posts: []
  };

  componentDidMount() {
    axios.get(`https://www.reddit.com/r/reactjs.json`).then(res => {
      const posts = res.data.data.children.map(obj => obj.data);
      this.setState({ posts });
    });
  }

  render() {
    return (
      <div>
        <h1>/r/reactjs</h1>
        <ul>
          {this.state.posts.map(post => {
            return <li key={post.id}>{post.title}</li>;
          })}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(<Reddit />, document.getElementById("root"));

The app will automatically recompile when you save, and you’ll see an error because we’re importing axios but we haven’t installed it.

Back at the command line, install axios by running:

npm install axios --save

CRA should automatically pick this up if you left it running (if you didn’t, start it back up now).

The app should be working if you visit http://localhost:3000/.

Deploy to Production

Now let’s push it up to a server! To do that, we’ll use surge.sh.

I made a 27-second video of this process if you want to see it live.

First we need to install the `surge` command:

npm install -g surge

Surge will deploy the directory we run it from, and our react-live project isn’t yet ready for deployment. So let’s build the project using CRA’s built-in production build. Run this:

npm run build

This will output a production-ready app inside the “build” directory, so switch into that directory and run surge:

cd build
surge

It’ll ask you to create an account, then prompt you for a directory (which defaults to the current one), and then a hostname (make it whatever you like), and then Surge will upload the files.

Once it finishes, visit your running site! Mine is http://crabby-cry.surge.sh (the names it comes up with are great).

That’s all there is to it! You can also pair Create React App projects with other popular hosting providers like Netlify, Heroku, and Now.

I hope you had fun with this 5 day intro to React! I had fun writing it.

If you want to get yourself production ready on React knowledge, check out my book Pure React – you’ll learn to bend JSX to your will, master the “React way” of doing things, and get up to speed on ES6 features like classes, rest & spread operators, and destructuring. One of my students, Mara, said:

“I came to know roughly what components I need to build just by looking at the design and imagining how data flows from the root component to the children components. I would recommend the book to everyone that already had a course for beginners but they want to deepen their knowledge and really understand React by building basic UIs.

Basically everyone that wants to get paid by building apps with React.”

You can buy Pure React here.

Cheers,
Dave

To make sure you keep getting these emails, please add [email protected] to your address book or whitelist us. Want out of the loop? Unsubscribe.

My postal address: P.O. Box 248, Nutting Lake, MA