React——使用React脚手架搭建工程

一、使用create-react-app安装

# 使用yarn安装react项目
yarn create react-app react-study

# 如果使用yarn创建react项目报错
npm install -g create-react-app
create-react-app react-study

二、VSCode开发环境配置

打开设置，搜索emmet

添加如下代码

"emmet.includeLanguages": {
      "javascript": "javascriptreact"
    }

三、Vscode插件安装

1.ESLint：代码风格检查
2.ES7 React/Redux/GraphQL/React-Native snippets：快速代码编写
3.React Developer Tools：浏览器插件，安装在浏览器上，可以去谷歌商店进行安装

四、jsx的语法的一些特性

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
const a = 1234, b = 2345;
const htmlContent = `<div>我是一个div</div><p>我是一个p标签</p>`;
const div = (
  <>
    {/* 这是注释，下面的null、undefined、false都不会在页面上显示，而且jsx必须要有一个根节点，注释都不能和根节点平级 */}
    { null }
    { undefined }
    { false }
    { /* jsx中元素的属性使用小驼峰命名法，某个表达式作为元素属性时，千万不要写双引号，直接大括号 */ }
    { /* 由于class与关键字重复，所有，元素的class属性是使用className代替 */ }
    { /* style在jsx中不能使用字符串了，需要使用对象，第一对{}表示是一个jsx表达式，第二对{}表示一个对象 */ }
    <div className="div" style={{
      fontSize: "30px",
      color: "red"
    }}>
      {a} * {b} = {a * b}
    </div>
    { /* 防止注入攻击，所以jsx会默认将字符串自动编码后展示在页面上，所以如果想将字符串按dom元素进行展示的话，需要使用到dangerouslySetInnerHTML */ }
    <div dangerouslySetInnerHTML={{__html: htmlContent}}></div>
  </>

)
root.render(
  div
);

// 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();