SIMPLE REACTJS SETUP

Simple ReactJS Setup

For many years, I have worked as a PHP developer, but I have started to gravitate more toward front end development to become more marketable. One of the tools I have really fallen for is ReactJS. So I am wanting to share the love with everyone at large and my future web development students at JCCC, where I sometimes teach continuing education classes.

React provides a powerful modular approach to building web application interfaces that is very elegant and in my opinion, intuitive. If you have a background in JavaScript, React is a must for your consideration. You can read more about Facebook's ReactJS here.

React has two ways in which it can be utilized. It can be used by standard inclusion in an HTML document and also via NodeJS/NPM, which is preferred for development. Using it like conventional JavaScript is pretty simple in that you just include it's scripts in your page. With the usage of hosted scripts, you can add a reference quickly without even having to download the library to your project. Thereby allowing you to integrate it very quickly. However, the caveat is that you will not have some of the speed and flexibility for development that may be desired.

Using NodeJS/NPM, is recommended if you want to do serious development and deployment outside of just prototyping and testing as it is much more efficient and provides professional features to aid in development. It also allows you to import a lot of your normal assets through the app, providing a single entry point for your application. Thus when anything changes, your app automatically updates. I will cover both of these setup options below.

Simple ReactJS Usage

Simple usage can be accomplished by just adding the script CDNs (Content Delivery Network) to your document head. If you like, you can of course download the actual libraries, but this is the easiest way to use them in this setting. Be sure to check the React CN website to confirm the urls are up to date (note: I have provided the minified versions).

<html>

<head>

    <title>Simple ReactJS Usage</title>

    <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script>
</head>
<body>
    <script type="text/babel">
    ReactDOM.render(
           <h1> Hello World</h1>
    , document.body );
    </script>
</body>
</html>

The example above is loading the React libraries on page load and then the script within the body calls ReactDom.render and writes a heading to the body of the document that says, "Hello World." Most React apps actually target a specific div by id instead of the body tag. However, this little app will suffice for example purposes.

A Basic Development ReactJS Setup

For a basic development setup, you will need to install a few things to your local machine. These commands work on Linux Ubuntu. Windows and Mac users may want to use this tutorial, which includes an installer for a portion of the install.

Create a place where you will store your React Projects:

mkdir ReactProjects

cd ReactProjects

Install NodeJS and Node Package Manager (NPM): Install with curl using ppa as ubuntu and other Linux repo versions are not always up to date.

If you don't have curl, get it:

apt-get install curl

Get node with curl (Note: this installation also includes NPM):

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install nodejs

FYI: Some systems may require a symbolic link to clarify a naming issue. Only use if you need it:

sudo ln -s /usr/bin/nodejs /usr/bin/node

Use NPM to Get create-react-app:

sudo npm install -g create-react-app

Use the newly installed Create React App to create your first React app.

create-react-app helloworld-app

Change to the directory of yoru newly created app and start the test server:

cd helloworld-app
sudo npm start

NPM will start a test server and display a url to open the app in your browser, which is usually http://localhost:3000.

The NPM Server Output

Create React App will create an app that looks like this in the browser. Open the src/App.js to get started building.

Search This Blog

DAN GUINN TECH BLOG

SIMPLE REACTJS SETUP

Comments

Popular posts from this blog

LINUX ON THE INTEL NUC

Test