ReactJS + Bootstrap →Hello World!

Thường khi chúng ta muốn học một ngôn ngữ mới chúng ta thường tìm kiếm trên google bằng từ khóa “[Technology] Hello World, và rồi làm theo những bước đơn giản nhất để cho ra một chương trình Hello World đầu tiên.

Tutorial này sẽ sẽ cho bạn thấy một cách dễ dàng làm thế nào để thiết lập và khởi chạy một ứng dụng ReactJS trong trình duyệt bằng cách sử dụng công nghệ sau đây:

* Node.js → Node.js là một nền tảng được xây dựng trên thời gian chạy JavaScript của Chrome để dễ dàng xây dựng các ứng dụng mạng nhanh và có thể mở rộng.
* npm → npm là trình quản lý package cho Node.js với hàng trăm ngàn packages.
* React → Một gói npm để bạn có thể truy cập ngay vào React.
* react-dom → Gói này đóng vai trò là điểm vào của các đường dẫn kết xuất DOM.
* React-bootstrap → Bootstrap 3 thành phần được xây dựng với React.
* babel → Bật mã ES6 thành ES5 vanilla dễ đọc với các maps nguồn.
* webpack → Cấu phần CommonJs / AMD cho trình duyệt.
* webpack-dev-server → Phục vụ một ứng dụng webpack. Cập nhật trình duyệt về thay đổi (hot-reload behavior).

Tạo project
Trước tiên chúng ta cần cài đặt node.js để sử dụng npm , về cơ bản npm là trình quản lý gói cho react (và các công nghệ khác).

Mở liên kết này và cài đặt node.js dựa trên hệ điều hành của bạn đang sử dụng:

https://nodejs.org/en/download/

Verify cài đặt node.js của bạn bằng cách gõ lệnh:

node --version

Bây giờ chúng ta sẽ tạo ra project của chúng ta.

* Tạo một thư mục mới → mkdir helloworld

* Đi tới thư mục mới → cd helloworld

* Tạo project → npm init -y

Nó sẽ tạo một file package.json trong đường dẫn gốc với cấu trúc tiếp theo.

{
  "name": "helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Trong thư mục gốc chúng ta sẽ tạo ra các tệp: index.html, webpack.config.js và một thư mục mới có tên src.

Sửa đổi các file với nội dung sau:

index.html

<!DOCTYPE html>
	<html>
	<head>
	<!-- Bootstrap, latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
	</head>
	<body>
	<div id="app"></div>
	<script src="bundle.js"></script>
	</body>
	</html>

Bởi vì chúng ta sẽ sử dụng Bootstrap cho UI, chúng ta cần thêm tham chiếu cdn vào css.

package.json
Như bạn thấy file này định nghĩa các thư viện phụ thuộc mà chúng ta sẽ sử dụng trong chương trình và một vài thẻ metadata

{
	"name": "helloworld",
	"version": "1.0.0",
	"description": "ReactJS Hello World Example",
	"main": "index.js",
	"scripts": {
	"start": "webpack-dev-server --progress --inline",
	"build": "webpack"
	},
	"keywords": [],
	"author": "Gustavo Ponce gustavo.ponce.ch@gmail.com",
	"license": "ISC",
	"dependencies": {
	"babel-preset-es2015": "^6.16.0",
	"react": "^0.14.6",
	"react-bootstrap": "^0.30.5",
	"react-dom": "^0.14.6",
	"webpack-dev-server": "^1.16.2",
	"babel-core": "^6.17.0",
	"babel-loader": "^6.2.4",
	"babel-preset-es2015": "^6.6.0",
	"babel-preset-react": "^6.5.0",
	"webpack": "^1.13.0"
	}
	}

webpack.config.js

module.exports = {
	entry: './src/app.js',
	output: {
	path: __dirname,
	filename: 'bundle.js'
	},
	module: {
	loaders: [
	{
	test: /\.jsx?$/,
	exclude: /node_modules/,
	loader: 'babel-loader',
	query: { presets: [ 'es2015', 'react' ] }
	}
	]
	}
	};

Bây giờ chúng ta sẽ viết mã ReactJS thực tế.

1. Đi tới src / folder
2. Tạo file app.js và HelloWorld.jsx

app.js

import React from 'react';
	import { render } from 'react-dom';
	import HelloWorld from './HelloWorld.jsx';


	render(
	<HelloWorld />,
	document.getElementById('app')
	);

HelloWorld.jsx

import React from 'react';
	import { Button } from 'react-bootstrap';

	class HelloWorld extends React.Component {
	render() {
	return
	<div>
	<Button bsStyle="danger">Hello World Danger</Button>
	<Button bsStyle="primary">Hello World Primary</Button>
	<Button bsStyle="success">Hello World Success</Button>
	</div>
	}
	}
	export default HelloWorld;

Nếu bạn muốn sửa đổi hoặc thêm các thành phần bootstrap khác, vui lòng tham khảo liên kết tiếp theo với tài liệu react-bootstrap

https://react-bootstrap.github.io/

Chạy chương trình:
1. Vào thư mục gốc của dự án.
2. Gõ→ npm install → nó sẽ cài đặt các dependences được định nghĩa trong file package.json.
3. Gõ → npm start → nó sẽ thực thi script tên "start" được định nghĩa trong file package.json.

4. Mở trình duyệt của bạn và đến http://localhost: 8080

Lưu ý: Nếu bạn sửa đổi file HelloWorld.jsx hoặc bất kỳ file nào khác, file này sẽ được load tự động do đã định cấu hình webpack-dev-server là hot-reload.

ReactJS Tools
Mình khuyên các bạn 1 số tool cho react:
- React-detector: https://chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppccanebkdjlh
- React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

Code For Fun - Mình thích thì mình code thôi!

Search This Blog

ReactJS + Bootstrap →Hello World!

Comments

Post a Comment

Popular posts from this blog

Ứng dụng giải thuật MiniMax trong trò chơi cờ tướng - Tìm hiểu về trí tuệ nhân tạo (Phần 2)

Sử dụng Jedis làm việc với Redis trong Java

Sử dụng Jenkins để Build Docker Images