Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1023 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Write a "Hello World" React Component

2:45 React lesson by

This lessons goes over what it takes to get React to output simple text to the browser such as Hello Eggheads. This lesson will also introduce stateless functional components. React uses JSX which is a "JavaScript syntax extension that looks similar to XML." While this is not required to use with React, it is highly recommended.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

React is a relative new-comer to the Javascript framework scene, but backed by Facebook it is seeing a lot of traction. This is the first lesson in a series of lessons that take a look at the core fundamentals of UI development with React. Hello world.

Avatar
Ishan

You mean double asterisk in the comment parser.
The comment must start with /**
/*** doesn't harm anything though.

In reply to egghead.io
Avatar
Joseph

It's a habit due to most of the examples in the github repo using:
/**
* @jsx React.DOM
*/

In reply to Ishan
Avatar
Nicholas Westby

Should the opening body tag be missing? Also, I don't see a semicolon after the return statement. Normally, I wouldn't mention these things, but being completely new to React (this is the first resource I've consumed on the subject), I thought I'd mention those items in case they confuse other people learning this.

Avatar
Joseph

Good catch on the body tag, oops! However, the semicolon is not required in this instance and the code would minify just fine. Hey, thanks for looking out for other viewers.

In reply to Nicholas Westby
Avatar
Joel

I added the tags to this and the other lessons where it slipped through.

In reply to Joseph
Avatar
Alexey

hi guy share your snippets for react

In reply to egghead.io
Avatar
Robert

I've a question: what kind of configuration do you use in sublime to have markup autocomplete in React? Are u using Emmet for autocomplete? Thx. Great tutorials!!!!

In reply to egghead.io
Avatar
Behrang

Hi,

Would it be possible for you to create an Android TV app so that we can easily watch the videos using Nexus Player or other Android TV devices?

Thanks,
Behrang

In reply to egghead.io
Avatar
Michael

I've a question: what kind of configuration do you use in sublime to have markup autocomplete in React? Are u using Emmet for autocomplete? Thx. Great tutorials!!!!

Avatar
Rajitha

Could you please explain default keyword in export default App. What are the other values it take and can we restrict Classes being imported for some and not for some other?

Avatar
Kirk Sefchik

What atom packages are you using?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?