React修炼营之搭建React环境(二)

1. 准备工作

      前面与大家分享了react的基本介绍以及需要学习哪些东西(React修炼营之React基本介绍(一)),接下来为大家分享如何创建一个React项目。在创建React项目之前，需搭建node环境(node官网)，node分为长期维护版和最新尝鲜版，如果是做真实的项目的话，建议下载长期维护版；如果是平时练习或者是学习两个版本都可用。下载完安装包之后，直接下一步，下一步…，安装即可。

//安装好之后，输入
node -v

可以看到node的版本号，说明node安装成功。

2. 创建项目

• 第一种方式(全局安装)

//全局安装create-react-app
npm install -g create-react-app
//创建一个react项目(create-react-app  项目名称)，我这里创建的项目名称为study
create-react-app study

• 第二种方式(局部安装)

npx create-react-app study

在安装过程中，实际安装三个东西

• react：react的顶级库，react的核心代码
• react-dom：把虚拟DOM渲染到文档中变成实际DOM
• react-scripts:包含运行和打包react应用程序的所有脚本和配置
  出现如下界面，表示react应用创建成功
  
  生成项目的目录如下:

├── node_modules 所有的依赖安装的目录
├── public 静态公共目录
├── src 开发用的源代码目录
├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json
└── README.md 使用方法的文档

3.React的第一个应用程序

首先，将清空src目录，然后再src目录下新建App.js和index.js(入口文件)，如下图

在App.js写入
//第一种定义组件方式(类是组件)
import React, { Component } from 'react'
export class App extends Component {
  render() {
    return (
      <div>我是类式组件</div>
    )
  }
}
export default App;

//函第二种定义组件方式(函数式组件)
// function App() {
//   return (
//     <div>我是函数式组件</div>
//   );
// }
// export default App;

在index.js写入
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

注意:
< React.StrictMode>目前有助于：

• 识别不安全的生命周期
• 关于使用过时字符串 ref API 的警告
• 检测意外的副作用
• 检测过时的 context API

页面展示如下