Join Eve Porcello for an in-depth discussion in this video React.js syntax, part of Learn React.js: The Basics (2015).
- Let's render some content to our page using React. Here I've created an index.html file which has a title and a script tag that is living inside of the body. The first thing that we want to do to our React file is add the React library. I'm going to switch over to my browser, and here we have the webpage for the React library. On it I'm going to click the download link and I'm gonna scroll down to grab the link to the production version of the React library.
Its first argument will be what type of element we want to create, in this case, a div. We'll pass at null because we want to pass no properties. And finally, we want to pass at children. So what do we want this div to say? What do we want it to read? We'll say Hello World. Not outside of our createElement function here we're gonna use a comma. Render is also going to take in the location where we want to add this React code.
In this case, we're going to say document.body. So just put this new div in the body of our document. I'm going to save this, so let's take a look at this in Chrome. When I reload this page, we see Hello World rendering to our browser, so we've done it. We've created our first line of React code. Now let's take this and simply it using JSX.
- What is React.js?
- Introducing JSX
- Creating a React component
- Handling events
- Using state
- Defining parent/child relationships
- Adding child elements
- Mounting and updating components
- Creating a React.js app
Skill Level Beginner
Q: This course was updated on 02/17/2016. What changed?
A: We updated five tutorials to work with React.js 0.14.4, which was released in December 2015. This includes the "Creating a React component" video and the "Creating an App" chapter of the course.