React Basics

This post is intended for those who are new to React but have some experience with JavaScript, HTML, and CSS. As I now have a bit of experience using React, I thought I would pay it forward and create a blog series covering React. If you are new to React, I hope this post helps you understand the very basics of it. And, like us all, I am learning as I go and if you find some mistakes or concepts that could be more concisely explained, please feel free to school me.

What is React?

From the official React page: 'React is a (1)JavaScript library for building (2)user interfaces.' This is a very simple sentence, no? Ok, let’s unpack it a bit to help us understand more about the power of React and why it is so useful and popular.

(1)React - JavaScript Library

This means React apps are built using JavaScript. This, in turn, means that React apps run in the browser and NOT on the server. Why is it significant that React apps run in the browser? Well, this means that the apps do not need to make calls to the server which gives them a huge speed advantage; things happen instantaneously.

(2)React - User Interfaces

Basically, user interfaces can be thought of as components (custom HTML elements) in React. Check out the graphic below:

Breaking a website up into React components provides a few advantages:

1. Teamwork becomes much easier as each component can be developed separately and is self-contained.

2. It makes it easier to keep code manageable whether working alone or in teams. If for example, a sidebar needs to be updated, we needn't search through our entire webpage code to find it. The code can be easily found in the sidebar component.

3. Components can easily be reused as needed.

4. Components can be thought of as custom HTML elements.

5. In bigger JavaScript apps, the user interface state can be difficult to manage. React components help solve this problem. I will cover more on this later in this blog series.

Are you beginning to see the power of React a bit more clearly? React reduces the complexity of user interfaces created using JavaScript and HTML by writing maintainable, manageable, and reusable pieces of code.

Below we will look at some very basic code to help us gain a deeper understanding of what we just read.

Before we continue I would highly encourage you to open up a new Pen on CodePen and add the code above because we are about to add React! Do it! Being able to see these changes happen in the browser helps solidify these concepts. Code along! Don't just sit there! React! Sorry, bad pun, I know.

OK, got your Pen open now? Good. Now will need to click on the little gear in the JS window and add the following in order to code along:

1. React - don't worry about the version.

2. React-dom - React handles the logic and ReactDOM is responsible for taking the 'React logic' and posting it to the real DOM.

3. Babel - allows us to use different syntaxes, JSX in this case. Find Babel under the JavaScript preprocessor dropdown. When this is done correctly, you should see '(Babel)' next to JS in the window. You will get a syntax error if this isn't done.

Let's look at the code:

<div class='person'>
  <h1>Ryan</h1>
  <p>Age: 34</p>
</div>

<div class='person'>
  <h1>Maria</h1>
  <p>Age: 29</p>
</div>

Above, there are two 'person cards' in HTML. We can think of each 'person card' as a component in React. The person div does not change, only the information inside it does. The cards are easily reusable and maintainable.

Some basic CSS styling for the cards could look like this:

.person {
  display: inline-block;
  margin: 10px;
  border: 1px solid #eee;
  box-shadow: 0 2px 2px #ccc;
  width: 200px;
  padding: 20px
}

Now we will begin to add some React. In its simplest form, a React component is a function that returns some JSX (syntactic sugar that looks like HTML inside the return below).

function Person() {
  return (
    <div class='person'>
      <h1>Ryan</h1>
      <p>Age: 34</p>
    </div>
  );
}

Notice in the code above that the function is returning the person div or 'person card' we created earlier.

Now, we will change our HTML to look like the following:

<div id='p1'></div>
<div id='p2'></div>

Next, we make a few changes to our function and use ReactDOM:

function Person(props) {
  return (
    <div className='person'>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

ReactDOM.render(<Person name='Ryan' age='34' />, document.querySelector('#p1'));

ReactDOM.render(<Person name='Maria' age='29' />, document.querySelector('#p2'));

Basically, React creates the components (custom HTML elements) and then hands them to ReactDOM so they can be rendered to the real DOM as HTML.

ReactDOM has a render method that allows us to render a JavaScript function as a component to the real DOM. The render method takes two arguments that you can see above. First, it wants a component. We use JSX syntax - <Person /> to tell it which component it should render. Second, the render method wants to know where it should render the JS function that is now a component thanks to React and JSX. We tell it that the component belongs in the div with an id of 'p1' and 'p2' respectively.

Yes, you noticed that we added name='Ryan' age='34' inside the <Person /> component. In React, this concept is called props. We have added two props to each component, name and age.

Notice that props is being passed into the Person function. Again this function is now a component in React. We want this component to have access to props so we can dynamically change the information inside it. We output dynamic content using single curly braces in React - {props.name} and {props.age}.

Look at this line: <div className='person'>. Notice anything different? Yes! <div class='person'> changed to <div className='person'>. This is because class is a keyword in JavaScript. React uses className and this helps illustrate the following point:

function Person(props) {
  return (
    <div className='person'>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

The code inside the return above isn't actually HTML, it's JSX. However, it almost always looks exactly like HTML and is transformed into JS behind the scenes by React.

If you have been coding along, at this point you should be able to see two 'person cards' rendering each looking exactly like the ones we rendered without using any React in the very beginning. Pretty cool huh!?

In case you're not seeing the cards, I'll post what the current code should like below:

HTML:

<div id='p1'></div>
<div id='p2'></div>

CSS:

.person {
  display: inline-block;
  margin: 10px;
  border: 1px solid #eee;
  box-shadow: 0 2px 2px #ccc;
  width: 200px;
  padding: 20px
}

JS:

function Person(props) {
  return (
    <div className='person'>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

ReactDOM.render(<Person name='Ryan' age='34' />, document.querySelector('#p1'));

ReactDOM.render(<Person name='Maria' age='29' />, document.querySelector('#p2'));

Take a minute to let that sink in. Hopefully, you are beginning to see the potential in this. We can compose very large and complex applications using reusable pieces.

One last thing:

<div id='app'></div>

Change the HTML in your Pen to match above.

Next:

var app = (
  <div>
    <Person name='Ryan' age='34' />
    <Person name='Maria' age='29' />
  </div>
);

Make a new variable and move the two components into it. Note that they must live inside of a div. The component elements are wrapped in a div because JSX requires only one root/parent element.

Now we can simply change:

ReactDOM.render(<Person name='Ryan' age='34' />, document.querySelector('#p1'));

ReactDOM.render(<Person name='Maria' age='29' />, document.querySelector('#p2'));

To:

ReactDOM.render(app, 
document.querySelector('#app'));

BOOM! Now we make only one call ReactDOM.render by providing the variable that contains both components as the first argument. This is very popular and also sets us on a path to create a single page application (SPA).

The final code should look like this:

function Person(props) {
  return (
    <div className='person'>
      <h1>{props.name}</h1>
      <p>Your age: {props.age}</p>
    </div>
  );
}

var app = (
  <div>
    <Person name='Ryan' age='34' />
    <Person name='Maria' age='29' />
  </div>
);

ReactDOM.render(app, 
document.querySelector('#app'));

Recap

It is my hope that you found this read to be useful. I am trying to improve my programming understanding by blogging and I am trying to improve my blogging by writing more concisely, giving meaningfully code snippets, and creating blog series. You can help others learn too. Start by leaving me any feedback you want!

Cheers and Happy coding!