React学习教程（3）简单应用

作者: 四冶读史 | 来源:发表于2017-10-26 13:54 被阅读46次

React学习教程（3）简单应用
React基础教程（一）
React 入门的一些文章
React-router v4教程
React Native 运行报错 Command failed
React 实践（一）
React Native 学习资料整理（不定时更新）
React学习笔记
React
初学者的Day01

==创建一个名为reacttest的项目

create-react-app reacttest

==进入该项目，可看到如下结构

reacttest/
 README.md
 node_modules/
 package.json
 public/
   favicon.ico
   index.html
   manifest.json
 src/
   App.css
   App.js
   App.test.js
   index.css
   index.js
   logo.svg
   registerServiceWorker.js

==启动项目

npm start
......
Compiled successfully!
You can now view reacttest in the browser.
 Local:           http://localhost:3000/
 On Your Network: http://ip:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.

在浏览器中输入localhost:3000即可看到默认的界面
这个界面是React自带的，现在我们把自带的文件删掉，删掉的文件有：
App.css
App.js
App.test.js
index.css
logo.svg
registerServiceWorker.js
==查看manifest.json文件

{
 "short_name": "React App",
 "name": "Create React App Sample",
 "icons": [
   {
     "src": "favicon.ico",
     "sizes": "192x192",
     "type": "image/png"
   }
 ],
 "start_url": "./index.html",
 "display": "standalone",
 "theme_color": "#000000",
 "background_color": "#ffffff"
}

可以看到服务（localhost:3000）默认访问的页面是index.html（public文件夹下），也可以修改，这里就默认，不做修改。
==修改index.html文件

<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <base target="_self">
    <meta charset="utf-8">
    <meta http-equiv = "X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="reacttest">
    <meta name="keywords" content="reacttest">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React - Test</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

在此div中的所有内容都将由ReactDOM来管理，所以我们将其称之为 “根” DOM 节点。
我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。
==修改index.js文件
index.html引进了该文件

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
   <h1>hello world</h1>, 
   document.getElementById('root')
);

==界面是如何出来的呢？
当在浏览器中输入localhost:3000时，默认访问的是index.html文件，而ReactDOM.render方法，把一个虚拟的DOM（<h1>hello world</h1>），渲染到id="root"的真实的DOM中，然后在浏览器中呈现。
这样，一个hello world的界面就在浏览器显示了。
React是一个JavaScript库，因此它需要你熟悉JavaScrip，参考地址后附有有关JavaScript学习的资料，有需要有兴趣可以查阅。
==查看packages.json文件

{
  "name": "reacttest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-scripts": "1.0.14"
 },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
 }
}

可以看到已安装的包和版本，还有一些基础命令。

注：
本教程相关的所以源码，可在https://github.com/areawen2GHub/reacttest.git下载

参考地址：
https://react.bootcss.com/react/docs/installation.html
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
JavaScript参考文档（中文）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference菜鸟教程http://www.runoob.com/js/js-tutorial.html