Getting Started with React: Lesson 5 of 14

Making an Input Component

Up Next

Managing State of a Component

Autoplaying in 7 seconds!


Now that we know how to make components, let's make another one! Create a file at src/components/ZipForm.js and put the following in it.

import React, { Component } from 'react';

class ZipForm extends Component {
  render() {
    return (
      <div className="zip-form">
          <label htmlFor="zipcode">Zip Code</label>
          <button type="submit" className='btn btn-success'>Get the forecast!!</button>

export default ZipForm;

Here we are creating another component, just like we did with the App component. The nice thing about JSX is that not only can we create these components and put them on page with ReactDOM.render, but we can also compose them together so that when we display one, it actually displays multiple different components. We will demonstrate this by including this component in out App.

Inside our App component, add an import for our ZipForm and include it inside the render method. It should end up looking like this.

Table of Contents

    import React from 'react';
    import ZipForm from './ZipForm';
    class App extends React.Component {
      render() {
        return (
          <div className='app'>
            <ZipForm />
    export default App;

    That's all it takes to get a component onscreen. View it in the browser and you will be able to see the input across the top.

    Now that we have the input on the page, we need a way to manage the value of the input so that we can later use that value to get the weather data we need. In React, this is done updating the state of a component.

    Alex Sears

    2 posts

    Developing is not only my job but also my passion. I love to teach myself new things as much as I love teaching others. The more people we get involved in this little thing we call "web development," the better we can make it. I mean, we always need more cat videos, right?