欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

来学习react创建项目01

程序员文章站 2024-02-26 21:15:04
...

起步

  1. 创建项目: npx create-react-app my-app
  2. 打开项目: cd my-app
  3. 启动项目: npm start
  4. 暴露配置项:npm run eject

cra文件结构

├── README.md 文档
├── public 静态资源

├── src 源码
├── App.css
├── App.js 根组件
├── App.test.js
├── index.css 全局央视
├── index.js 入口文件
├── logo.svg
└── serviceWorker.js pwa支持
├── package.json npm依赖

入⼝文件定义,webpack.config.js

entry: [
// WebpackDevServer客户端,它实现开发时热更新功能 
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), 
// 应用程序入口:src/index
paths.appIndexJs,
].filter(Boolean),

webpack.config.js 是webpack配置文件,开头的常量声明可以看出cra能够⽀持ts、sass及css模块化。

// Check if TypeScript is setup
const useTypeScript = fs.existsSync(paths.appTsConfig);
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/; 

React和ReactDom

删除src下面所有代码,新建index.js。

import React from 'react'; 
import ReactDOM from 'react-dom';
// 这里怎么没有出现React字眼?
// JSX => React.createElement(...)
ReactDOM.render(<h1>Hello React</h1>, document.querySelector('#root'));

React负责逻辑控制,数据 -> VDOM
ReactDom渲染实际DOM,VDOM -> DOM
React使用JSX来描述UI
babel-loader把JSX 编译成相应的 JS 对象,React.createElement再把这个JS对象构造成React需要的虚拟dom。

相关标签: react入门 react