< YALU STUDIO >

MERN cheetsheet

Word count: 310 / Reading time: 2 min
2018/11/24 Share

Create a project. A file named package.json will be created in the root directory.

1
npm init

Install express. --save option will save the dependency in the package.json file.

1
npm install express --save

Check what packages are installed.

1
npm ls --depth=0

Create a file called server.js in the root directory.

1
2
3
4
5
6
7
8
const express = require('express');

const app = express();
app.use(express.static('static'));

app.listen(3000, function(){
    console.log('App started on port 3000');
});

Create a directory named static and create a index.html in that directory.

Run the server.

1
npm start

Open the browser and go to localhost:3000, the index page should be seen.

Create a folder named src in the root directory, and put the jsx files in it.

babel is deprecated, change it later!!!

Install babel-cli(the command line tool that invokes the transformation) and babel-preset-react(the plugin that handles React JSX transformation)

1
npm install --save-dev babel-cli babel-preset-react babel-preset-es2015

Add this in the package.json file:

1
2
3
4
5
{
    "sciprt":{
        "compile": "babel src --presets react,es2015 --out-dir static"
    }
}

Then, we can run it using the command.

1
npm run compile

In order to automatically restart the server, install the package nodemon

1
npm install nodemon --save-dev

Modify the code in package.json.

1
2
3
4
5
{
    “scripts”:{
        "start": "nodemon -w server.js server.js",
    }
}

-w specifies which files to watch for changes. The server restarts only when the back-end files are changed.

Use body-parser to parse various types of request bodies including URL Encoded form data and JSON.

1
npm install body-parser --save

Then, in server.js, add the code below:

1
2
3
const bodyParser = require('body-parser');
...
app.use(bodyParser.json());

React

…

CATALOG
  1. 1. React
Total : 31
2021
2020
2019
2018
AWS Lambda Serverless Node.js Git GitHub Swift iOS Xcode VirtuaBox Keyboard API DynamoDB Raspberry Pi PyCharm Python VirtualBox Android
Study Tech