【02】React 目录介绍、组件创建

1、目录介绍

node_modules：模块安装后的文件
public：公共目录
　　index.html：入口文件
　　manifest.json:：允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段(不用管)
src：开发目录
　　index.js：入口文件
　　App.js：根组件
　　App.test.js：用于测试的文件
　　App.css：根组件样式
package.json：项目配置文件
README.md：项目说明文件

注：因为初始文件比较乱，可自定义文件夹，进行整理。

2、重点文件介绍

index.js

//React 是 React 的核心库
//ReactDom 是提供DOM相关的功能
import React from 'react';
import ReactDOM from 'react-dom';
//css样式
import './assets/css/index.css';
//引入App.js 这个组件
import App from './App';
//引入 加快 react 运行速度的一个js 文件 
import * as serviceWorker from './serviceWorker';

//ReactDOM.render 将App组件里的html代码渲染到容器展示在页面
//App组件里写是代码是jsx 语法
//public目录下的index.html文件里的 DOM节点id为root
ReactDOM.render(<App />, document.getElementById('root'));

// 加快 react运行速度
serviceWorker.unregister();

App.js

import React from 'react';
// 函数式组件
function App() {
  return (
    <div className="App">
      你好!
    </div>
  );
}
export default App;

3、组件的创建

　　创建home.js

//引入 react
import React,{Component} from 'react';

//方式一 ,函数式
function Home(){
    return(
        <div>
            <p>魔前一扣三千年，回首凡尘不做仙！</p>
            <p>只为她，掌缘生灭。</p>
        </div>
    )
}

//方式二,ES6
class Home extends Component{
    constructor(...props){
        super(...props)
    }
    //这里写jsx
    render(){
        return(
            <div>
                <p>魔前一扣三千年，回首凡尘不做仙！</p>
                <p>只为她，掌缘生灭。</p>
            </div>
        )
    }
}

//导出组件
export default Home;

　　App.js 引入home.js

import React from 'react';
import Home from './components/home'
//jsx 语法
function App() {
  return (
    <div className="App">
      你好!
      <Home/>
    </div>
  );
}
export default App;

　　效果

【02】React 目录介绍 、组件创建

【02】React 目录介绍、组件创建