1.命令行安裝create-react-app

全局安裝：yarn global add create-react-app

2.創(chuàng)建創(chuàng)建一個空項目

create-react-app appname ，這里注意應用名字不能包含大寫字母

3.進入項目，會發(fā)現(xiàn)項目文件很少，這是為什么呢，因為默認會不顯示細致的目錄文件，運行以下命令可以打開隱藏的部分，便于把控項目

yarn run eject，現(xiàn)在就可以進行開發(fā)了，現(xiàn)在有一個需求是利用nodejs鏈接mongodb數(shù)據(jù)庫，express做后臺框架，進行前后端開發(fā)，需要搭建相應環(huán)境，首先去mongodb官網(wǎng)，下載并安裝mongodb

4.安裝express依賴，yarn add express，等待安裝完成

新建server.js，利用express創(chuàng)建一個htttp服務，實現(xiàn)簡單路由控制

var express = require('express');
var app = express();
app.get('/',function(req,res){
    res.send('<h1>hello world</h1>')
})
app.listen('9999',function(err){
    if(!err){
        console.log('server has been start at  port 9999')
    }else{
        console.log(err)
    }
})

這里由于express暫時還不支持import寫法，所以就使用es5的寫法，訪問127.0.0.1:9999/，即可看到hello world，http服務開啟成功，

5.鏈接mongodb數(shù)據(jù)庫，實現(xiàn)數(shù)據(jù)的增刪改查

這里需要安裝一個依賴mongoose，來實現(xiàn)nodejs和mongodb的鏈接，yarn add mongoose，依賴安裝成功之后，引入mongoose模塊，鏈接nodejs和mongodb，更改的server.js代碼如下

const express = require('express');
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/immoc');
mongoose.connection.on('connected',function(err){
    if(!err){
        console.log('mongodb connected')
    }else{
        console.log(err)
    }
})
const app = express();
app.get('/',function(req,res){
    res.send('<h1>hello world</h1>')
})
app.listen('9999',function(err){
    if(!err){
        console.log('server has been start at  port 9999')
    }else{
        console.log(err)
    }
})

控臺輸出正確，連接正常

6.鏈接一個集合（數(shù)據(jù)庫的概念），并定義文檔模型（表的概念）model，接著定義數(shù)據(jù)結(jié)構(gòu)（字段）Schema

const express = require('express');
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/immoc');
mongoose.connection.on('connected',function(err){
    if(!err){
        console.log('mongodb connected')
    }else{
        console.log(err)
    }
})

const User =  mongoose.model('user',new mongoose.Schema({
    name : {type:String,require:true},
    age : {type:Number,require:true}
}))
User.create({
    name:'coldbreath',
    age:18
},function(err,doc){
    if(!err){
        console.log(doc)
    }else{
        console.log(err)
    }
})

const app = express();
app.get('/',function(req,res){
    res.send('<h1>hello world</h1>')
})
app.get('/data',function(req,res){
    User.find({},function(err,doc){
        if(!err){
            res.json(doc)
        }else{
            console.log(err)
        }
    })
})
app.listen('9999',function(err){
    if(!err){
        console.log('server has been start at  port 9999')
    }else{
        console.log(err)
    }
})

7.對數(shù)據(jù)庫進行操作，增刪改查，這里就不多加贅述，可以點擊下這里，用法很靈活，多樣化