React前端环境搭建及Hello World代码

react

前端编程HTML、css、Javascript等前端技术的结合，一般使用JavaScript语言执行核心代码，React是比较好用的编译环境。

1、安装node.js，npm

https://nodejs.org/zh-cn/download/

根据自己的平台，下载安装即可。安装node.js后，npm也会默认安装。

测试安装成功与否。

node -v

npm -v

2、安装cnpm，使用镜像安装更快。

npm install -g cnpm --registry=https://registry.npm.taobao.org

存在warn警告，不用管。cnpm -v检查是否安装成功

3、进入工程目录。

4、cnpm install -g create-react-app创建，全局module

5、设置淘宝镜像

yarn config set registry https://registry.npm.taobao.org

6、创建第一个工程create-react-app first-react-demo

先设置第5步骤镜像，否则安装可能慢得很。

7、运行

cd first-react-demo

yarn start

8、安装代码查看软件Notepad++

网上搜索下载即可。用Notepad++查看代码，文件->打开文件夹作为工作区。

工作区存在文件简单介绍：

package.json：配置文件

node_modules：node依赖库存放的地方。

public：公共的资源接口，其中favico.ico为网页的logo，index.html为网页打开的文件

注意，react工程一般不在index.html中输入内容，其留有外部的调用接口ID，默认设置为root。

src：源文件所在文件夹，主要介绍两个文件。

1）index.js：这个文件起桥接index.html和App.js的作用。

导入App.js，

import App from './App';

其中的代码：

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

表示找到index.html中ID为root的div标签，将App返回的数据传递给它。

2） App.js：这个文件开始执行主要代码，返回的页面在html中显示。

9、build工程

运行yarn build

运行之后会生成一个build文件目录

如果需要在本地查看，打开这个网页文件做以下修改

找到.ico文件

找到.ccs文件

找到.js文件

本地运行

加载的logo显示不出来，原因是找到到logo.svg。后续在代码里改进吧。