React从零开始学习一！

先说两句

从今年刚刚毕业到现在已经过了差不多五个多月了，刚刚开始找工作的那个星期还真是心力憔悴，每天奔波在各个公司的面试中，挣扎在各大框架的面试题里，到现在才发现不管是对于Vue，Angular，还是React任何一个其实都算不上是入门，更别说是熟练运用了，决心好好学习，以此记录监督自己。

先定一个小目标，完成一个有趣的问卷调查。

安装

确定已经装好Node和Npm,装了？看下一步：先装（不会怎么办，查撒）。

npm install -g create-react-app

简单的一句话，就O的K！

初始化

在你的项目下执行，创建一个名为qz-react-survey的react项目，执行起来确实是慢。

create-react-app qz-react-survey

跑起来也很简单啦，哟，不错哦！

cd qz-react-survey
npm start

目录结构

├── node_modules                      没啥说的吧？安装的所有依赖     
├── public    
│   ├─ favicon.ico
│   ├─ index.html                     单页应用嘛，就一个index.html，入口文件
│   └─ manifest.json                  咋一看，我确实也不知道是个啥，懂了来补
├── src                               源文件目录，初始化后目录有点乱，做了一些修改
│   ├─ index.js
│   ├─ components
│   └─ registerServiceWorker.js       这个小编查了一下，用来缓存资源到本地，提高访问速度的
├── .gitignore                        git提交的时候忽略文件
├── package-lock.json                 npm新玩意，没整明白，好像是锁定依赖版本的....
├── package.json
└── README.md

正式开始

进入src下components目录，创建第一个页面home.js，创建目录common用来存放公共组件，列如header、footer等等。

import React,{ Component } from 'react';

class Home extends Component {
  render () {
    return (
        <div className="home-container">This is home page</div>
    )
  }
}

export default Home;

简单的第一个页面就完成了。

有时会报出这个错误：

在react里面书写<div class="home"></div>由于class是JavaScript关键字，所以react使用className代替，上述写法改为<div className="home"></div>即可。

现在进入common目录下创建两个公共组件Header、Footer。

header.js如下：

import React,{ Component } from 'react';

class Header extends Component {
  render () {
    return (
      <header className="header" id="header">
        This is header.
      </header>
    )
  }
}

export default Header;

footer.js如下：

import React,{ Component } from 'react';

class Footer extends Component {
  render () {
    return (
      <footer className="footer" id="footer">
        This is footer.
      </footer>
    )
  }
}

export default Footer;

最后在home.js中引入common目录下的两个公共组件。

修改后的home.js:

import React,{ Component } from 'react';
import Header from './common/header';
import Footer from './common/footer';

class Home extends Component {
  render () {
    return (
      <div>
        <Header />
        <div className="home-container">This is home page</div>
        <Footer />
      </div>
    )
  }
}

export default Home;

第一步初始化页面就完成了。

原文地址：https://www.jb51.cc/react/302126.html