ReactJS + Bootstrap →Hello World!

Trang chủ » Cách Dùng Bootstrap Trong Reactjs » ReactJS + Bootstrap →Hello World!

Có thể bạn quan tâm

Skip to main content

ReactJS + Bootstrap →Hello World!

April 09, 2018 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 Share Share

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)

October 07, 2017 Chắc hẳn mọi người đều biết về trò chơi thú vị như cờ tướng. Tiếp theo loạt bài về trí tuệ nhân tạo, bài viết này mình sẽ nói về cụ thể giải thuật Minimax ứng dụng trong trò chơi trí tuệ cờ tướng như thế nào. OK! Let's go. 1. Ý tưởng Cờ tướng là trò chơi đối kháng, trong đó hai người luôn phiên nhau đi nước đi của mình. Trạng thái bắt đầu là trạng thái khởi tạo bàn cờ, sau mỗi nước đi của một bên, trạng thái bàn cờ sẽ được thay đổi thành một trạng thái mới hiện hành. Cờ tướng có luật của nó, và trò chơi sẽ kết thúc khi một người có được trạng thái phản ánh sự thắng cuộc hoặc hai người rơi vào trạng thái hòa cờ. Ta tìm cách phân tích xem từ một trạng thái nào đó sẽ dẫn đến đấu thủ nào sẽ thắng với điều kiện cả hai có trình độ như nhau. Giải thuật Minimax sẽ được áp dụng vào trong trò chơi cờ tướng. Hai đấu thủ trong trò chơi sẽ được gọi là MIN và MAX và hai đấu Share Post a Comment Read more

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

July 08, 2018 Bài viết này mình sẽ   giới thiệu về Jedis , một thư viện client Java cho  Redis . 1. Tại sao lại là Jedis? Redis liệt kê các thư viện client nổi tiếng nhất trên  trang web chính thức  của họ  .  Có nhiều lựa chọn thay thế cho Jedis, nhưng chỉ có hai lựa chọn khác xứng đáng để đề xuất đó là  lettuce  và  Redisson . Hai clients này có một số tính năng độc đáo như an toàn luồng, xử lý kết nối lại trong suốt và API không đồng bộ, tất cả các tính năng mà Jedis thiếu. Tuy nhiên, Jedis nhỏ và nhanh hơn đáng kể so với hai loại kia.  Bên cạnh đó, nó là thư viện client được lựa chọn của các nhà phát triển Spring Framework, và nó có cộng đồng lớn nhất trong cả ba. 2. Maven Dependencies Hãy bắt đầu bằng cách khai báo dependency trong file  pom.xml  : 1 2 3 4 5 < dependency >      < groupId >redis.clients</ groupId >      < artifactId >jedis</ artifactId >      < version >2.8.1</ version > </ dependency > Share Post a Comment Read more

Thao tác cơ bản với Cassandra trong Java

June 10, 2018 1. Cassandra Thông thường, các cơ sở dữ liệu loại NoSQL có khả năng tự động phân bố dự liệu giữa các node trong cluster (data distribution) và tạo bản sao dữ liệu (data replication). Cassandra cũng thừa hưởng những tính năng này của NoSQL. Trong bài viết này chúng ta sẽ tìm hiểu về Cassandra và cùng thử giao tiếp với Cassandra bằng Java nhé. 1.1. Những khái niệm chính Chúng ta cùng bắt đầu bằng một số khái niệm chính của Cassandra: Cluster  - tập hợp các nút hoặc Trung tâm dữ liệu được sắp xếp theo cấu trúc vòng.  Tên phải được gán cho mỗi cụm. Keyspace  - Nếu bạn đã biết đến một cơ sở dữ liệu quan hệ, thì Schema là keyspace tương ứng trong Cassandra.  Keyspace là container ngoài cùng cho dữ liệu trong Cassandra.  Các thuộc tính chính trên mỗi keyspace là  Replication Factor , Replica Placement Strategy  và  Column Families Column Family  - Column Families trong Cassandra giống như các bảng trong cơ sở dữ liệu quan hệ.  Mỗi Column Family chứa một tập hợp các hàng được đại Share Post a Comment Read more

Archive

  • August 20181
  • July 20181
  • June 20181
  • May 20181
  • April 20181
  • March 20181
  • February 20181
  • January 20181
  • December 20171
  • November 20171
  • October 20171
  • August 20171
Show more

Labels

  • AI
  • bat dau voi docker
  • cach dung redis
  • cach ket noi cassandra trong java
  • cach su dung docker
  • cassandra
  • cassandra db
  • cassandra trong java
  • chữ ký RSA
  • chữ ký số
  • cơ chế luồng
  • Cờ tướng AI
  • da vu tru
  • docker
  • docker la gi
  • du hanh thoi gian
  • Giải thuật cắt tỉa Alpha-Beta
  • Giải thuật Heuristic
  • Giải thuật minimax
  • Giải thuật minimax trong cờ tướng
  • groovy
  • groovy là gì
  • groovy vs java
  • hoạt động của thread
  • hoc docker
  • java vs groovy
  • jedis
  • jedis example
  • jenkins
  • jenkins with docker
  • ket noi toi redis trong java
  • luồng
  • Play Framework Hello World
  • Play Framework HTTPS
  • redis
  • redis trong java
  • RSA
  • sự khác nhau giữa groovy và java
  • the gioi song song
  • thread
  • thuật toán chữ ký số
  • thuật toán RSA
  • thuật toán trí tuệ nhân tạo
  • tim hieu cassandra
  • tìm hiểu về luồng
  • tìm hiểu về thread
  • Trí tuệ nhân tạo
  • vu tru song song
Show more

Report Abuse

Từ khóa » Cách Dùng Bootstrap Trong Reactjs