react学习笔记-从井字棋开始(1)

教程地址

https://react.docschina.org/tutorial/tutorial.html

新建工程

1.确保你安装了较新版本的 Node.js。

2.按照 Create React App 安装指南创建一个新的项目
npx create-react-app my-app

3.删除掉新项目中 src/ 文件夹下的所有文件。

4.在 src/ 文件夹中创建一个名为 index.css 的文件，并拷贝这些 CSS 代码。

5.在 src/ 文件夹下创建一个名为 index.js 的文件，并拷贝这些 JS 代码。

6.拷贝以下三行代码到 src/ 文件夹下的 index.js 文件的顶部：

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

文件解析 index.js

在index.js中，导入的App是一个组件，将组件通过ReactDom.render就可以渲染到页面上

React是ReactJs的核心React 开发的过程就是通过开发各类组件，并将各类组件拼接成我们所需要的页面

index.html如何结合index.js

html-webpack-plugin这个plugin实现的

具体 https://webpack.docschina.org/plugins/html-webpack-plugin/

导入包部分

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

解析说明:

导入react模块命名为React
导入rect-dom 命名为ReactDOM
导入样式文件 index.css

组件类

Class Square

class Square extends React.Component {
   
    render() {
   
      return (
        <button className="square">
          {
   /* TODO */}
        </button>
      );