建立新的 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知识实践起来了😆