React:

    Get started using React in SourceLair

    Introduction

    This guide is meant to help you set up a complete environment for development with React, using Node.js and, its package manager, NPM for installing necessary packages.

    In order to make this a complete environment we will be using technologies such as Babel and Webpack. This guide is not meant to teach you how to use React, Babel or Webpack, but simply show you how to set them up in a minimal configuration for a frictionless development experience with React on SourceLair.

    You can choose to follow this guide step by step or immediately start a project with the final setup by using this Blueprint.

    This guide assumes that

    Knowledge, or having an idea, of Webpack, Babel and NPM is good to have but not really necessary for this guide.

    Set up

    If you decide to follow this guide and not clone the available Blueprint , first thing you will have to do is create a Node.js project.

    For the sake of this guide, once we first land on our new Node.js project, we will uninstall some dependencies installed by default in our project, since they are of no use in our case.

    So, let's run the following command in the terminal:

    npm uninstall cookie-parser jade morgan serve-favicon -S

    Now we can delete the following directories, and all their contents:

    • /bin/
    • /views/
    • /routes/

    We will also delete the file app.js and replace it with a new file, inside the root directory, named server.js which will have the following contents

    var fs = require('fs');
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');

var app = express();

app.use('/', express.static(path.join(__dirname, 'public')));

app.listen(3000, function () {
  console.log('React app listening on port 3000');
});

    After having done that, let's create an app directory into our root directory, and a components directory inside of it. We can create the directories in any of the following ways:

    • Right click anywhere on the empty space of the File Explorer and select "New Folder"
    • Click on the "Create new Folder" button on top of the File Explorer
    • Type mkdir app in the terminal

    /app/components/ will be the place where we place all of our React components.

    Inside the app directory let's create the file index.jsx with the following contents

    var React = require('react');
var ReactDOM = require('react-dom');

var ExampleComponent = require('./components/example');
/*Require more of your components here */

ReactDOM.render(
    <ExampleComponent whom="React"/>,
    document.getElementById('content')
);

    and inside the /app/components/ directory let's create the file example.jsx with these contents

    var React = require('react');

var ExampleComponent = function ExampleComponent(props) {
    return (
        <div>
            Hello from {props.whom}
        </div>
    );
};

module.exports = ExampleComponent;

    This should leave you with the following file structure:

    |-app/
   |-components/
      |-example.jsx
   |-index.jsx

    /app/index.jsx will be the base script that will load every other React component and have them added to the DOM.

    Finally, inside the public directory we will create an index.html file, with the following contents:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>React</title>
        <script   src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
        <link rel="stylesheet" href="./stylesheets/main.css">
    </head>
    <body>
        <div id="content"></div>
        <script src="./javascripts/bundle.js"></script>
    </body>
</html>

    Next we should install our dependencies.

    Install dependencies

    Install React

    Head over to the terminal, if you are not already there, and type the following:

    npm install react react-dom -S

    This will, as you must have guessed, install the react and react-dom libraries as modules that we can use in our project. Congrats!

    Install Babel

    So, now we have React available to our project and, in theory, we are good to start. However, if we intend to use the JSX syntax, we are going to need a way to transpile our JSX into vanilla JavaScript before we serve it to the browser. The tool that will help us with this process is Babel , so let's install it then.

    Back to the terminal type this:

    npm install babel-core babel-preset-react -D

    This will install the Babel core package and the plugin that allows it to transpile JSX to Javascript. The -D argument will install these packages as development dependencies (devDependencies) in our package.json. Now, in our root directory, we will need to create a .babelrcfile, with the following content

    {
    "presets": [
        "react"
    ]
}

    Note that it may take some time for the dependencies to install, due to the large amount of sub-dependencies

    Install Webpack

    Webpack is a module bundler. In case you are not familiar with any of these words, this means that it allows us to have our JavaScript broken into many small files and it will bundle them into one bigger file, all while taking care of dependencies between them.

    What's more, Webpack can help us even further in development. For example, it can allow us to plug Babel onto it and automatically transpile any files before bundling them or have it watch our project files for changes and automatically re-bundle everything. Webpack can do much more, but these are the two things that we care the most at this point.

    So, in order to install webpack we type the following:

    npm install webpack -D

    And to connect Babel to it we should install

    npm install babel-loader -D

    After these are installed we will need to create a webpack.config.js file in our root directory. We can put this pretty minimal configuration in it

    module.exports = {
    entry: './app/index.jsx',
    output: {
        filename: 'public/javascripts/bundle.js'
    },
    module : {
        loaders: [{
            test : /\.jsx?$/,
            exclude : /node_modules/,
            loader : 'babel-loader',
            query : {
                presets: ['react']
            }
        }]
    },
    resolve : {
        // you can now require('file') instead of require('file.jsx')
        extensions : ['', '.js', '.jsx', '.json']
    }
};

    If you are not familiar with the webpack.config.js file and its contents, this excellent article by Pete Hunt should give you some context.

    What's important to understand from this configuration is the following:

    • The first file Webpack will read is /app/index.jsx and from there, according to the dependencies/files required from it, Webpack will start building one single bundle file.
    • The bundled file will be placed in/public/javascripts/ with the name bundle.js

    And that's it, all dependencies are installed and configured

    Configuring package.json and Procfile.dev

    To make our lives easier we are going to make a couple of small additions to the package.json and Procfile.dev files.

    So, head over to package.json and modify the scripts section to look like this:

    "scripts": {
    "start": "node server.js",
    "build": "webpack -d",
    "build-watch": "webpack --watch -d"
  },

    This adds the build command to our npm run repertoire which will start Webpack and will also generate a sourcemap for the output file (-d). We also added an optional build-watch command that will also watch our files for changes (--watch), in order to automatically re-bundle our files when a change occurs,

    You can run any command included in the scripts section of your package.json file, by opening up the Command Palette with Cmd+Shift+P and typing Node.js: <COMMAND NAME>. For example in our case we could type Node.js: build

    Next head over to Procfile.dev and change it to look like this:

    web: npm run start
builder: npm run build-watch

    Now, every time you restart your server you will also run the build-watch command.

    That's it, you are now all set up and ready to start developing to your heart's content with React on SourceLair.

    Starting your server

    To start your server you can simply press the "Start Server" button on the side bar or run either of these commands in the terminal:

    node server.jsor npm run start

    Previewing your application

    After you have set up everything, you can preview your application through your project's Public URL. To access your project's Public URL, open the Command Palette and use the Server: Open Public URL command.

    You can also click on the eye icon in the sidebar, to open your Public URL and preview your application.

    A practical example

    Let's run the official React tutorial. You can do this whether you followed the guide step by step or whether you used the pre-made Blueprint.

    We start by replacing the contents of our own server.js with the contents of the server.js from the tutorial, and the contents of our /app/index.jsx with the contents of example.js . Do not forget to include react and react-dom at the beginning of the example.js file, like so:

    var React = require('react');
var ReactDOM = require('react-dom');

    We should also create the file comments.json into our root directory, with a simple [] as contents (otherwise we will get errors), and that's it! We now have the official React tutorial up and running.

    Previous step
    Step of
    Next step