Easy Install
create app |
npm create-react-app my-app |
delete src |
del src/* |
creating files |
type nul > index.css
type nul > index.js |
index.js |
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
|
Build
run server |
npm start |
create bundle |
npm run build |
Setup from Scratch
Initializing |
npm init |
Install React |
npm install react react-dom --save |
Install webpack |
npm install webpack webpack-dev-server webpack-cli --save |
Install babel |
npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin --save-dev |
|
|
Structure
index.html |
type nul > index.html |
App.js |
type nul > App.js |
main.js |
type nul > main.js |
webpack.config.js |
type nul > webpackconfig.js |
.babelrc |
type nul > .babelrc |
Set Compiler, Server & Loader
File : webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js',
output: {
path: path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 8001
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
}
|
package.json
{
"name": "reactApp",
"version": "1.0.0",
"description": "First React App",
"main": "index.js",
"scripts": {
/*"test": "echo \"Error: no test specified\" && exit 1"
REMOVE THIS AND ADD FOLLOWING 2 LINES */
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "KNiGHTblood",
"license": "ISC",
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
|
index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>
|
App.js
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;
|
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
|
.babelrc
{
"presets":["env", "react"]
}
|
|
|
Compnents are made with jsx
HTML flips to js Like |
<div> {'Hello'.toUpperCase()} </div>
|
| |
<div className="hello--upper"> {'Hello'.toUpperCase()} </div>
|
|
