Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Getting Started With React

by
Length:LongLanguages:
This post is part of a series called Getting Starting with React.
Data Persistence and Sessions With React
Final product image
What You'll Be Creating

MVC is a very popular paradigm in web development and has been around for quite some time. The React framework is an powerful part of that Model-View-Controller trinity, because it focuses purely on the View alone. React is written in JavaScript and created by the Facebook and Instagram development teams.

React is being used all over the web to create rapid web applications that are easy to maintain due to the way the React framework structures the view layer code.

What Can React Do?

  1. Build lightning fast, responsive isomorphic web apps, agnostic of frameworks. React makes no assumptions about the technology stack it resides in.
  2. Virtual DOM manipulation provides you with a simple programming model which can be rendered in the browser, on the server or the desktop with React Native.
  3. Data flow bindings with React are designed as a one-way reactive data flow. This reduces boilerplate requirements and is easier to work with than traditional methods.

Hello World

To get us started, here is a simple example of React taken from the official examples:

This example will render ‘Hello John’ into a <div> container. Take notice of the XML/HTML-like syntax that is used on lines 3 and 8. This is called JSX.

What’s JSX?

JSX is an XML/HTML-like syntax which is used to render HTML from within JavaScript code. React transforms JSX into native JavaScript for the browser, and with the tools provided you can convert your existing sites’ HTML code into JSX!

JSX makes for easy code-mingling as it feels just like writing native HTML but from within JavaScript. Combined with Node, this makes for a very consistent workflow.

JSX is not required to use React—you can just use plain JS—but it is a very powerful tool that makes it easy to define tree structures with and assign attributes, so I do highly recommend its usage.

To render an HTML tag in React, just use lower-case tag names with some JSX like so:

Installing React

There are several ways to use React. The officially recommended way is from the npm or Facebook CDN, but additionally you can clone from the git and build your own. Also you can use the starter kit or save time with a scaffolding generator from Yeoman. We will cover all of these methods so you have a full understanding.

Using the Facebook CDN

For the fastest way to get going, just include the React and React Dom libraries from the fb.me CDN as follows:

Installation From NPM

The React manual recommends using React with a CommonJS module system like browserify or webpack.

The React manual also recommends using the react and react-dom npm packages. To install these on your system, run the following at the bash terminal prompt inside your project directory, or create a new directory and cd to it first.

You will now be able to see the React installation inside the node_modules directory.

Installation From Git Source

Dependencies

You need to have Node V4.0.0+ and npm v2.0.0+. You can check your node version with node version and npm with npm version

Updating Node via NVM

I recommend using the nvm - node version manager to update and select your node version. It’s easy to acquire nvm by simply running:

This script clones the nvm repository to ~/.nvm and adds the source line to your profile (~/.bash_profile, ~/.zshrc or ~/.profile).

If you wish to manually install nvm you can do so via git with:

To activate nvm with this method, you need to source it from shell with:

Note: Add this line to your ~/.bashrc, ~/.profile, or ~/.zshrc files respectively to have it automatically sourced upon login.

Using NVM

With nvm now installed, we can get any version of node we require, and can check the list of installed versions with node list and the ones available with node ls-remote. We need a version higher than 4.0.0 to work with React.

Install the newest version and set it as the default version with the following:

Node is updated and npm is included in the deal. You’re now ready to roll with the installation.

Build React From Git Source

Clone the repository with git into a directory named react on your system with:

Once you have the repo cloned, you can now use grunt to build React:

At this point, a build/ directory has been populated with everything you need to use React. Have a look at the /examples directory to see some basic examples working!

Using the Starter Kit

First of all download the starter kit.

Extract the zip and in the root create a helloworld.html, adding the following:

In this example, React uses Babel to transform the JSX into plain JavaScript via the <script type="text/babel">.

Using a Separate JavaScript File

Create a new file at src/helloworld.js and place the following code inside it:

Now all you need to do is reference it in your HTML, so open up the helloworld.html and load the script you just created using a script tag with a text/babel type attribute as so:

  • {item.first} {item.last}
  • }); //Return the display return (
      {list}
    ); } } //Make it accessible to the rest of the app export default UserList; Now to finish up, we need to add some data for this list. We will do that inside `components/ContentPage/ContentPage.js`. Open that file and set the contents to be as follows: Now when we save, the webpack will rebuild and browsersync will display the changes in your browser. Take a look at the source code to see how it was rendered. ## Summary We have used the Yeoman scaffolding generator `react-fullstack` to start a React web app based on the starter kit. For a further explanation of the file and directory layout, check out the [readme in the react starter kit git repo](https://github.com/kriasoft/react-starter-kit/blob/master/README.md). From here we edited the `index.jade` file so it was nulled out and began creating our own display view, making a new component named `UserList`. Inside `components/UserList/UserList.js` we define how the list will be rendered with:
  • {item.first} {item.last}
  • }); Here it is important to note that React requires all iterated items to have a unique identifier provided under the `key` attribute. To display the list we include it inside the `ContentPage.js` file with `import UserList from '.../UserList';` and define some test data with: Inside `ContentPage.js` we call the `UserList` component with the JSX ``. Now the `UserList` component can access the `data` attribute via `this.props.data`. Any time we pass a value with an attribute of a component, it can be accessed via `this.props`. You can also define the type of data that must be provided by using the `propTypes` static variable within its class. ### Extended Components vs. React.createClass Syntax Finally, an important point to note is that this example made use of extended components. This has a lot of benefits for semantically structuring your code. But you may wish to access a more bare-bones approach, as many other examples do. So instead of `class ComponentName extends Component` that you have seen before in this tutorial, you create a React class with the following syntax for example:
  • {this.props.data.text}
  • ; } }); var MyNewComponent = React.createClass({ render: function() { return (
      {this.props.results.map(function(result) { return ; })}
    ); } }); Well that wraps us up for this introduction to React. You should now have a good understanding of the following: * getting React * how to use Babel with React * using JSX * creating a component via extend method * using your component and passing it data In the coming parts, we will discuss how to use JSX further, how to work with a database as a persistent data source, and also how React works with other popular web technologies such as PHP, Rails, Python and .NET.</div>
    Advertisement
    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.