Intro to React Components

React is a new JavaScript library that lets designers and developers create the UI, or view layer in MVC, for their sites and apps. React is backed by Facebook, and is used in their products including Facebook and Instagram. React came about to fill the need for a fast UI that handles data changes over time, and that also lets programmers build reusable and testable components. It’s even grown into a library that can be used to build native mobile applications via React Native. All of this is possible by writing JavaScript.

This post will introduce the common UI patterns and code when creating a React app. What we’ll learn in this post:

1. We’ll learn how to use Codepen, a free code sharing and prototyping tool (you can create an account by visiting http://codepen.io/)
2. We’ll learn how to create a React component
3. We’ll learn the JSX syntax that React uses

First, go to http://codepen.io/ and make yourself a free Codepen account. Once that’s complete, click on “+ New Pen” in the upper right side of the screen to make your first pen.

You’ll be treated to a completely blank canvas to start writing code.

Before we proceed though, we’ll need set up our pen. Let’s give our pen a name. Click on the edit icon to edit the title of our pen, and type in “Simple React Component Example”.

Next, let’s add Bootstrap so we can get some basic styling for the component we’re about to make. Click on “Settings” in the upper right hand portion of the screen.

This will bring up a modal where you can change your pen’s settings for how it renders HTML, CSS, JavaScript, and some other inputs to help people find your pen in Codepen’s search. Click on “CSS” under the “Pen Settings” heading.

Click on the select dropdown next to “Quick-add” near the bottom and choose Bootstrap. This adds the path to Bootstrap in the first external CSS input.

Next, jump to the JavaScript tab. Click on the select dropdown under the “JavaScript Preprocessor” heading and choose Babel. (We won’t go into much detail on what Babel is here, other than mentioning that it takes newer JavaScript code and transforms it into an older syntax that older browsers can understand). Under “Quick-add”, let’s add both “React” and “React DOM”.

Finally, click on the large, green “Save & Close” button. Now we’re ready to get cooking. The first thing we want to do is add an empty div with an id of example in the HTML editor in our pen.

React needs this root element to inject the component we’re about to make into our DOM. No other HTML is required here — for all other elements, we’ll be  creating them by writing JSX, which will then be added via React’s Virtual DOM. This root element is familiar if you have any experience with AngularJS.

Next, let’s add a line of CSS to add a little padding to the view area of our pen.

Let’s now create our first component, called “SimpleExample”. Type in the following code into the JS area of our pen.

This bit of code is declaring and doing a couple of things:

1. We are creating a new React ES6 class (a JS class, not CSS class) called “SimpleExample” using JavaScript ES6, the newest version of JavaScript.
2. The render() method inside our class is required for all components, and returns a single element to the DOM (in this case, it’s our <div> that has no attributes on it)
3. We added an h1 element, which looks a lot like regular HTML, but is actually JSX
4. The ReactDOM.render method then takes our SimpleExample component (typed out as the self-closing element <SimpleExample />) and inserts it into our empty div that has the id “example”

Type Ctrl+S (or Command+S on Mac) to call the shortcut to save our pen.  You show now see “A Simple React Component Example” displayed in the view area of our pen. Congrats, you just make your first React component!

Let’s keep going — there’s a few more things to know when making a component that will help going forward in learning React and creating React apps.

An important piece of React components are JavaScript expressions. An expression is a unit of code that resolves into a value. A good example would be adding an attribute to an element — let’s add an image to our component using an expression for its source. Type in the following code to your pen to add this image.

There are a few things to note here:

1. We created a variable called MNMLogo, which is just a string of the URL of the image we want to add
2. We created a new div and gave it a className of “form-group” (since “class” is a reserved word in JavaScript, we need to use the JSX attribute “className” in order to add a CSS class to our div)
3. We created an img element, and for its src attribute, we added the expression {MNMLogo}, which will resolve into the image path declared earlier
4. We added our first comment in JSX, which is essentially a multi-line JS comment, but wrapped in an expression

Next, let’s add some simple form elements into our simple example. Type the following code into our pen editor:

After saving, you show now see a label, a text input, and button, like so:

Interesting bits to note for our form:

1. We used htmlFor as our attribute on our label to create a “for” attribute because “for” is another reserved word in JavaScript (used in for loops)
2. We added a button element that is currently disabled by adding the {true} expression to the disabled attribute — you can enable the button by changing true to false

To wrap up our first React lesson, let’s add some helper text to our form. Type the following code into the pen editor:

Our last code example illustrates two things:

1. All elements must be closed in JSX — notice the <p /> element in the code we just added
2. You can render plain HTML in React using the dangerouslySetInnerHTML property, but you must do so knowing there are security implications — a good example of where you might need to do this would be getting the value of text added into a textarea element, which React has an example of on their homepage (the last example at the bottom)

That wraps up our first React lesson. In the future, we’ll be following up with more React blog posts on creating states and working with props. To view the code we just wrote complete and working, visit our Codepen account at https://codepen.io/mercuryworks/pen/EyQaBO.

Resources & Further Learning

Codepen Documentation: https://blog.codepen.io/documentation/

React Documentation: https://facebook.github.io/react/docs/getting-started.html