来学习react创建项目01
程序员文章站
2024-02-26 21:15:04
...
起步
- 创建项目:
npx create-react-app my-app
- 打开项目:
cd my-app
- 启动项目:
npm start
- 暴露配置项:
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。
下一篇: Java day35 xml文件解析
推荐阅读
-
来学习react创建项目01
-
使用create-react-app创建ts项目
-
Laravel学习第一天(创建laravel项目、路由、视图、blade模板),laravelblade_PHP教程
-
react 项目使用highcharts滚动条来展示数据
-
[知了堂学习笔记] SSM框架项目中遇到的问题及解决办法_01
-
Gradle学习:创建任务、依赖管理、多项目构建
-
学习ASP.NET Core Razor 编程系列三——创建数据表及创建项目基本页面
-
Laravel学习第一天(创建laravel项目、路由、视图、blade模板)
-
Laravel学习第一天(创建laravel项目、路由、视图、blade模板),laravelblade
-
spring学习之创建项目 Hello Spring实例代码