We will write our React application under the source directory, here. In index.js, to start working with React, we need to import React first. We import React from React, we also need to import ReactDOM, since we're going to be working with a browser. We import it from ReactDOM. The first ReactDOM API that we need is to render something. So the function is render, and this function takes two arguments. The first argument is what to render. We're going to render a React element.
So the API is React.createElement, and we'll come back to its arguments in a little bit. The second argument to render is where we want this element to be rendered. So we're going to render it simply in an element in the document. I'm going to use get element by ID, which is a DOM API, and give it root, so in here, I'm saying, render it to an element in the document that has the ID root. So we don't actually have an element in the document that has an ID root, so I'm going to go under views, index.js, I'm going to introduce a new element that has the ID root.
The second argument is any attributes that we want this h2 to have. If we don't have any attributes, we can just pass a null here. And the rest of arguments for the create element call are all the children that we want this element to have. So let's render a simple Hello React. Looks good, now to get this working, we need to run npm run dev, this will run our webpack and generate the bundle.js file from our React source code so far, as you can see, there's a bundle.js file now generated.
This bundle.js is generated under public, so just like we served about that HTML statically with the Express static middleware, we can also serve bundle.js statically. But we do need to include this bundle.js in our HTML somewhere. Usually, we include it in the footer, right after everything else, so in here we can go with a script tag and just do /bundle.js here. We'll also need to run our node webserver, which we can do with npm start.
So React.createElement h2 is going to give us a simple object. This object has many properties, but the most important properties are the type of the object, which is an h2, and the props property, which has a children property that holds the text that we just rendered. So with React, we simply describe HTML elements as objects, and then React put them together into a tree. And it keeps a copy of this tree in memory, so when things change, React will recalculate the tree, and actually compare trees.
And it takes to the browser only the difference between the new tree and the old tree. And this makes React very efficient. However, working with React API like this is not very pleasant, because we're very used to HTML. This is why we can use JSX. So with JSX, we get to actually write HTML in here, just like that, same thing, Hello React with JSX. This will just work because we configured Babble to actually compile this code into React.
I'm going to put these on multiple lines, and I'm going to go ahead and create a variable, color. And this is going to depend on the Math.random value. So I'm going to take the Math.random value, and I'm going to do a condition here. If Math.random is greater than .5, I want the color to be green. Otherwise, I want it to be red. So this is a simple ternary statement, and I'm going to go ahead and use it. In h2 here, I can pass a style object, and this style object could be a variable.
Let's clean up this example. So, JSX is really similar to HTML. There are a few very subtle differences. For example, if you want to pass a class to this element, you can't just do class. You have to do class name. So for example, text center here, that's the class name, to center a text in Bootstrap, and lets make sure that this is working. Let me remove the Math.random part. So we go with class name because the DOM API is actually class name. So for example, if you do document.getElementById for our root element, this is a non-element, let's go ahead and put it in a variable, DE.
So now if we want to do stuff on DE, for example, if I want to change the class name of DE, this is the DOM API. It can do class name, there's class list, there are plenty of other APIs that you want to explore. So React actually used the same thing as the DOM API, so it's class name and not class.
- Configuring webpack and Babel
- Working with native Node modules
- Creating an Express server
- Working with React components and JSX
- Loading and working with test mock data
- Fetching data from a remote API
- Working with data in MongoDB
- Isomorphic rendering on the server
- Front-end routing and back-end routing