Camilo Reyes - Your First Week With React
Here you can read online Camilo Reyes - Your First Week With React full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2017, publisher: SitePoint, genre: Home and family. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:
Romance novel
Science fiction
Adventure
Detective
Science
History
Home and family
Prose
Art
Politics
Computer
Non-fiction
Religion
Business
Children
Humor
Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.
- Book:Your First Week With React
- Author:
- Publisher:SitePoint
- Genre:
- Year:2017
- Rating:4 / 5
- Favourites:Add to favourites
- Your mark:
Your First Week With React: summary, description and annotation
We offer to read an annotation, description, summary or preface (depends on what the author of the book "Your First Week With React" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.
React is a remarkable JavaScript library that taken the development community by storm. In a nutshell, its made it easier for developers to build interactive user interfaces for web, mobile and desktop platforms. One of its best features is its freedom from the problematic bugs inherent in MVC frameworks, where inconsistent views is a recurring problem for big projects. Today, thousands of companies worldwide are using React, including big names such as Netflix and AirBnB. React has become immensely popular, such that a number of apps have been ported to React -- including WhatsApp, Instagram and Dropbox.
This book is a collection of tutorials, selected from SitePoints React Hub, that will guide you through your first days with the amazingly flexible library.
Camilo Reyes: author's other books
Who wrote Your First Week With React? Find out the surname, the name of the author of the book and a list of all author's works by series.
Your First Week With React — read online for free the complete book (whole text) full work
Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "Your First Week With React" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.
Font size:
Interval:
Bookmark:
React is a framework that has made headway within the JavaScript developer community. React has a powerful composition framework for designing components. React components are bits of reusable code you can wield in your web application.
React components are not tightly coupled from the DOM, but how easy are they to unit test? In this take, lets explore what it takes to unit test React components. Ill show the thought process for making your components testable.
Keep in mind, Im only talking about unit tests, which are a special kind of test. (For more on the different kinds of tests, I recommend you read JavaScript Testing: Unit vs Functional vs Integration Tests.)
With unit tests, Im interested in two things: rapid and neck-breaking feedback. With this, I can iterate through changes with a high degree of confidence and code quality. This gives you a level of reassurance that your React components will not land dead on the browser. Being capable of getting good feedback at a rapid rate gives you a competitive edge --- one that youll want to keep in todays world of agile software development.
For the demo, lets do a list of the great apes, which is filterable through a checkbox. You can find the entire codebase on GitHub. For the sake of brevity, Ill show only the code samples that are of interest. This article assumes a working level of knowledge with React components.
If you go download and run the demo sample code, youll see a page like this:
In React, a good approach is to start with a hierarchy of components. The single responsibility principle comes to mind when building each individual component. React components use object composition and relationships.
For the list of the great apes, for example, I have this approach:
FilterableGreatApeList|_ GreatApeSearchBar|_ GreatApeList |_ GreatApeRowTake a look at how a great ape list has many great ape rows with data. React components make use of this composition data model, and it's also testable.
In React components, avoid using inheritance to build reusable components. If you come from a classic object-oriented programming background, keep this in mind. React components dont know their children ahead of time. Testing components that descend from a long chain of ancestors can be a nightmare.
Ill let you explore the FilterableGreatApeList on your own. It's a React component with two separate components that are of interest here. Feel free to explore the unit tests that come with it, too.
To build a testable GreatApeSearchBar, for example, do this:
class GreatApeSearchBar extends Component { constructor(props) { super(props); this.handleShowExtantOnlyChange = this. handleShowExtantOnlyChange.bind(this); } handleShowExtantOnlyChange(e) { this.props.onShowExtantOnlyInput(e.target.checked); } render() { return(Only show extant species ); }} This component has a checkbox with a label and wires up a click event. This approach may already be all too familiar to you, which is a very good thing.
Note that with React, testable components come for free, straight out of the box. There's nothing special here an event handler, JSX, and a render method.
The next React component in the hierarchy is the GreatApeList, and it looks like this:
class GreatApeList extends Component { render() { let rows = []; this.props.apes.forEach((ape) => { if (!this.props.showExtantOnly) { rows.push(); return; } if (ape.isExtant) { rows.push(); } }); return ({rows}It's a React component that has the GreatApeRow component and its using object composition. This is Reacts most powerful composition model at work. Note the lack of inheritance when you build reusable yet testable components.
In programming, object composition is a design pattern that enables data-driven elements. To think of it another way, a GreatApeList has many GreatApeRow objects. It's this relationship between UI components that drives the design. React components have this mindset built in. This way of looking at UI elements allows you to write some nice unit tests.
Here, you check for the this.props.showExtantOnly flag that comes from the checkbox. This showExtantOnly property gets set through the event handler in GreatApeSearchBar.
For unit tests, how do you unit test React components that depend on other components? How about components intertwined with each other? These are great questions to keep in mind as we get into testing soon. React components may yet have secrets one can unlock.
For now, lets look at the GreatApeRow, which houses the great ape data:
class GreatApeRow extends Component { render() { return (Species: {this.props.ape.name}
Age: {this.props.ape.age}
With React components, it's practical to isolate each UI element with a laser focus on a single concern. This has key advantages when it comes to unit testing. As long as you stick to this design pattern, youll find it seamless to write unit tests.
Test UtilitiesLets recap our biggest concern when it comes to testing React components. How do I unit test a single component in isolation? Well, as it turns out, there's a nifty utility that enables you to do that.
The Shallow Renderer in React allows you to render a component one level deep. From this, you can assert facts about what the render method does. What's remarkable is that it doesn't require a DOM.
Using ES6, you use it like this:
import ShallowRenderer from 'react-test-renderer/shallow';In order for unit tests to run fast, you need a way to test components in isolation. This way, you can focus on a single problem, test it, and move on to the next concern. This becomes empowering as the solution grows and you're able to refactor at will --- staying close to the code, making rapid changes, and gaining reassurance it will work in a browser.
One advantage of this approach is you think better about the code. This produces the best solution that deals with the problem at hand. I find it liberating when youre not chained to a ton of distractions. The human brain does a terrible job at dealing with more than one problem at a time.
The only question remaining is, how far can this little utility take us with React components?
Take a look at GreatApeList, for example. What's the main concern you're trying to solve? This component shows you a list of great apes based on a filter.
An effective unit test is to pass in a list and check facts about what this React component does. We want to ensure it filters the great apes based on a flag.
One approach is to do this:
import GreatApeList from './GreatApeList';const APES = [{ name: 'Australopithecus afarensis', isExtant: false }, { name: 'Orangutan', isExtant: true }];// Arrangeconst renderer = new ShallowRenderer();renderer.render();// Actconst component = renderer.getRenderOutput();const rows = component.props.children;// Assertexpect(rows.length).toBe(1);Note that Im testing React components using Jest. For more on this, check out How to Test React Components Using Jest.
Font size:
Interval:
Bookmark:
Similar books «Your First Week With React»
Look at similar books to Your First Week With React. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.
Discussion, reviews of the book Your First Week With React and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.