It takes a lot of pieces to set up a project from scratch using . This is a walkthrough on how I set my last project up. React webpack 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 and npm will walk you through creating a new npm package npm init First you will be prompted to enter a package name: . The project will take the name of the current directory, in this example, if you just press enter. package name: (react-from-scratch) react-from-scratch You can also set a version number (default is ), description, entry point (default is ), 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. 1.0.0 index.js Once you go through all of the options, you will be prompted with an message. Just press return to confirm and now you are done initializing your file! Is this ok? (yes) package.json // 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 presets // end of babel-loader} module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,use: [{loader: "babel-loader",options: { presets: ['env', 'react']}}]}]} 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": { "test": "echo \"Error: no test specified\" && exit 1"},"author": "Vinny Martinez","license": "ISC"} "start": "webpack-dev-server --open", 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!

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React tutorial: setting up a React project with webpack

Too Long; Didn't Read

People Mentioned

Company Mentioned

Vinny Martinez

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React tutorial: setting up a React project with webpack

Too Long; Didn't Read

People Mentioned

Company Mentioned

Vinny Martinez

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES