安装使用

  • 全局安装
npm install -g create-react-app
  • 创建项目
create-react-app hello-react
  • 启动项目
cd hello-react
npm start

文件目录解读

React 学习笔记 —— React 脚手架_reactjs

  • .git：git 管理文件
  • node_moudles: node 模块
  • public：公共资源
  • src：代码主要写在这里面
  • .gitignore: git的忽略文件，描述哪些文件不用管理
  • package.json：node 包的配置文件，描述应用信息、命令等
  • README.md：应用的介绍信息
  • yarn.lock：yarn的版本控制文件

public

  • public 其他文件，简单介绍
    React 学习笔记 —— React 脚手架_reactjs_02
  • index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- 网站图标 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 为了移动端适配，开启理想视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 网站标签页的颜色，仅在安卓手机生效 -->
    <meta name="theme-color" content="#000000" />
    <!-- 网站描述 -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 在苹果手机中，指定将网站添加到屏幕上的图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用加壳时的配置文件 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
  	<!-- 浏览器不劫持 js 时的提示信息 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- 打包后的应用，将要注入的容器 -->
    <div id="root"></div>
  </body>
</html>

src

  • src 其他文件，简单介绍
    React 学习笔记 —— React 脚手架_reactjs_03
  • index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 使用 <React.StrictMode> 可以帮助提示不规范的内容，比如使用 字符串 ref
ReactDOM.render(
  <React.StrictMode>	
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 页面检测
reportWebVitals();

简单 demo

  • 主要文件结构
    React 学习笔记 —— React 脚手架_reactjs_04

  • index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  • App.js
import Hello from './components/Hello'

function App() {
  return (
    <div>
      <Hello/>
    </div>
  );
}

export default App;
  • Hello/index.jsx
import React, {Component} from 'react'
import './index.css'
export default class Hello extends Component {
    render () {
        return (
            <h1>Hello, React</h1>
        )
    }
}
  • Hello/index.css
h1 {
    background-color: tomato;
}
  • 效果
    React 学习笔记 —— React 脚手架_React_05