Building with React.js: Part 1 — ReactDOM.render()

Here are a few reasons why I chose React for Front-end development:

1. Apps made with React can handle complex updates and still load quickly.
2. You can write many smaller and reusable component files. It's a beautiful fix to writing Spaghetti Javascript code.
3. React is scalable. React performs best with large programs that display a lot of changing data.
4. React is popular. I get very comfortable working with a framework that has a large promising community.

Take a look at the following weird line of code:

const name = <h1>Hello there </h1>

It seems like Javascript or Html because I can see the const and <h1> tag. The answer is, it is Javascript, and the part that looks like HTML <h1>Hello there</h1> is called JSX.

JSX is a syntax extension for Javascript. Typically, the browser can’t read JSX so it has to be compiled into regular javascript before working. Thanks to Babel.

After learning how to write JSX, the next step is to render them. To render a JSX expression means to make it appear on the screen.

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

The above code will render JSX onscreen. Javascript is case-sensitive so don’t mistake ReactDOM for Reactdom. Talking about ReactDOM, what’s that? ReactDOM is the name of a Javascript library. The library contains several React methods, all of which deals with the DOM. The above code shows us one of the most important methods of ReactDOM: ReactDOM.render().

It is one of the common ways of rendering JSX expressions to the screen.

ReactDOM.render() carries two argument. The first is the JSX expression which in this case in the above code is <h1>Hello world</h1> while the second argument document.getElementById(‘app’) is the element where the first argument is appended on.

Allow me to explain; we’ve learned the first argument makes the JSX expression render on the screen. But where on the screen should the first argument appear. It is appended in the element selected in the second argument; in this case <h1>Hello world</h1> appends in the element selected from document.getElementById(‘app”).

Variables can also be passed into ReactDOM.render().

ReactDOM.render()’s first argument should evaluate a JSX expression but it doesn’t have to literally be a JSX expression. JSX expressions can be stored in a variable and the ReactDOM.render() method still works just fine when the variable is passed as a first argument.

const goals= (
  <ul>
    <li>Learn React</li>
    <li>Develop interesting things with React</li>
    <li>Travel the world!</li>
  </ul>
);
ReactDOM.render(goals, document.getElementById('app'));

I hope I’ve helped someone get excited about React as much as I was at my first experience. We’ve talked a bit about how to create and render JSX elements.

This is the first step in acquiring the React skill. I believe with what you’ve learned, you can start creating some awesome React apps. If you’re very interested in more, check out my Building with React.js from Lagos: Part 2 — Learn JSX.