初始化——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;
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页