React -- 脚手架书写react

一、脚手架工具

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'))

转载于:https://www.cnblogs.com/zjh-study/p/10919565.html