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 initand 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-scratchin this example, if you just press enter. - You can also set a version number (default is
1.0.0), description, entry point (default isindex.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'
export default class ComponentA extends Component {render() {return(<div><ComponentB /><ComponentC /></div>)}}
ComponentB:
// components/componentB.jsimport React, { Component } from 'react'
export default class ComponentB extends Component {render() {return(<div><h1>Hello,</h1></div>)}}
ComponentC:
// components/componentC.jsimport React, { Component } from 'react'
export default class ComponentC extends Component {render() {return(<div><h1>World</h1></div>)}}
And that’s it! Have fun with React!