- [Instructor] In the previous video,…we created a simple react element with an id and a class.…Let's style this element with a little CSS.…Here on line four, I'm going to create a new variable.…This new variable is going to be called style.…It'll be set equal to a style object…with a background color of orange, a text color of white,…and font family is verdana.…
The way that I will set this up is just as another property…here on line 12.…We will say style is style.…If we take a look at our terminal we're going to restart…our server, and we're going to make sure we're navigated…to the correct folder.…And if we look at local host 3000, we should see all…of this style being applied appropriately.…The next thing I want to do to enhance our experience here…with react is we're going to convert all of this to JSX.…
JSX is java script as XML.…It's a tag based syntax that we can use…to create react elements.…Instead of using these create element calls we can use tags…which look a whole lot like html or XML tags.…Here on line 17 is where I'm actually going…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.