初始化——react脚手架

初始化——react脚手架

• npx ： 帮助我们更方便的找到本地安装的命令路径

• 查看： npx --version

  .\node_modules\.bin\webpack --version
  # 或者
  npx webpack --version
  

• 使用react加脚手架创建一个项目

  • npm install create-react-app -g
  • create-react-app myapp
  • cd myapp
  • yarn start

• 官方网站用法

  https://react.docschina.org/docs/create-a-new-react-app.html#create-react-app

  • npx create-react-app myapp
  • cd myapp
  • yarn start

文件结构

文件释义

净化初始文件

1、删除多余文件。src->App.test.js；logo.svg；serviceWorker.js

2、src-index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

3、src-App.js

import './App.css';

function App() {
  return (
    <div>
     hello world
    </div>
  );
}

export default App;

4、src-App.css文件清空

5、src-index.css文件清空

6、src-App.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// App是组件
import App from './App';

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

最终显示

熟悉脚手架项目结构

• 入口文件：index.js

// 导入核心模块
import React from 'react';
import ReactDOM from 'react-dom';
// 全局样式
import './index.css';
// 入口组件（组件的首字母必须大写）
import App from './App';

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

• 入口组件

// 必须导入React模块：JSX依赖于该模块
import React from 'react';
// 局部样式
import './App.css';

// 组件的定义
function App() {
  return (
    <div>
      测试
    </div>
  );
}
export default App;