Kselax.ru

Hacker Kselax – the best hacker in the world

Menu
  • Blog
  • Contacts
  • wp plugin generator
  • English
    • Русский
Menu

Category: React

Formic sclerotic

Posted on 5 June, 201911 June, 2019 by admin

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { Formik, Form, Field, ErrorMessage } from 'formik'
 
<Formik
  initialValues={{ username: '', password: '', rememberMe: true }}
  validate={values => {
    // handle errorrs
    let errors = {}
    if (!values.username) {
      errors.username = 'Required'
    }
 
    return errors
  }}
  onSubmit={(values, actions) => {
    // could accept such actions    
    actions.resetForm()
    actions.setSubmitting(false);
    actions.setErrors({ onSubmit: 'the server unavailable' });
    actions.setStatus({ msg: 'Set some arbitrary status or data' });
  }}
  render={({ errors, status, touched, isSubmitting }) => (
    <Form className="loginForm">
      <div className="title">
        <h2>To come in...</h2>
      </div>
 
      <div className="emailOrLogin" >
        <Field
          type="text"
          name="username"
          placeholder="Email or login"
        />
        <ErrorMessage className="error" name="username" component="div" />
      </div>
 
      <div className="password">
        <Field
          type="password"
          name="password"
          placeholder="Password"
        />
        <ErrorMessage className="error" name="password" component="div"/>
      </div>
 
      <div className="rememberMe">
        <label>
          <Field
            type="checkbox"
            name="rememberMe"
          /> Remember me
        </label>
      </div>
      
      <ErrorMessage className="submitError" name="onSubmit" component="div"/>
      <button type="submit" disabled={isSubmitting}>
        Log in
      </button>
      {errors && errors.onSubmit && <div className="error">{errors.onSubmit}</div>}
      {status && status.msg && <div className="error">{status.msg}</div>}
 
      <div className='loginAndRegistration'>
        <Link to={`/${this.props.locale}/recover/`}>Recover forgotten password</Link>
        <Link to={`/${this.props.locale}/registration/`}>Registration</Link>
      </div>
    </Form>
  )}
/>

  How to load a file on the server with the formik https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc Formik doesn’t support such functionality, so you have to use this code

1
2
3
4
5
6
7
8
9
<input
  id="thumbnail"
  name="thumbnail"
  type="file"
  onChange={(event) => {
    setFieldValue("thumbnail", event.currentTarget.files[0]);
    return true;
  }}
/>

If we change input on the field it won’t work, we’ll get the error that tells that impossible to assign a file some data, we can assign…

Read more

How to use react-router with a few languages

Posted on 13 May, 201913 May, 2019 by admin

It is frequently need to create a site that will support a few languages, for example I’m going to create multilingual site which will support 3 languages for a while. Then I’m going to add a few more. So, I want to build with 3 ua, ru, en. And in this article I’ll explain to…

Read more

React-router overview

Posted on 10 May, 2019 by admin

React uses a router a special lib calls react-router. The lib allow from SPA make a multiple pages app React-router official documentation react-router   There is <Route /> component it has three props component render and children. In everyday life you’re going to use component and render It is used in this way to add…

Read more

How to use ref in React properly

Posted on 7 May, 20197 May, 2019 by admin

Hello there! Here in this article, I’m going to explain to you how to use react ref properly and write down a real example of the alive world so ref is a special attribute of the React. We can add it to any element. It takes a callback function which React will execute immediately. It…

Read more

redux-thunk vs redux-saga vs redux-promise

Posted on 6 May, 20196 May, 2019 by admin

Here we review such popular libs to make asynchronous requests in redux namely: redus-thunk redux-saga  redux-promise   Each of them does the same thing as sending asynchronous requests but each in its own way   #redux-thunk redux-thunk – is redux middleware which allows dispatching functions as actions It is the simplest async middleware between all…

Read more

Reactjs sclerotic

Posted on 8 March, 201928 August, 2019 by admin

  #How to render raw html in react there is a module html-to-react but I suggest you using  dangerouslySetInnerHTML

1
<div dangerouslySetInnerHTML={{ __html: patent && patent.nationalPhaseContent }} />

  How to stop scrolling when is dialog Here is written something link you have to do like that

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onClickAddWork = e => {
  e.preventDefault()
  document.body.style.overflow = 'hidden';
  this.setState({
    addWork: true
  })
}
 
onClickCreateAddWork = e => {
  e.preventDefault()
  document.body.style.overflow = 'unset';
  this.setState({
    addWork: false
  })
}

  How to insert google invisible recaptcha to react so it is very easy, at firs we have…

Read more

react-router and server side rendering (SSR)

Posted on 28 November, 201828 November, 2018 by admin

links: react-router the official documentation link   Content table:     #How does react-router work Here are good articles A simple V4 react tutorial and How single page applications work. The most interesting it’s how SPAs works. So I’ll say in own words. There are two kinds of SPA, The first that change its state depending…

Read more
flux diagram

What is flux used for

Posted on 24 November, 201826 November, 2018 by admin

flux is an architecture, which is used to build for front-end UIs. Links: npm package link the official site link GitHub link the GitHub examples page link very good video tutorial link   Content table   The flux diagrams         The flux pattern is unidirectional, so the data flow goes to one direction. To understand how…

Read more

React the basic course. From newbie to ninja

Posted on 27 October, 201831 October, 2018 by admin

Hi. In this article I’ll explain to you how to use react. How to learn it the basic. To the end of which you will able to create powerful react app and will know some pitfalls. Let’s get started. I’m a new to React and decided to create this masterpiece like a crib where I’ll…

Read more

Categories

  • bash (1)
  • English (9)
  • JavaScript (4)
  • node.js (22)
  • photoshop (1)
  • php (3)
  • React (9)
  • sclerotic (6)
  • Ubuntu (10)
  • Uncategorized (13)
  • Wordpress (1)

Tags

Ajax apache2 automation bash chrome-extension command line editor ejs email English English-grammar framework functions git graphql handlebars hybrid app installation javascript js linux newbie node.js node.js javascript nodemailer npm objects Performance php phpmyadmin playonlinux promise rabbitmq React react-router redis reverse-proxy session shell socket.io sublime text 3 time zones ubuntu unity webpack

Recent Comments

  • damien on How to install npm and nodejs the latest versions on ubuntu
  • Cam on How to install npm and nodejs the latest versions on ubuntu
  • Pierre on socket.io with apache as a reverse proxy on the CentOS
  • admin on How to use react-router with a few languages
  • admin on How to install npm and nodejs the latest versions on ubuntu
©2021 Kselax.ru Theme by ThemeGiant