react-native-training/manual-react-setup

Name: manual-react-setup

Owner: React Native Training

Description: Manual React App Setup Without create-react-app

Created: 2017-07-24 22:35:44.0

Updated: 2018-05-08 13:07:49.0

Pushed: 2017-07-25 11:42:36.0

Homepage: null

Size: 10154

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Manual & Minimal Babel + Webpack Setup

To download this config

1. clone repo
   

   clone https://github.com/react-native-training/manual-react-setup.git
   

2. cd into directory
   

   anual-react-setup
   

3. install dependencies using npm or yarn
   

    OR npm i
   

To set this up from Scratch

1. Create directory and create package.json
   

   r react-boilerplate
   eact-boilerplate
   init -y
   

2. Create basic sub directories
   

   r dist
   ist
   h index.html
   

3. Create index.html
   

   CTYPE html>
   l>
   d>
   itle>React Webpack Babel Setup</title>
   ad>
   y>
    id="app"></div>
   ipt src="bundle.js"></script>
   dy>
   ml>
   

Webpack Setup

1. Install webpack (from root of directory)
   

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

2. Add start script to package.json
   

   ipts": {
   rt": "webpack-dev-server --progress --colors --hot --config ./webpack.config.js",
   
   
   

3. Create webpack.config.js
   

   h webpack.config.js
   

4. Add to webpack.config.js
   

   le.exports = {
   y: [
   rc/index.js'
   
   ut: {
   : __dirname + '/dist',
   icPath: '/',
   name: 'bundle.js'
   
   erver: {
   entBase: './dist'
   
   
   

5. Create main app subdirectories (from root folder)
   

   r src
   rc
   h index.js
   

6. Add test console.log to index.html
   

   ole.log('React Webpack Babel Setup Working!');
   

7. Test the application
   

   start
   

8. Add hot realoading to webpack
   

   install --save-dev react-hot-loader
   

9. Add new entries to webpack.config.js
   

   le.exports = {
   y: [
   pack-dev-server/client?http://localhost:8080', // new
   pack/hot/only-dev-server', // new
   rc/index.js'
   
   ut: {
   : __dirname + '/dist',
   icPath: '/',
   name: 'bundle.js'
   
   erver: {
   entBase: './dist',
    true // new
   
   
   

10. Update index.js to add hot reloading
    

    ole.log('My Minimal React Webpack Babel Setup');
    

module.hot.accept(); // new

Test the application   

npm start

Babel Setup   

Install babel dependencies   

npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

If you would like Experimental features, install preset-stage-2   

npm install –save-dev babel-preset-stage-2

Create .babelrc   

touch .babelrc

Add configuration to .babelrc   

{ “presets”: [

"es2015",
"react",
"stage-2" // if you installed babel-preset-stage-2

] }

Add babel configuration to webpack.config.js   

… module: { loaders: [{

test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'

}] }, resolve: { extensions: ['*', '.js', '.jsx'] }, …

Add style loader and css loader to webpack.config.js   

npm i css-loader style-loader –save-dev

Update webpack.config.js to add style and css configuration   

module: { loaders: [

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  loader: 'react-hot-loader!babel-loader'
},
{ // new
  test: /\.css$/,
  exclude: /^node_modules$/,
  loader: 'style-loader!css-loader',
}

] },

Install React (from root directory)   

npm i –save react react-dom

Update src/index.js to render application   

import React from 'react'; import ReactDOM from 'react-dom';

const title = 'React Webpack Babel Setup Complete!';

ReactDOM.render(

,

document.getElementById('app') );

module.hot.accept();