[Series] Tạo blog với React JS: Bài 1 - Dựng server, cấu hình babel và webpack

Mình cũng đang tự học React nên mình muốn viết 1 series về chủ đề này, tuy kiến thức mình về React tại thời điểm này là chưa nhiều nhưng mình vẫn viết cái series này vừa để ôn lại kiến thức mình học mà lại còn có thế giúp các bạn có kiến thức về React dù ở mức rất cơ bản nhưng mình nghĩ mình cũng là người đang tự học React JS nên có lẽ mình với bạn sẽ có nhiều điểm chung. OK bắt đầu với bài đâu tiên của series này nhé.

[Series] Tự học React JS

I. Dựng server nodejs với express và cài babel-preset-es2015
1. npm init -y tạo project
2. npm i --save express. Dưng server node js với express trong file server/index.js
3. Cài module babel-cli và babel-preset-es2015
Chú ý: Nếu bạn dùng syntax của es5 thì không cần phải cài thêm babel-preset-es2015 nhé. Nhưng ở series này mình dùng es6 nên cần cài thêm thằng đó.
4. npm i --save-dev babel-cli babel-preset-es2015
Tiếp theo để server có thể hiểu được syntax es6 sau khi ta đã cài thêm module bạn tạo file .babelrc với nội dung sau:

{
    "presets" : ["es2015"]
}

Giờ thi es5, es6 gì chiến hết nhé.
5. Thêm scripts "start": "nodemon server --watch server --exec babel-node server/index.js"
Send vài thử linh tinh rồi npm start để xem kết quả nhé.
Ok vậy là đã dựng xong con server nodejs và thằng babel-preset-es2015 để nó hiểu được es6 syntax. Giờ chúng ta đến phần khó hơn chút nhé.

II. Webpack
1. npm i --save-dev webpack webpack-dev-middleware
Ở file server/index.js

import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackConfig from '../webpack.config.js';

app.use(webpackMiddleware(webpack(webpackConfig));

Các bạn thấy webpack.config.js lòi ở đâu ra mà chúng ta chưa biết dúng không nào. Ok chưa có thì chúng ta tạo nó thôi :v. Về cơ bản đúng như cái tên của nó chúng ta sẽ cấu hình cho module webpack ở file này.

module.exports = {
    entry: './src/index.js'                    
    //Cái link này bạn tùy chỉnh về file của bạn nhé. Có thể tạo thư mục src rồi tạo file index.js như mình rồi viết lăng nhăng như console.log('Hello world!!!') vào chơi nhé.
   output: {
      path: __dirname + '/server',
      filename: 'bundle.js'
  }
}

Ok thế là đã cái config cực cơ bản cho thằng webpack.
Các bạn npm start xem có lỗi gì không nhé.
Nếu không có lỗi lầm thì giờ chính là lúc đụng đến thằng React bạn nhé. Ok thay file index.js trong thư mục src của nãy bằng 1 file render React xem thế nào bạn nhé.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello React!!!</h1>,
  document.getElementById('root')
)

Chạy npm start 1 lần thử xem có lỗi không nhé. Nếu bạn gặp lỗi:

ERROR in ./src/index.js

Module parse failed: D:\nhk\ReactJS\project\blog\src\index.js Unexpected token (5:2)

You may need an appropriate loader to handle this file type.

|

| ReactDOM.render(

|   <h1>Hello React!!!</h1>,

|   document.getElementById('root')

| )

webpack: Failed to compile.

Đừng lo nhé, đang đúng đường đó bạn. tại nó vẫn chưa hiểu được cú pháp của React nên lỗi là đúng rồi. Ok giờ bạn cài thêm module babel-loader babel-preset-react

Chỉnh file .babelrc thành 

{

    "presets": ["es2015", "react"]

}

Tiếp theo là thêm module cho file config webpack nhé bạn. Lúc này file webpack.config.js sẽ thành 

import path from 'path';

module.exports = {

  entry: './src/index.js',

  output: {

    path: __dirname + '/server',

    filename: 'bundle.js'

  },

  module: {

    rules: [{

      test: /\.css$/,

      use: [ 'style-loader', 'css-loader' ]

    },

    {

      test: /\.js$/,

      loaders: ['babel-loader'],

      include: [

        path.join(__dirname, 'src')

      ]

    }]

  }

};

Ok giờ thì lại câu thần chú npm start xem lỗi lầm gì không nhé bạn. Ở bước này phải không có lỗi thì mới gọi là ngon bạn nhé. Chúc code bạn chạy ngon!!!

• Tweet
• Share
• Share
• Share
• Share