==创建一个名为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
网友评论