React -- 脚手架书写react

Posted 2021-12-04 zjh-study

一、脚手架工具

react也有很多脚手架工具，通过脚手架工具可以快速搭建一个项目应用。
官方推荐脚手架
如果你是在学习 React 或创建一个新的单页应用
Create React App
如果你是在用 Node.js 构建服务端渲染的网站
Next.js
如果你是在构建面向内容的静态网站
Gatsby

二、create-react-app

安装

npx create-react-app react-project

注意是npx，不是npm
安装创建好项目之后，切换到项目就可以运行项目了
运行

cd react-project
npm start

接下来就可以在3000的本地端口打开项目了

三、项目结构

public
这个里面放的是index.html根页面和其他一些静态资源文件
src
这个文件夹下面存放的就是所有的react代码
css初始化代码
现在在src里面的index.js里面创建一个App组件，在里面写入展示内容
注意：下面看起来有点不一样，正常应该是React.Component，但是这里直接写成了Component，原因是将Component作为一个组件引进来了，而不再是React的一个属性

import {Component} from 'react'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

然后就可以将这个组件渲染到root元素里面

ReactDOM.render(<App />, document.getElementById('root'))

四、开发工具

React DevTools开发工具类似于Vue DevTools工具，帮助浏览器调试react代码
React DevTools

五、注意事项

JSX是一种类似javascript的语法，不是HTML语法，所以书写需要注意一下：
1、样式类属性是className，不是HTML的class
2、事件方法是驼峰命名(onClick)，而不是HTML中的onclick
3、必须要闭合标签

六、提取组件

一般react项目中index.js作为主组件，其余所有组件都是引入到这个主组件，所以需要将App组件从index.js里面分离出去
App.js

import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

export default App

index.js

import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))