写在开头：
感觉社会变化很快，我记得从我第一次学习css js jquery的时候，我都一直希望赶紧学习后端，因为觉得后端工资高，一直忽视前端，到现在才猛然发现，前端要解决的问题太多，前端越来越有竞争力，自己仿佛在不知不觉中被甩远了，后来从java转到了ruby后端，才意识到全栈才是自己真正想要达到的一个阶段，同事在离职前给我一个英文版的项目视频，因为现在的英文能力有限，所以购买了个中文版的项目，想利用休息时间，好好能系统过一遍，也想着记下笔记，利于自己复习，也方便他人。
一：react开发环境准备
1.安装node
LTS比较稳定的版本 current最新的版本
安装完成后
node -v npm -v
输出成功，说明node就安装成功了。
2.创建react脚手架
npm install -g create-react-app
注意：如果出现Error: EACCES: permission denied, access '代表没有权限，加上sudo 命令即可。
create-react-app my-app
create-react-app helloWorld
Could not create a project called "helloWorld" because of npm naming restrictions:
* name can no longer contain capital letters
这里会自动帮你去构建react的项目工程。比如去安装一些react所需要的依赖包。
Success! Created helloworld at /Users/sai/Desktop/helloworld
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd helloworld
yarn start
cd helloworld
npm run start
脚手架工具帮我们分析源代码，启动一个服务器把源代码运行起来，看到的页面就是代码工程生成的页面
二：工程目录简介
通过create-app脚手架生成的主要目录介绍
-
node_modules：是我们项目所依赖的第三方的包 -
public-
favicon.ico:图标 -
index.html:当前显示的页面
-
-
yarn.lock:项目的依赖包、版本号 不要动-
readme.md:说明文件 -
package.json: node包文件，可以把你的项目变成一个包
-
// package.json
{
"name": "helloworld", #名字
"version": "0.1.0", #版本
"private": true, #私有
"dependencies": { #依赖的包
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.5"
},
"scripts": { #指令
"start": "react-scripts start", #之所以在命令行中可以输入npm run start启动，是因为在这里配置了 它去通过react-scripts工具去启动服务器
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
gitignore:用过用git进行管理，你不想传递到git仓库，可以放到这里。
-
src-
index.js:
-
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import.. from是es6提供的模块引入的语法。
这里所引入的React ReactDOM对应的package.json中dependencies存在的库。
// PWA progressive web application
// 通过写网页的形式来写手机app应用
// 写一个网页，上线到https服务器上，当用户断网的时候，再访问的时候还是能看到之前已经加载好的页面
import registerServiceWorker from './registerServiceWorker';
三：react中的组件
一个页面如果很复杂，我们写起来很麻烦。但是如果写成一个个可拆分的组件的时候，我们就好管理的多。而且组件的形式也可重用性强。这也就是前端同学经常说的 前端组件化 的含义。
这里再针对于本章说下最基础的jsx语法
- 我们在之前的js返回一般写的是
return <div>hello, jianshu</div>，而在jsx中是不加但双引号的。另外，在jsx中，不单单可以引入普通的标签，还可以引入组件。 - 在jsx引入组件的时候，比如引入
<App />组件，这里的组件首字母必须要大写，不能是<app />，因为这种jsx语法是不支持的，所以要用jsx语法，首字母必须大写。所以，大写字母开头的话，一般是组件。
从脚手架生成的app.js我们进行分析
// app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component { // 用es6的语法写了继承
render() {
return (
<div>
hello, jianshu.
</div>
);
}
}
export default App; //导出操作，正好index.js引入了，所以显示出来了
app.js中render下的<div>也是jsx语法，所以必须引入React，引入之后，才能编译成功。
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
ReactDOM是第三方的模块，它有一个方法是render，这个方法帮我们把一个组件挂在dom节点上。这里挂在在root下。
<div id="root">
...
</div>
<App />是jsx语法，需要引入对应的react。
再整体介绍一遍：
index.js是程序入口，引入React ReactDOM,，接着引入了一个组件，叫APP，用reactdom把这个组件显示在root节点。
因为这里用了jsx语法，所以需要引入import React, { Component } from 'react';，然后再看app.js，它就是个名字叫App的组件，在这个组件中返回了一些内容，因为它是一个react组件，所以必须引入import React, { Component } from 'react';，这个App必须继承这个React.Component才可以生成这个组件。
以上。
网友评论