intro-to-react/README.md at master · ericvicenti/intro-to-react · GitHub

  • We can modify our component to display the data being passed in:

    Near the top of the file, lets add some different places that we might want to display weather for:

    Now, upgrade the App’s render function to iterate over each place, and render a tag for it.

  • We want our app to be able to switch between places, so we can use state to keep that data in our App component.
  • Let’s use the and in our App component:

    At this point, your file should look like this.

  • Let’s install it, alongside which provides the React components for it:

    In the top of the app file, import the css from the bootstrap module:

    Next, import the components we want to use from .

  • Now, replace the App component’s render function to use the bootstrap components:

    Now our app is starting to look more polished, but it would be nice to have a custom theme.

intro-to-react – A Hands-On Walkthrough of your first React Web App

@EricVicenti: I’m excited to publish my “Intro to React” workshop that I presented at F8 this year!

This hour-long workshop was developed for the Open Source Dev Garage as a part of Facebook’s 2017 developer conference, F8.

For best results, watch the 48-minute workshop video and follow along in this guide.

By the end of the workshop, we will have a simple production-ready weather app:

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

Next, open a terminal and install

(Depending on your node installation, you may need to add “sudo” at the front of the

npm install -g

command)

Now we will create our sample Weather app:

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:

Now, your new app will load in your browser!

Lets take a look at the basic app that was generated for us. In your editor, open

. The app currently looks like this:

class App extends Component { render() { return (

logo

Welcome to React< /h2> < /div>

To get started, edit 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,

. The render function is the heart of the component because it defines what will be displayed. For now, lets just display a

HTML tag, with some text inside.

class WeatherDisplay extends Component { render() { return (

Displaying some Weather! < /h1> ); } }

Lets modify our App component to use this new one.

class App extends Component { render() { return (

< /div> ); } }

As you can see, we are passing data into

. This data is a prop, called "zip". We can modify our component to display the data being passed in:

class WeatherDisplay extends Component { render() { return (

Displaying weather for city {this.props.zip}< /h1> ); } }

Near the top of the file, lets add some different places that we might want to display weather for:

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

Now, upgrade the App's render function to iterate over each place, and render a

intro-to-react/README.md at master · ericvicenti/intro-to-react · GitHub