React 学习篇（一）

风往哪个方向吹，草就要往哪个方向倒。年轻的时候我也曾经以为自己是风，可是最后遍体鳞伤，才知道，我们原来都只是草。

18年经历的事情还是有点多的，生活还是不能太安逸了，很容易被淘汰，要通过不断地学习来强大自己。拥抱改变，走好艰难的19年吧。

React的学习，当然还是首推官网去学习。当然官网也说了，最好有点JavaScript、HTML、CSS的基础，我还好吧，算是入门级的基础。

React是啥

• React 是一个用于构建用户界面的 JAVASCRIPT 库。
• React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
• React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
• React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

创建第一个应用

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine.

意思是说创建应用之前，需要nodejs 版本大于6.0， npm版本大于5.2

// 命令行输入以下，查看node版本
node -v

// 命令行输入以下命令，查看npm版本
npm -v

自己下载安装NodeJS，会自动安装npm。

环境安装完毕，接下来开始第一个react应用吧。

npx create-react-app my-app  // my-app 工程名称注意不要有大写字母
cd my-app 
npm start // 启动服务，至此浏览器将展示咱们第一个系统搭建好的应用。

image.png

修改第一行代码

上边咱们已经把react的第一个应用搞起来了，那么我们看看渲染这个页面的代码在哪儿呢。用开发工具(我用的Visual Studio Code)打开如下图。

image.png

• 我们看到有public、src两个文件夹，打开src文件夹，里面东西还挺多，App.css、App.js这个就是咱们看到的上边展示的那个页面的内容，通过查看网页源码我们知道，public文件夹下 index.html是整个页面的内容，App.js只是作为一个 组件 来展示的。
• index.js是咱们程序的入口，一般这个不怎么改动吧？
• package.json做一些配置用的。

好了，我们知道咱们展示的页面是在App.js文件中，哦，这里边不是HTML的东西吗，那好办了，来吧咱们的hello world

class App extends Component {
  render() {
    return (
      <div className="App">        
          Hello world        
      </div>
    );
  }
}

image.png

so，到这里咱们第一个应用就结束了。后边再继续吧。