React脚手架安装及环境变量解析

一，React组件

1，搭建环境第一步：

安装node.jsnode.js下载网址： https://nodejs.org/zh-cn/download/

​ 第二步：

安装React脚手架 (为必须安装)
cnpm install -g create-react-app

​ 第三步：

创建项目 (可以根据自己的爱好命名但最好别用汉字命名)
create-react-app my-app-01
cd my-app-01(进入项目)

​ 第四步：

启动项目 npm start

2、自定义函数组件

第一步：创建js文件新建App.js

第二步：编写函数组件

1.引入react组件

import React from ‘react’;

2.编写所需函数组件

function App(){

return (

hello world

);

}

​
3.向外暴露

export default App;

第三步：在index.js中引入App组件
1.引入App组件

import App from ‘./App’;

2.使用组件（JSX语法）

ReactDOM.render(,document.getElementById(‘root’));为自定义组件传参

在App组件中接收参数

function App(props){

var a = 666;

return (

hello world,{props.title},{props.id},{props.hello}

);

}

二，React环境变量

React 的环境变量需要以 REACT_APP_ 开头
都是在根目录下创建以 .env 开头的文件

.env: Default.

.env.local: Local overrides.

.env.development, .env.test, .env.production: Environment-specific settings.

.env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.
运行不同的命令需执行不同的环境变量文件
npm start: .env.development.local, .env.development, .env.local, .env

npm run build: .env.production.local, .env.production, .env.local, .env

npm test: .env.test.local, .env.test, .env

• 点赞
• 收藏
• 分享
• 文章举报