react快速入门

最新推荐文章于 2025-04-06 17:28:49 发布

OJCC

最新推荐文章于 2025-04-06 17:28:49 发布

阅读量177

点赞数

分类专栏： react 文章标签： react js

本文链接：https://blog.youkuaiyun.com/qq_32705043/article/details/118585144

版权

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用create-react-app工具进行React项目的快速初始化，包括通过npx命令创建项目、进入项目目录、启动项目以及了解如何暴露配置选项。同时，提到了JSX的基本语法在React开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

create-react-app

零配置快速构建项目

官方文档地址：https://www.html.cn/create-react-app/docs/getting-started/

创建项⽬： npx create-react-app my-app

打开项⽬： cd my-app

启动项⽬： npm run start

暴露配置项： npm run eject

JSX基本语法

// 修改index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

// 变量
const text = "hello";
// 对象
const obj = {
  name: "josie",
  age: 99,
}
// 函数
const formatInfo = (info)=>(
  `name:${info.name},age:${info.age}`
)
// jsx对象
const msg = <div>msg</div>;

let show = false;

// 数组
const arr = ["a", "b", "c"];


const jsx = <div>
  {/* 变量 */}
  <div>{text}</div>
  {/* 对象 */}
  <div>name:{obj.name}</div>
  {/* 函数 */}
  <div>{formatInfo(obj)}</div>
  {/* jsx对象 */}
  {msg}
  {/* 条件语句 */}
  {
    show ? 'show': 'none'
  }
  <ul>
    {arr.map(item => (
      <li key={item}>{item}</li>
    ))}
  </ul>
</div>

ReactDOM.render(
  jsx,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

效果如图