Advanced React

Learn the most essential remaining React fundamentals.

Start[missing "en.views.course_landing_page.react-102.course_illustration" translation]
  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: [...] Noti...

  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: [...] In React, those same names are instead written in camelCase: [...] This has zero effect on style property *values...

  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 [...] . You are looking ...

  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 [...] , make calculations bas...

  1. 1

    In the code editor, take a look at [...] from the last lesson. Notice that its instructions object only has one property: [...] . When you separate a container component from a presentationa...

  2. 2

    Stateless functional components usually have [...] passed to them. To access these [...] , give your stateless functional component a parameter. This parameter will automatically be equal to...

  1. 1

    In this lesson, you will learn to use an important React feature called [...] . [...] 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 [...] 's render function. Notice the expression [...] . From this expression, you can deduce that [...] expects to get passed a [...] named [...] . Some...

  3. 3

    In the code editor, look at the property on [...] 's [...] object: [...] What are the properties on [...] supposed to be, exactly? The name of each property in [...] should be the nam...

  4. 4

    Remember stateless functional components? You can see some familiar ones in Example.js. How could you write [...] for a stateless functional component? [...] It turns out the proces...

  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 [...] events. You ca...

  4. 4

    Good! Any time that someone types or deletes in [...] , the [...] method will update [...] with the [...] 's text. Since you're using [...] , that means that [...] needs an initial state...

  5. 5

    When a user types or deletes in the [...] , then that will trigger a change event, which will call [...] . That's good! [...] will set [...] equal to whatever text is currently in the inp...

  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...

How you'll master it

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

Pro Logo

Advanced React

Start[missing "en.views.course_landing_page.react-102.course_illustration" translation]