webstorm创建react，及其代码结构

最新推荐文章于 2024-04-12 01:51:32 发布

Leonopteryxw

最新推荐文章于 2024-04-12 01:51:32 发布

阅读量2.4k

点赞数 1

分类专栏：开发文章标签： react webstorm

本文链接：https://blog.csdn.net/qq_38853948/article/details/115893862

版权

开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

webstorm创建react，及其代码结构

webstorm提供了创建各种框架的方式，通过用户点击交互的方式简化了命令行的操作，这篇markdown主要说明一下使用webstorm 2020版本创建react的一些问题和react框架的代码结构。

为了让过程更清晰，先新建一个test目录作为工程目录：E:\test

生成react

在上方导航栏点击File->New->Project，会出现一个对话框
在这里插入图片描述
在对话框左侧选择React，右侧会出现一些选项，Location是希望创建react的工程目录，Node interpreter是node.exe文件的路径，create-react-app是使用的创建命令，webstorm会默认使用npx create-react-app命令来创建，填好之后点击Create即可开始创建，创建过程需要安装很多的依赖项，会用几分钟的时间。

创建完成后，这时候在导航栏点击Run -> Run ‘npm start’即可在浏览器打开框架的初始页面，默认是localhost:3000。
在左侧目录栏打开工程目录，可以看到三个文件夹：node_modules，public，src。
在这里插入图片描述

node_modules是react框架的所需的依赖项，打开可以看到非常多的文件夹，创建这个文件夹里边的内容，也是刚才生成react花费时间最长的部分。
可以看到public文件夹包含了ico文件，png文件，txt文件，json文件等，不难看出这个文件夹主要放一些视图层的东西。
在src文件里，包含了css文件和js文件，因此不难看出逻辑层和样式文件都写在这里边。
此外还有四个其他的文件，yarn.lock是由于创建过程使用了yarn命令，自动生成的文件，README.md，是一个markdown文件，就是一个说明文件，.gitignore文件暂时不用管，package.json文件是yarn的配置文件，安装依赖，添加命令等都是通过这个配置文件完成的。

首先打开public里边的index.html文件，看到标签里：

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

有个空的div标签，id为root。
打开src文件夹里的index.js文件：

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

render函数的第二个参数中，找到html里id为root的元素进行渲染，在第一个参数中的JSX代码里使用了名为App的组件。
App.js组件里代码：

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

通过简单分析源码可知，组件里的主要内容是一张图，一个串文本，还有一个链接指向https://reactjs.org
在浏览器打开也可以验证出结构分析的正确性。
在这里插入图片描述

Leonopteryxw

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
webstorm创建react，及其代码结构

webstorm创建react，及其代码结构webstorm提供了创建各种框架的方式，通过用户点击交互的方式简化了命令行的操作，这篇markdown主要说明一下使用webstorm 2020版本创建react的一些问题和react框架的代码结构。为了让过程更清晰，先新建一个test目录作为工程目录：E:\test生成react在上方导航栏点击File->New->Project，会出现一个对话框在对话框左侧选择React，右侧会出现一些选项，Location是希望创建react的工程
复制链接

扫一扫