使用node.js啓動React

時間 2019-12-04

標籤使用 node.js node 啓動 react 欄目 Node.js 简体版

原文原文鏈接

React簡介

本文內容參考：菜鳥教程 http://www.runoob.com/react/react-install.html 。 React 使用 JSX 來替代常規的 JavaScript。而JSX 是一個看起來很像 XML 的 JavaScript 語法擴展。經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。新建一個html文件，引入了三個庫： react.min.js 、react-dom.min.js 和 browser.min.js：css

react.min.js - React 的核心庫
react-dom.min.js - 提供與 DOM 相關的功能
browser.min.js - 用於將 JSX 語法轉爲 JavaScript 語法這三個文件能夠在官網：https://facebook.github.io/react/ 下載react包。

###HelloWorld 這是一個html文件，導入相關的js便可以運行。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/browser.min.js"></script>
</head>
<body>
<div id="example">

</div>

</body>
<script type="text/babel">
    var HelloWord = React.createClass({
        render:function(){
            return(<h1>HelloWorld !!</h1>);
        }
    });

    ReactDOM.render(<HelloWord/>,document.getElementById("example"));

</script>
</html>

###使用nodejs建立react工程node

這個就須要經過 npm 使用 React了。npm是安裝nodejs後的一種工具。詳情能夠先去百度一下。下面的操做都是在windows下的cmd窗口中操做完成。 ####第一步、安裝全局變量react

npm install babel -g
npm install webpack -g
npm install webpack-dev-server --save-dev

####第二步、建立根目錄jquery

mkdir reactApp
cd reactApp/

####第三步、生成package.json 文件webpack

npm init
//出現下面一段東西，咱們須要填寫name,description和最後一個yes。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (react) react-test
version: (1.0.0)
description: 測試react
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\test\react\package.json:

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "測試react",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Is this ok? (yes) yes

####第四步、添加依賴包及插件git

npm install react --save
npm install react-dom --save

同時咱們也要安裝一些 babel 插件github

npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

####第五步、建立一些必要文件建立文件是使用的cmd指令，也能夠直接建立文件。web

cd.>index.html
cd.>App.js
cd.>main.js
cd.>webpack.config.js

####第六步、設置編譯器，服務器，載入器打開webpack.config.js寫入一下代碼npm

var config = {
   entry: './src/main',
	
   output: {
      path:'./',
      filename: 'index.js',
   },
	
   devServer: {
      inline: true,
      port: 8080
   },
	
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',

         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
	
}

module.exports = config;

entry: 指定打包的入口文件 main.js。
output：配置打包結果，path定義了輸出的文件夾，filename則定義了打包結果文件的名稱。
devServer：設置服務器端口號爲 8080，端口後你能夠本身設定。
module：定義了對模塊的處理邏輯，這裏能夠用loaders定義了一系列的加載器，以及一些正則。當須要加載的文件匹配test的正則時，就會調用後面的loader對文件進行處理，這正是webpack強大的緣由。

####第七步、修改 package.json

"start": "webpack-dev-server --hot"

修改後文件

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "測試react",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  }
}

如今咱們能夠使用 npm start 命令來啓動服務。--hot 命令會在文件變化後從新載入，這樣咱們就不須要在代碼修改後從新刷新瀏覽器就能看到變化。這個就是實現實現自動編譯的功能。 ####第八步、編寫文件內容 index.html

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
      <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="css/login.css">
      <script src="lib/jquery-3.1.1/jquery-3.1.1.min.js"></script>
   </head>

   <body>
      <div id = "app">

      </div>
      <script src = "index.js"></script>
   </body>

</html>

App.js

import React from 'react';

class App extends React.Component {
   render() {
      return (
          <h1>Hello World!</h1>
      );
   }
}
export default App;

main.js

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

import App from './App';
ReactDOM.render(<App/>, document.getElementById("app"));

若是想要組件能夠在任何的應用中使用，須要在建立後使用 export 將其導出，在使用組件的文件使用 import 將其導入。 ####第九步、運行服務器

npm start

訪問瀏覽器地址：http://localhost:8080/

####第十步、導入開發工具目前測試了idea、WebStorm工具。直接導入，便可使用。導入後啓動以下圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。