React是一个 JavaScript语言的工具库，在这个 JavaScript工具铺天盖地的时代，没 有意外，你需要安装 Node.js, React 本身并不依赖于 Node.js，但是我们开发中用到的诸 多工具需要 Node.js 的支持 。
在 Node.js 的官网(https://nodψ.org/)可以找到合适的安装方式，安装 Node.js 的同 时也就安装了 npm, npm 是 Node.js 的安装包管理工具，因为我们不可能自己开发所有功 能，会大量使用现有的安装包，就需要 npm 的帮助 。
整体流程图
1.准备安装环境
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
brew install node
brew install npm
查看 npm 是否安装成功
$ npm -v
6.7.0
2.create-react-app 工具
React技术依赖于一个很庞大的技术栈,手动创建很麻烦,所幸,react的创立者提供了一个快速开发 React应用的工具，名叫 create-react-app，这个工具的目的是将开发人员从配置工作中解脱出来，无需过早 关注这些技术枝细节，通过创建一个已经完成基本配置的应用，让开发者快速开始 React 应用的开发 。
create-react-app 是一个通过 npm 发布的安装包，在确认 Node.js 和 npm 安装好之后，
命令行中执行下面的命令安装 create-react-app:
npm install --global create-react-app
安装界面:
sysadmindeMacBook-Pro:tmp sysadmin$ npm install --global create-react-app
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.2.0
updated 1 package in 16.068s
sysadmindeMacBook-Pro:tmp sysadmin$
安装过程结束之后，你的电脑中就会有 create-react-app这样一个可以执行的命令，
这个命令会在当前目录下创建指定参数名的应用目录 。
create-react-app first_react_app
sysadmindeMacBook-Pro:tmp sysadmin$ create-react-app first_react_app
Creating a new React app in /a/tmp/first_react_app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
Initialized a git repository.
Success! Created first_react_app at /a/tmp/first_react_app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run 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 first_react_app
npm start
Happy hacking!
这个命令会在当前目录下创建一个名为 first_react_app 的目录，在这个目录中会自 动添加一个应用的框架，
随后我们只需要在这个框架的基础上修改文件就可以开发 React应用，避免了大量的手工配置工作:
在 create-react-app命令一大段文字输出之后，根据提示，输入下面的命令,启动服务:
cd first_react_app
npm start
这个命令会启动一个开发模式的服务器，同时也会让你的浏览器自动打开了一个网 页，
指向本机地址 http://localhost:3000/
3.目录说明
在create-react-app项目中有目录,截图如下:
create-react-app 给我们自动产生的代码，在 first-react-app 目录下主要包含如下文件和目录:
- src/ --源码文件
- package.json --依赖源码包配置文件
- node modules/ --依赖源码包目录
- public/
- README.md
我们主要关注 src 目录中的内容，这个目录中是所有的源代码 。
create-react-app所创建的应用的入口是 src/index,js文件，我们看看中间的内容，代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
这个应用所做的事情，只是渲染一个名叫 App 的组件， App 组件在同目录下的 App. js文件中定义，
渲染出来的效果就是在网页首页中看到的界面。
4.增加一个新的 React组件
在这里面我们新增一个能够计算点击数组件.名叫 ClickCounter.
修改 index.js, 新增ClickCounter 代码
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ClickCounter from './ClickCounter';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<ClickCounter />,
document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
在 index.js 同级目录下创建文件ClickCounter.js
import React, { Component } from 'react';
class ClickCounter extends Component {
constructor(props) {
super(props);
this.onClickButton = this.onClickButton.bind(this);
this.state = {
count: 0
}
}
onClickButton() {
this.setState({count: this.state.count + 1});
}
render() {
const counterStyle = {
margin: '16px'
}
return (
<div style={counterStyle}>
<button onClick={this.onClickButton}>Click Me</button>
<div>
Click Count: <span id="clickCount">{this.state.count}</span>
</div>
</div>
);
}
}
export default ClickCounter;
如果你之前使用npm start 没有关闭的话, 会直接显示界面,如果关闭了,重新启动一下就 ok.
效果图如下:
5.弹出配置文件
在 react 中会有一些公共的配置文件,比如请求后台的 url 地址等配置参数,
这个时候,需要将隐藏的配置文件弹出,暴露出来.
npm run eject // 提示框 输入 y
sysadmindeMacBook-Pro:first_react_app sysadmin$ npm run eject
> first_react_app@0.1.0 eject /a/tmp/first_react_app
> react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. Yes
Ejecting...
....................
Adding Jest configuration
Adding Babel preset
Running npm install...
removed 1 package and audited 904957 packages in 15.062s
found 0 vulnerabilities
Ejected successfully!
Staged ejected files for commit.
Please consider sharing why you ejected in this survey:
http://goo.gl/forms/Bi6CZjk1EqsdelXk1
这时候就会发现新增的两个目录 [config , scripts ]: 在里面修改配置即可.
注意:
1.弹射成功,再也修改回不去了.
2.代码如果没提交的话,会报错哦. 记得提交 git commit -m 'add Clickcounter.js'
转载：https://blog.csdn.net/zhanglong_4444/article/details/102579142