Intro.md

Intro To React

Today we will walk through the creation of our first React web app!

Why React

Coming Soon

Create your first app

First you'll need node.js and a JavaScript editor like atom.

Next, open a terminal and install create-react-app:

npm install -g create-react-app

Now we will create our sample Weather app:

create-react-app Weather

Now a bunch of dev tools are getting installed which will help you build your React app. When it completes, you can run the following to start your app:

cd Weather
npm start

Now, your new app will load in your browser!

Render and Props

Lets take a look at the basic app that was generated for us. In your editor, open Website/src/App.js. The app currently looks like this:

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

Our whole app is in one component, and the render function is at the heart of it. Try modifying some text, save, and watch the app automatically show those changes!

Now lets go ahead and make a new component, WeatherDisplay. The render function is the heart of the component because it defines what will be displayed. For now, lets just display a <h1> HTML tag, with some text inside.

class WeatherDisplay extends Component {
  render() {
    return (
      <h1>Displaying some Weather!</h1>
    );
  }
}

Lets modify our App component to use this new one.

class App extends Component {
  render() {
    return (
      <div className="App">
        <WeatherDisplay cityId={"1234"} />
      </div>
    );
  }
}

As you can see, we are passing data into WeatherDisplay. This data is a prop, called "cityId". We can modify our component to display the data being passed in:

class WeatherDisplay extends Component {
  render() {
    return (
      <h1>Displaying weather for city {this.props.cityId}</h1>
    );
  }
}

State

Lets add some different places that we might want to display weather for:

const PLACES = [
  { name: 'San Jose', zip: '94088' },
  { name: 'Santa Cruz', zip: '95062' },
  { name: 'Honolulu', zip: '96803' },
];

• Create component with state
• setState

Lifecycle Methods

Sometimes we want to have imperitive code that gets called at certain times in our component's lifetime. In this example we want to fetch from the network when the component mounts, or first shows up on screen.

class WeatherDisplay extends Component {
  constructor() {
    super();
    this.state = {
      weatherData: null,
    };
  }
  componentDidMount() {
    const zip = PLACES[this.props.activePlace].zip;
    const URL = 'http://api.openweathermap.org/data/2.5/weather?q='+zip+'&appid=b1b35bba8b434a28a0be2a3e1071ae5b'
    fetch(URL).then(res => res.json()).then(json => {
      this.setState({ weatherData: json });
    });
  }
  render() {
    const weatherData = this.state.weatherData;
    if (!weatherData) return <div>Loading</div>;
    return (
      <h2>{weatherData.weather[0].main}</h2>
    );
  }
} 

Installing libraries

Our app is still quite ugly. We can fix that by adding className props to our divs, and importing in some CSS.

Or, we can install a library that will help. Lets get bootstrap:

npm install --save bootstrap react-bootstrap

(Extra credit!) Deploying

Coming Soon