一、脚手架工具
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