3,995 reads

React tutorial: setting up a React project with webpack

by Vinny MartinezMarch 11th, 2017

Too Long; Didn't Read

It takes a lot of pieces to set up a <a href="https://hackernoon.com/tagged/react" target="_blank">React</a> project from scratch using <a href="https://hackernoon.com/tagged/webpack" target="_blank">webpack</a>. This is a walkthrough on how I set my last project up.

People Mentioned

Company Mentioned

featured image - React tutorial: setting up a React project with webpack

It takes a lot of pieces to set up a React project from scratch using webpack. This is a walkthrough on how I set my last project up.

First let’s initialize npm.

You will need to:

Open up your terminal: In a Mac you can Spotlight search for terminal or find it in Applications -> Utilities -> Terminal
Use the command line create a project directory: mkdir react-from-scratch
Navigate into that directory: cd react-from-scratch
Run npm init and npm will walk you through creating a new npm package
First you will be prompted to enter a package name: package name: (react-from-scratch). The project will take the name of the current directory, react-from-scratch in this example, if you just press enter.
You can also set a version number (default is 1.0.0), description, entry point (default is index.js), test command, git repository, keywords, author and license. I am going to stick with most of the defaults but I added a brief description and an author name.

Once you go through all of the options, you will be prompted with an Is this ok? (yes) message. Just press return to confirm and now you are done initializing your package.json file!

// package.json

{"name": "react-from-scratch","version": "1.0.0","description": "the demo","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "Vinny Martinez","license": "ISC"}

Add a .gitignore file to the project so that the node_modules directory doesn’t go to GitHub. I just use the one created for Node that can be found here: https://github.com/github/gitignore/blob/master/Node.gitignore

Install webpack to npm dev environment

npm install --save-dev webpack webpack-dev-server

Create webpack.config.js

I created an ‘app’ directory and a ‘dist’ directory in my project directory. I placed my index.js file in the app directory and placed a blank bundle.js file in the dist directory. I set the entry and output as seen here. Note the publicPath. I needed the publicPath option to enable my webpack-dev-server.

// webpack.config.js

var path = require('path');

module.exports = {entry: './app/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),publicPath: "/dist/"}};

Install babel and the babel presets for react and es6 into your npm dev only environment

npm install --save-dev babel-core babel-loader babel-react

Install React and ReactDOM

npm install --save react react-dom

then set the webpack.config.js file with the babel-loader

var path = require('path')

module.exports = {entry: './app/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),publicPath: "/dist/"},// add the babel-loader and presetsmodule: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: [{loader: "babel-loader",options: { presets: ['env', 'react']}}]}]}// end of babel-loader}

Now I just need to add a script to my package.json file to easily start up my webpack-dev-server so I can edit my project and get immediate results.

// package.json

{"name": "react-from-scratch","version": "1.0.0","description": "the demo","main": "index.js","scripts": {"start": "webpack-dev-server --open","test": "echo \"Error: no test specified\" && exit 1"},"author": "Vinny Martinez","license": "ISC"}

That is all the webpack setup.

Now to set up the directories. I did something that looked a little like this:

├── app│ ├── components│ │ ├── componentA.js│ │ ├── componentB.js│ │ ├── componentC.js│ │ ├── componentD.js│ │ └── componentE.js│ └── index.js├── dist│ └── bundle.js├── index.html├── package.json└── webpack.config.js

This is my index.html file:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>My App</title></head><body><div id="root"></div><script src="dist/bundle.js"></script></body></html>

and this is my index.js file:

import React from 'react';import ReactDOM from 'react-dom';import ComponentA from './components/componentA'

ReactDOM.render(<div><ComponentA /></div>,document.getElementById('root'))

Now we can create some components:

ComponentA:

// components/componentA.jsimport React, { Component } from 'react'import ComponentB from './componentB'import ComponentC from './componentC'