Take a look at React elements and how to create them. With React elements, we describe what you want to render in the DOM. To create an element, you will use React.createElement. Set up your folder structure to provide structure for future videos. Then, use the lightweight server, httpster, from npm to serve our files.
- [Instructor] In this video we're going to take…a closer look at React elements by creating one.…Remember, with React elements, we'll describe…what we want to render in the dom.…Inside of your two one start folder, you should see…another folder called dist.…Now inside of the dist folder, we're going to create…a new file called index.js.…So we'll just save this as index.js.…Great.…So within this file, we're going to create…our first React element, and we're going to create…something called title.…
So const title, we'll set equal to React.createElement.…Now inside of the createElement function,…we're going to send it three different arguments.…The first is whatever we want to create, our h1.…Next, within an object on line three,…we're going to describe any properties…that this element should have.…So we'll use the id is title, and we'll make sure…that's a string.…We will also use className is header.…
- 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 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.