zoukankan      html  css  js  c++  java
  • React

    搭建React环境

      create-react-app 是一个帮助快速搭建 react 工程的 bin。通过npm可以安装。

    npm install -g create-react-app

      You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

        

      index.js、index.html 是文件和首页入口。

    1、npm start

     Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

    2、import 路径设置

      默认 import 只能相对路径,如 import '../../xxx/zzz';

      我们可以设置import 默认搜索 src/ 目录,则上述代码可以简写为  'xxx/zzz';

      方法是在package.json 同级目录下,新建 .env文件,在其内加入:

    NODE_PATH=src

      

    参考:

    1、https://facebook.github.io/create-react-app/

    2、https://facebook.github.io/create-react-app/docs/advanced-configuration

    React技术要点

    1、The smallest React example looks like this:

      

    2、You can embed any JavaScript expression in JSX by wrapping it in curly braces.

      

    3、After compilation, JSX expressions become regular JavaScript objects.

      This means that you can use JSX inside of if statements and for loops.

      

    4、通过“”或{}指定属性

      

      

      Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. Otherwise JSX will treat the attribute as a string literal rather than an expression. 

    5、React Only Updates What's Necessary

    6、The simplest way to define a component is to write a JavaScript function:

      

      You can also use an ES6 class to define a component:

      

    7、Rendering a Component,Always start component names with a capital letter.

      

    8、Typically, new React apps have a single App component at the very top.

      

    9、Props are Read-Only。

       State is similar to props, but it is private and fully controlled by the component. Local state is exactly that: a feature available only to classes.

    10、constructor & state

      

    11、We want to set up a timer whenever the Clock is rendered to the DOM for the first time. This is called "mounting" in React.

      

      We also want to clear that timer whenever the DOM produced by the Clock is removed. This is called "unmounting" in React.

      

    12、Do Not Modify State Directly

      For example, this will not re-render a component,Instead, use setState():

      

    参考:

    https://facebook.github.io/react/docs/introducing-jsx.html

  • 相关阅读:
    iOS项目的目录结构和开发流程
    XCode SVN设置
    iOS 登录 注册
    ios开发常用技巧
    iOS问题解答
    iOS设计模式
    iOS开发:打包应用程序
    iOS 封装
    iOS开发常用宏
    Objective-C 类,实例成员,静态变量,对象方法,类方法(静态方法),对象
  • 原文地址:https://www.cnblogs.com/tekkaman/p/6391767.html
Copyright © 2011-2022 走看看