1. 1
    In this unit, you will learn a variety of useful techniques that React programmers are expected to know. You’ll learn how to make a stateless functional component, how to make a propType, how …
  2. 2
    There are many different ways to use styles in React. This lesson is focused on one of them: inline styles. An inline style is a style that’s written as an attribute, like this: Hello world…
  3. 3
    That’s all that you need to apply basic styles in React! Simple and straightforward. One problem with this approach is that it becomes obnoxious if you want to use more than just a few styles. A…
  4. 4
    In regular JavaScript, style names are written in hyphenated-lowercase: const styles = { ‘margin-top’: “20px”, ‘background-color’: “green” }; In React, those same names are instead wri…
  5. 5
    In the last exercise, you learned how style names are slightly different in React than they are in regular JavaScript. In this exercise, you will learn how style values are slightly different …
  6. 6
    What if you want to reuse styles for several different components? One way to make styles reusable is to keep them in a separate JavaScript file. This file should export the styles that you w…
  1. 1
    In this lesson, you will learn your second programming pattern: separating presentational components from display components. Click Run. In the browser, navigate to https://localhost:8000. Y…
  2. 2
    Separating container components from presentational components is a popular React programming pattern. Here’s the basic idea behind it: if a component has to have state, make calculations based…
  1. 1
    In the code editor, take a look at GuineaPigs from the last lesson. Notice that its instructions object only has one property: render(). When you separate a container component from a presentat…
  2. 2
    Stateless functional components usually have props passed to them. To access these props, give your stateless functional component a parameter. This parameter will automatically be equal to the…
  1. 1
    In this lesson, you will learn to use an important React feature called propTypes. propTypes are useful for two reasons. The first reason is prop validation. Validation can ensure that your …
  2. 2
    In the code editor, take a look at MessageDisplayer’s render function. Notice the expression this.props.message. From this expression, you can deduce that MessageDisplayer expects to get passed a…
  3. 3
    In the code editor, look at the property on MessageDisplayer’s propTypes object: message: React.PropTypes.string What are the properties on propTypes supposed to be, exactly? The name of eac…
  4. 4
    Remember stateless functional components? You can see some familiar ones in Example.js. How could you write propTypes for a stateless functional component? // Usual way: class Example ext…
  1. 1
    This unit’s final lesson is about forms. Think about how forms work in a typical, non-React environment. A user types some data into a form’s input fields, and the server doesn’t know about it. …
  2. 2
    A traditional form doesn’t update the server until a user hits “submit.” But you want to update the server any time a user enters or deletes any character.
  3. 3
    In this exercise, you will define a function that gets called whenever a user enters or deletes any character. This function will be an event handler. It will listen for change events. You can…
  4. 4
    Good! Any time that someone types or deletes in , the .handleUserInput() method will update this.state.userInput with the ‘s text. Since you’re using this.setState, that means that Input needs …
  5. 5
    When a user types or deletes in the , then that will trigger a change event, which will call handleUserInput. That’s good! handleUserInput will set this.state.userInput equal to whatever text …
  6. 6
    There are two terms that will probably come up when you talk about React forms: controlled component and uncontrolled component. Like automatic binding, controlled vs uncontrolled components
  7. 7
    Great work! You just wrote your first React form. Notice that you didn’t use a submit button. You didn’t even use a element! Your “form” was actually just an . That won’t always be the case…

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo