React Lessons. Lesson 5.

Never miss a story from Soshace
Looks good!
Please enter correct name
Please enter correct email
Looks good!
Please confirm to subscribe!

React-Lessons.-Lesson-5.

To check out our structure we need to use React dev tools. You can download them here. This enables us to monitor the whole structure of your Virtual DOM, your components and third-party components. Also it has data access, you can view their Props, State, etc. It gets installed as an expansion to your browser and will be accessible when you request developing tools. As you begin working with React or a new project it is extremely useful. Here you can see the names of your components – for example, OneOpen, ArticleList, CommentList, etc. Just imagine, if we do not name the class as OneOpen, it will be unclear in DevTools to understand what code, for example, is responsible for the component’s work. And on the contrary, if you name it, you make your further work with Debug easier.

That was our final point of learning the basic principles of API React, how we create simple components, their logics of work, principles of downward data transmission, how we can change the states of our components and how it influences Virtual DOM and makes it re-build.  However, in reality, when one talks about React, he means not only the View library, but the whole infrastructure. For example, during your interview when applying for a position of a React developer, you will be asked a lot of React infrastructure questions and how much you are experienced in that. What third-party components do you work with, what decorators do you re-use (for example, there are plenty of decorators in NPM available for installation). For instance, let us take ReactRouter, business logics construction system, Flux, Redux, Relay, etc.

React encourages us to re-use components. The whole idea is to collect apps from OpenSource components. For example, a great resource for this goal will be react.rocks. Today let us talk about how to connect third-party components exampled by react-select . React-select is a combobox; its functionality is quite wide for everyday tasks.

To install it, let us put the following in our console:

npm i react-select@1.0.0-beta13 –s

Be sure to follow the versions of your components, NPM, etc. for there may be some problems.

First, let us create a directory named “components” and move our components there.

Then let us change our pass in app.js to the follwing:

ArticleList.js:

ArticleListOld.js:

ArticleOld.js:

Above our components, let us install this ‘Select’ , where we will show title of our articles. Let us go to ArticleList.js and add import:

Now we’ve got to transmit here some parameters. Often when you’ve got a well-documented component, you will be able to find documents to it. Note: You can find our ‘Select’ and propTypes in the code inside the Github modules file library inside the src folder, where all functions of this library/module are described.

In order to demonstrate our title list let us write:

where options is an object array. Let us turn every article into an object of a label: article.title type; that is how it will be shown in our ‘Select’ . Value will be a unique item in our business logics, so let us select an id for it. Right now it looks not really good for it doesn’t contain any style and so on. But third-party modules are good because they are ready-to-use solutions that have just everything. If they’ve got good documentation, it means you will find anything there, just as in our case:

But if you lack them, there is another way. Previously we’ve talked about WebPack: it can work not only with scripts, but also with pictures, styles, etc. Let us see, how it gets done using WebPack. We will need to install css-loader, style-loader:

npm install css-loader style-loader –SD

and connect it to WebPack; inside webpack.config.js we will add:

Now, to import our css let us go to ArticleList and write:

Now it looks great. Our next step will be to enable our component to keep states. It is a very popular React pattern, when we keep a state in some parent component and transmit it as props to a child one. Everything gets saved not in ‘Select’ , but in ArticleList. That is how our updated ArticleList will look like; later we will give the following comments:

state = { selectedArticles: null }

multi = {true} value = {this.state.selectedArticles} onChange = {this.handleSelectChange}

handleSelectChange = (selectedArticles) => { console.log(selectedArticles) this.setState({ selectedArticles

Let us describe the state of our ‘Select’ – null. Add value, Onchange. It means when you choose item in ‘Select’ , the object will be transmitted, as it is shown here:

You will need to change state of a parent component to let it re-build with a new state selected and transmit a new value.

Let us add a multi option –multi-select will turn on.

The primary advice is to use a ready-to-use code using checked solutions for these functional tasks are pretty trivial (multi-select), but need quite a lot of time to execute them by yourself. Now you have learned to connect ready-to-use solutions in React. But we still have a lot of interesting things to be done. See you! Stay tuned!

The lessons code can be found in our repository.

StayTuned_Type

We are looking forward to meeting you on our website soshace.com

Never miss a story from Soshace
Looks good!
Please enter correct name
Please enter correct email
Looks good!
Please confirm to subscribe!
Pavel Bragin 16 09 2016 Category:

Related articles

15.06.2019

5 Awesome JavaScript Conferences to Attend in 2019

With web development being an incredibly popular domain, there’s no shortage of relevant events, meetups, and cons for web developers to gather.>>>

Events
11.06.2019

Yarn Package Manager in 2019: Should We Keep on Comparing Yarn with Npm?

Yarn was created by Facebook, Exponent, Google, and Tilde to improve upon the package management workflow. In this article, we’ll explore Yarn>>>

Fundamentals
7.06.2019

10 Sorting Algorithms Interview Questions: Theory and Practice for 2019

Proficiency in algorithms is such an essential part of programming knowledge that it’s hard to imagine great remote developers without it. The>>>

Human Resources