Key Concepts

Review core concepts you need to learn to master this subject

React CSS Styles

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

React supports inline CSS styles for elements. Styles are supplied as a style prop with a JavaScript object.

Style Names And Values

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

In React, style names are written in “camelCase”, unlike in CSS where they are hyphenated. In most cases, style values are written as strings. When entering numeric values, you don’t have to enter px because React automatically interprets them as pixel values.

Presentational and Container Components

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

A common programming pattern in React is to have presentational and container components. Container components contain business logic (methods) and handle state. Presentational components render that behavior and state to the user.

In the example code, CounterContainer is a container component and Counter is a presentational component.

Static Property

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

In React, prop types are set as a static property (.propTypes) on a component class or a function component. .propTypes is an object with property names matching the expected props and values matching the expected value of that prop type. The code snippet above demonstrates how .propTypes can be applied.

.isRequired

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

To indicate that a prop is required by the component, the property .isRequired can be chained to prop types. Doing this will display a warning in the console if the prop is not passed. The code snippet above demonstrates the use of .isRequired.

Type Checking

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

In React, the .propTypes property can be used to perform type-checking on props. This gives developers the ability to set rules on what data/variable type each component prop should be and to display warnings when a component receives invalid type props.

In order to use .propTypes, you’ll first need to import the prop-types library.

Controlled vs. Uncontrolled Form Fields

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

In React, form fields are considered either uncontrolled, meaning they maintain their own state, or controlled, meaning that some parent maintains their state and passes it to them to display. Usually, the form fields will be controlled.

The example code shows an uncontrolled and controlled input.

Controlled Components

// Passing the styles as an object const color = { color: 'blue', background: 'sky' }; <h1 style={color}>Hello</h1> // Passing the styles with an inline object, as a shorthand <h1 style={{ color: 'red' }}>I am red!</h1>

A controlled form element in React is built with a change handler function and a value attribute.

  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 propType, how to write a form, and how to use styles. You’ll …
  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 written i…
  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 a programming pattern that will help organize your React code. As you continue building your React application, you will soon realize that one component has too many…
  2. 2
    Separating container components from presentational components is a popular React programming pattern. It is a special application of the concepts learned in the [Stateless Components From Stateful…
  3. 3
    Now that we’ve created a container component for the logic, we can dedicate the original component, GuineaPigs, to be a presentational component. The presentational component’s only job is to cont…
  4. 4
    We now have a container component (containers/GuineaPigsContainer.js) for logic and a presentational component (components/GuineaPigs.js) for rendering JSX! The container component should …
  5. 5
    Our container component now renders the GuineaPigs presentational component instead of JSX statements! The last step to separating the container component from the presentational component is to …
  6. 6
    Congrats! You divided the GuineaPigs component into a container component and a presentational component: containers/GuineaPigsContainer.js and components/GuineaPigs.js. Here are the step…
  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: PropTypes.string What are the properties on propTypes supposed to be, exactly? The name of each prop…
  4. 4
    Remember function components? You can see some familiar ones in Example.js. How could you write propTypes for a function component? // Usual way: class Example extends React.component{ }…
  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…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

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

Pro Logo