Home

Welcome to the github-battle wiki!

Steps to setup a React JS project without using create-react-app

1. make a project directory
2. change to directory and run command - npm init
3. install react and react-dom - npm install --save react react-dom
4. install dev dependencies - npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react css-loader style-loader html-webpack-plugin webpack webpack-dev-server
5. for webpack v4 also run - npm install --save-dev webpack-cli
6. create an App folder and create index.js, index.html and index.css file.
7. create a webpack.config.js file. check the repo for sample.
8. in package.json, add a new property named 'create' under scripts with a value of 'webpack'.
9. add a section babel as follows - "babel" : { "presets" : ["env", "react"]}. env - transpiles latest JS code , react - transpiles react code. without this the react code will not compile.
10. run the command - npm run create . the dist folder will be created with the final output.
11. run command to install webpack-dev-server to enable continuous changes being reflected in browser without running npm run create repeatedly. npm install --save-dev webpack-dev-server
12. in package.json, under 'scripts' add 'start':'webpack-dev-server --open'

Links

React Router Training Link - https://reacttraining.com/react-router/web/example/basic