美文网首页
React 学习笔记(一)

React 学习笔记(一)

作者: nucky_lee | 来源:发表于2019-06-12 19:13 被阅读0次

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

首先安装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

相关文章

网友评论

      本文标题:React 学习笔记(一)

      本文链接:https://www.haomeiwen.com/subject/ehsrfctx.html