This project was created to learn how to make web-apps using Express.js framework with React.js components.
npm install
webpack -w
npm start
And open in browser http://localhost:3000/
-
Create folder for your project
-
Inside this folder create Express project:
$ express --view=<view>
where you have to put your view engine on the place of <view>.
For example you can write $ express --view=ejs to create a project with ejs view engine.
- PS: to be able to run this command, you need to have express generator installed globally on your computer. Do do this you have to execute in command line
$ npm install express-generator -g. For more information about express generator you can visit this page: https://expressjs.com/en/starter/generator.html
- Install all node modules that are needed:
$ npm install
- Install React:
$ npm install react --save
- Install ReactDOM:
$ npm install react-dom --save
- Install webpack:
$ npm install webpack --save-dev
- PS: later you will need to have webpack installed globally on your computer. Do do this you have to execute in command line
$ npm install webpack -g.
- Install Babel Core:
$ npm install babel-core --save-dev
- Install Babel Loader:
$ npm install babel-loader --save-dev
- Install Babel Presets:
$ npm install babel-preset-react --save-dev
$ npm install babel-preset-es2015 --save-dev
- Create webpack.config.js file inside project folder:
var webpack = require('webpack')
var path = require('path')
module.exports = {
entry: {
app: './public/app/App.js'
},
output:{
filename: 'public/build/bundle.js',
sourceMapFilename: 'public/build/bundle.map'
},
devtool: '#source-map',
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query:{
presets: ['react','es2015']
}
}
]
}
}- Create app folder with react components and configure paths:
- PS: The simplest component that is rendering into
divwithid="app"will look like this:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
render() {
return(
<div>
<h1>Hello world!</h1>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))- Import your components inside view:
- PS: The simplest component that use previous component will look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/build/bundle.js"></script>
</body>
</html>- Run webpack to compile your react components and wach their changes:
$ webpack -w
- To run the app write in other command line tab:
$ npm start
- Open in your browser on http://localhost:3000/ and enjoy your app with react component and express back-end
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent