React 学习笔记（一）

一、准备工作：环境配置；快速构建应用

首先安装npm及nodejs；

npm模块的安装、删除和更新 ---命令行

https://blog.csdn.net/zeping891103/article/details/84400954

然后使用react脚手架create-react-app快速构建应用：

（一）安装

npm install -g create-react-app

（二）创建react应用

全局命令来创建react项目
create-react-app react-cli-demo

（三）执行npm run eject命令暴露项目的配置--单向操作不可逆，可以自由配置项目所需的依赖，不使用的版本零配置即可开发。

二、认识 React

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

React 中拥有多种不同类型的组件，我们先从 React.Component 的子类开始介绍：

class  ShoppingList  extends  React.Component  {  
    render()  { 
         return  (  
              <div className="shopping-list">  
                  <h1>Shopping List for {this.props.name}</h1>  
                  <ul>  
                      <li>Instagram</li>  
                      <li>WhatsApp</li>  
                      <li>Oculus</li>  
                    </ul>  
              </div>  
            );  
        }  
}

ShoppingList 是一个 React 组件类。一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render方法返回需要展示在屏幕上的视图的层次结构。

React 使用了一种名为 “JSX” 的特殊语法。

JSX 可以让你更轻松地书写这些结构。语法 <div /> 会被编译成 React.createElement('div')。上述的代码等同于：

React.createElement(
  "div", 
  {className: "shopping-list"}, 
  React.createElement("h1", null, "Shopping List for ", props.name),
  React.createElement("ul", null, React.createElement("li", null, "Instagram"), 
  React.createElement("li", null, "WhatsApp"), 
  React.createElement("li", null, "Oculus"))
);

三、官方开发文档走起～～

跟着课程完整学习每一节课内容，建立扎实的语法基础。

https://zh-hans.reactjs.org/docs/getting-started.html

四、《React.js 小书》----扎实基础，然后学习redux及其原理

http://huziketang.mangojuice.top/books/react/lesson1

来一个阶段性的总结文章---React入门看这篇就够了
https://segmentfault.com/a/1190000012921279

五、项目实践之路？

走到这里，对于小白的我已经是迫不及待的想要做项目来大展身手了。找来了大大小小好多个项目，这里推荐一个：
React高级实战打造大众点评 WebApp
https://github.com/mafeifan/react-dianping

看到各种package.json; webpack配置,一脸懵逼状[投降]。老老实实的恶补----# 前端 | webpack 从入门到工程实践
 https://segmentfault.com/a/1190000011042867

最后编辑于：2019.06.12 20:47:29