React Archives - Kselax.ru

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 }) => (

</div>

<Field

type="text"

name="username"

placeholder="Email or login"

/>

</div>

<Field

type="password"

name="password"

placeholder="Password"

/>

</div>

<label>

<Field

type="checkbox"

name="rememberMe"

/> Remember me

</label>

</div>

Log in

</button>

{errors && errors.onSubmit && <div className="error">{errors.onSubmit}</div>}

{status && status.msg && <div className="error">{status.msg}</div>}

<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…

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…

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…

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…

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…

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…

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…

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…

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…