# Say Hello to React

```javascript
import React from 'react'
import ReactDOM from 'react-dom'

class HelloWorld extends React.Component {
  render() {
    return (
      <div>Hello World!</div>
    )
  }
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));
```

**Creating in React**

There are three steps in creating a project in React,

* Create an element,
* Create a component, and
* Render it.

We will be using CodePen so we don’t have to bother with setup — that part can come in later projects.

Go to stackblitz and can create simple Hello world application &#x20;

{% embed url="<https://stackblitz.com/edit/react-l5pmta>" %}

**Save & Close** after you have made the changes above.

**Create An Element**

On the HTML section of your pen, create a `div` element with an id of `app`. This is where our [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) code will eventually be rendered.

```
   <div>
        <p>
          Start editing to see some magic happen :)
        </p>
    </div>
```

Now that we have created the element, let’s create the component which will be rendered(displayed) in the element.

**Create Component**

Components are the core feature of the React library. They are reusable UI pieces that allow you to separate your code. These different pieces can then be made to interact in interesting ways.

```
  function Hello(props) {
    return (
      <div>
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
```

Another way to define a component is to use the [ES6 class declaration](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) method. But it is not advised for components like this that have no changing parts.

```
class App extends Component {
  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>
    );
  }
}
```

Now that we have created our component, let’s render it on the browser.

**Render (the) Component**

This final step displays the created component on a HTML element. As such, this step has two arguments — the component, and the element.

This is what the syntax looks like,

```
ReactDOM.render(
 <Component />, document.getElementById(element)
)
```

In our example, our component is `Text` and our element id is `app`. Place the following code below our component code.

```
ReactDOM.render(
  <Text/>, document.getElementById('app')
);
```

At this point, a plain “Hello React” will render on the screen preview.

Here is the complete JSX.

#### Footnote <a href="#dea3" id="dea3"></a>

* There is usually only one HTML element where the app is rendered. In our example, we gave it the id `app`. This is called the root node and it is where the whole DOM is rendered.
* `ReactDOM.render()` accepts only one root for each of its arguments. If you have two components to pass into the first argument of `ReactDOM.render()` for example, you should wrap them in a single `div` .

```
ReactDOM.render(
  <div>
     <Text/>
     <Image />
  </div>, document.getElementById('app')
);
```

* Always start component names with a capital letter.
* If you are just starting out with React, you should learn [props](https://facebook.github.io/react/docs/components-and-props.html) next.