Skip to content
This repository was archived by the owner on Aug 3, 2018. It is now read-only.

1. Add React

Jump to bottom
Wiley Hilton edited this page Mar 30, 2018 · 1 revision

The first step in these projects is to add react. Without a react compiler adding react really doesn't do much. We'll be adding both react, webpack, and all the webpack dependencies we need.

Init NPM Project

NPM (Node Package Manager) has to be initiated before you can download any packages. To initiate the npm project just navigate to the project's folder using cmd / powershell / bash and run npm init then follow the prompts - you can just git enter about 10 times and accept the defaults (node will need to be installed for this to work).

Install node packages

We will need to download a few node packages for webpack and react. They are listed here (this may seem like alot, but I'll explain what each does and why we need it):

  • babel-core - babel is what compiles react. Without these babel loaders webpack wouldn't work with react files
  • babel-loader
  • babel-preset-env
  • babel-preset-react
  • react - React Component library
  • react-dom - React rendering library
  • webpack - The library that compiles all types of files

to install all these packages at once run:

npm i --save babel-core babel-loader babel-preset-env babel-preset-react react react-dom webpack

While that's running we can start on our webpack.config file.

Webpack Config

Create a new files titled ~/webpack.config.js. This is what the first iteration of the file should look like:

var path = require('path'),
    webpack = require('webpack');

(function () {
    "use strict";
    
    var config = {
        // These plugins can be used on every file
        // This way you don't have to have var React = require('react') on every page
        plugins: [
            new webpack.ProvidePlugin({
                React: 'react',
                ReactDOM: 'react-dom'
            })
        ],
        
        entry: {
            base: './Content/base.jsx' // Entry point for the compiler
        },
        
        output: {
            path: path.join(__dirname, 'public'), // Where the bundle gets saved to (this translates to ~/public/)
            filename: '[name].bundle.js' // The name of the bundle once it's saved
        },
        
        // What modules can be included in this webpack and how to compile them
        module: {
            loaders: [
                {
                    test: /\.jsx?$/,
                    loaders: [
                        'babel-loader?presets[]=env,presets[]=react'
                    ],
                    exclude: /node_modules/
                }
            ]
        }
    };

    module.exports = config; // Every module in node (most of the time) must export something
}());

First React Component

Create a new react component named ~/Content/base.jsx (notice that the path and name of this file is mentioned in the webpack.config.js file).

Add the following to this file:

class Base extends React.Component {
    // This function is required on all React.Components as it's what's called to render the component
    render() {
        return (
            <div>
                Hello World
            </div>
        )
    }
};

// This renders the passed in component to the passed in DOM
ReactDOM.render(
    <Base />, // Name of the React.Component we just made
    document.getElementById('content') // Remember the div we ID'd 'content' on the _Layout.cshtml page?
);

Compile and Run

By now you're NPM installations should have completed (hopefully without errors). If so then run webpack (it should be able to find the webpack.config.js file if you're in the same directory).

Once compiled you should have a new file (possibly hidden on visual studios) located at ~/public/base.bundle.js (same as the output settings on webpack.config.js). You'll need to had a link to this file on the _~/Views/Shared/Layout.cshtml page for it to do anything. So after adding the script tag to the layout page (ensure that the script tag is added after the div is created) the page should look like:

<!DOCTYPE html>
<html>
<head>
    <title>Example Title</title>
</head>
<body>
    <div id="content"></div>
    <script src="~/public/base.bundle.js"></script>
    @RenderBody()
</body>
</html>

you can now run the project (or refresh the page if you still have it up) and you should see "Hello World".

Clone this wiki locally