Creating a React component

- [Instructor] In this video,…we're going to create a React component.…Let's open our index dot HTML file,…and make sure that we are using the React library,…React DOM, as well as the Babel in-browser transpiler.…Then, we're going to add our React code here,…to line 12, inside of our script tag.…Whenever I create a component,…I'm going to set it to a variable,…so I'm going to call it my component.…Notice that my component is capitalized,…that is a React best practice.…

We're going to say React dot create class,…and this function is going to take in an object.…Now, the first method that's part of this object…is going to be called render.…Render is always required when we create a component,…because it tells react what we want to render to the DOM.…We're going to return a div.…This div is going to contain an H1,…and it's going to contain a P.…

The H1 will say hello world,…and then I'll say this is my first React component.…Excellent.…The next step is we need to use that function…that we learned earlier, React DOM dot render.…

Resume Transcript Auto-Scroll

Author

Released

9/27/2016

A new JavaScript library has arrived: React.js. React.js is designed to make the process of building modular, reusable user interface components simple and intuitive. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. In this course, Eve Porcello helps you get started with React.js, guiding you through the interface design of a sample bulletin board app. She reviews components, properties, and component state, as well as the foundational parent/child relationships within React.js. Eve also describes the lifecycle of components and how developers can trigger creation, lifetime, and teardown events. The course wraps with a chapter dedicated to building a more complete app with React.js and companion tools like Babel, NPM, and more.