建立新的 React / React Native 應用

時間 2019-11-08

原文原文鏈接

建立新的 React 應用

建立新的 React 應用有兩種方法： script 標籤引入和腳手架javascript

經過 HTML 的 script 標籤引入 React

由於React自己是一個JavaScript庫，因此只要在HTML中經過script 標籤引入相關的一些js文件，就能夠直接用React來編寫UI了。一個完整的示例：css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <div id="name"></div>
    <div id="age"></div>
    <div id="hello"></div>

    <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); // JAX表達式 ReactDOM.render( <h1>My name is HAHA</h1>, document.getElementById('name') ); // react元素 const age = <h1>My age is 12</h1> ReactDOM.render( <h1>I am 12 years old </h1>, document.getElementById('age') ); // 組件 class Hello extends React.Component { render() { const {name} = this.props return <h1>Hello {name}!</h1> } } ReactDOM.render( <Hello name = 'HAHA'/>, document.getElementById('hello') ); </script>

  </body>
</html>
複製代碼

用瀏覽器打開該html，能夠看到html

命令行工具

create-react-app是FaceBook提供的一個建立React應用的腳手架工具。檢查Node版本是否在 v10 以上，由於一些依賴的包可能須要 >=9.10.0 若是須要升級，執行brew upgrade nodejava

npx create-react-app my-react-app
cd my-react-app
npm start
複製代碼

npx命令介紹
npm 從5.2版開始，增長了 npx 命令。該命令方便調用項目內部模塊，還能避免全局安裝的模塊。 Node 自帶 npm 模塊，因此能夠直接使用 npx 命令。
手動安裝：npm install -g npxnode

npm start後，瀏覽器就會打開一個頁面，呈現react

編輯src/App.js後保存

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> Learn React，Hello React </header> </div> ); } export default App; 複製代碼

界面及時更新爲 ios

建立新的 React Native 應用

React Native 的命令行工具（react-native-cli）
安裝環境具體參考 reactnative.cn/docs/gettin…git

// 建立項目RNApp
npm install -g yarn react-native-cli
react-native init RNApp
// 編譯運行
cd RNApp
react-native run-ios // 也能夠在 Xcode 中直接運行應用
複製代碼

能夠看到 github

而後修改App.js文件後保存，能夠看到界面更新結果 npm

項目建立好後，咱們就能夠在上面改改改，將所學的React知識實踐起來了😆

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

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