React -- 脚手架书写react

1、脚手架工具

react也有不少脚手架工具，经过脚手架工具能够快速搭建一个项目应用。
官方推荐脚手架
若是你是在学习 React 或建立一个新的单页应用
Create React App
若是你是在用 Node.js 构建服务端渲染的网站
Next.js
若是你是在构建面向内容的静态网站
Gatsby

2、create-react-app

安装

npx create-react-app react-project

注意是npx，不是npm
安装建立好项目以后，切换到项目就能够运行项目了
运行

cd react-project
npm start

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

3、项目结构

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

4、开发工具

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

5、注意事项

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

6、提取组件

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