GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → jansoren → React Webpack Tutorial

jansoren / React Webpack Tutorial

This is a tutorial on how to get started developing a client side application using ReactJS, Webpack and Npm

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

reactwebpacknpm

Projects that are alternatives of or similar to React Webpack Tutorial

Webpack Static Html Pages
Webpack template/example with multiple static html pages
Stars: ✭ 202 (+274.07%)
Mutual labels:  webpack, npm
Typescript Webpack Starter
⚡ create-ts-lib: A Starter Kit and a CLI to create your TypeScript / ES6 module bundled by Webpack without thinking about build or unit tests configurations. 🏠
Stars: ✭ 358 (+562.96%)
Mutual labels:  webpack, npm
Scalajs Bundler
Stars: ✭ 206 (+281.48%)
Mutual labels:  webpack, npm
Reactn
React, but with built-in global state management.
Stars: ✭ 1,906 (+3429.63%)
Mutual labels:  webpack, npm
Articles Translator
📚Translate the distinct technical blogs. Please star or watch. Welcome to join me.
Stars: ✭ 606 (+1022.22%)
Mutual labels:  webpack, npm
Angularjs Webpack Starter
🚀 A modern frontend setup for AngularJS projects using NPM, TypeScript and Webpack.
Stars: ✭ 173 (+220.37%)
Mutual labels:  webpack, npm
Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (+466.67%)
Mutual labels:  webpack, npm
Webpack Guide
Webpack Handbook
Stars: ✭ 136 (+151.85%)
Mutual labels:  webpack, npm
Kotlin Frontend Plugin
Gradle Kotlin (http://kotlinlang.org) plugin for frontend development
Stars: ✭ 578 (+970.37%)
Mutual labels:  webpack, npm
Phaser Ce Npm Webpack Typescript Starter Project
Project to get you started with your Phaser-CE (using the npm module) game using Typescript and Webpack for building! No hassle asset management, Google Web Font loader, live server, development vs distribution build pipeline, Electron packaging for desktop builds, and more...
Stars: ✭ 414 (+666.67%)
Mutual labels:  webpack, npm
Goa
基于Beego开发的问答系统
Stars: ✭ 154 (+185.19%)
Mutual labels:  webpack, npm
Luna
Manage npm dependencies through a modern UI.
Stars: ✭ 948 (+1655.56%)
Mutual labels:  webpack, npm
Modern Wasm Starter
🛸 Run C++ code on web and create blazingly fast websites! A starter template to easily create WebAssembly packages using type-safe C++ bindings with automatic TypeScript declarations.
Stars: ✭ 140 (+159.26%)
Mutual labels:  webpack, npm
100 Days Of Code Frontend
Curriculum for learning front-end development during #100DaysOfCode.
Stars: ✭ 2,419 (+4379.63%)
Mutual labels:  webpack, npm
Book
《现代化前端工程师权威指南》https://guoyongfeng.github.io/book/
Stars: ✭ 141 (+161.11%)
Mutual labels:  webpack, npm
Fullstacktemplate
A Template for Creating a Full Stack Web Application with Python, NPM, Webpack and React
Stars: ✭ 223 (+312.96%)
Mutual labels:  webpack, npm
Simple Boilerplate
A simple webpack boilerplate for your comfortable work with HTML, JS and CSS.
Stars: ✭ 116 (+114.81%)
Mutual labels:  webpack, npm
Php Sf Flex Webpack Encore Vuejs
A simple app skeleton to try to make every components work together : symfony 4 (latest stable at the date, but work with sf 3.3+ if you just change the versions in composer.json), symfony/flex, webpack-encore, vuejs 2.5.x, boostrap 4 sass
Stars: ✭ 118 (+118.52%)
Mutual labels:  webpack, npm
Front End Doc
前端文档汇总（觉得对您有用的话，别忘了star收藏哦^_^ ！）
Stars: ✭ 372 (+588.89%)
Mutual labels:  webpack, npm
Vue Admin Webapp
this is a admin project
Stars: ✭ 673 (+1146.3%)
Mutual labels:  webpack, npm
View All Similar Projects ➔

React Webpack Tutorial

This tutorial will cover how to get started developing a client side application using these technologies:

You can either follow the tutorial below or just jump to the resulting code with:

  1. Cloning this repo git clone [email protected]:jansoren/react-webpack-tutorial.git
  2. Run npm install from the myapp-folder
  3. Run command webpack
  4. Open /myapp/dist/index.html

If you find the tutorial helpful, and maybe learned something new, please give it a star here. If you have improvement suggestions please create an issue or a pull request. Enjoy :-)

Tutorial prerequisites

1. Initializing your project with npm

  1. Enter your project main folder. For this tutorial I will use myapp as folder and you will find the resulting code there
  2. Run npm init to create the project package.json file
  3. Press on the npm init questions to get the default value
  4. Install Webpack with npm install --save-dev webpack. When npm uses --save-dev it automatically adds the webpack package to the package.json

You have now created an initial package.json file that we later on will fill with the necessary packages for installing the application with npm install.

2. Create initial application files

  1. Open myapp-folder in your preferred IDE or Atom
  2. Create your application Webpack config file webpack.config.js in main project folder with this initial content:
var config = {
  context: __dirname + "/app",
  entry: "./main.js",

  output: {
    filename: "bundle.js",
    path: __dirname + "/dist",
  },
};
module.exports = config;
  1. Create folder myapp/app to contain all your application files.
  2. Create your application main file main.js with this initial content:
var React = require('react');
var ReactDOM = require('react-dom');

var Content = React.createClass({
  render: function() {
    return (
      <div>
        <b>Congratulations</b>, you are now ready to implement your client side application! Enjoy :-)
      </div>
    );
  }
});
ReactDOM.render(<Content />, document.getElementById('content'));
  1. Install React DOM and add it to your package.json file automatically using npm install --save react react-dom
  2. Install Babel to transform the content of a .js file from ES6 to ES5 npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
  3. In your webpack.config.js add the babel-loader that you just installed like this:
var config = {
  ...
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'env']
        }
      }
    ],
  }
};
  1. Create folder myapp/dist and create index.html file with content:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React Webpack Tutorial!</title>
  </head>
  <body>
    <div id="content"></div>
    <script src="bundle.js"></script>
  </body>
</html>
  1. Run command webpack in your main folder that will result in something like this:
Hash: 35d746ba5bf01c587890
Version: webpack 3.10.0
Time: 829ms
  Asset    Size  Chunks                    Chunk Names
bundle.js  728 kB       0  [emitted]  [big]  main
[81] ./main.js 572 bytes {0} [built]
  + 183 hidden modules

  1. Open /dist/index.html to see your client side application

  2. If you want some pointers on developing your client side application you should check these sites out:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].