Andrea Chiarelli - Beginning React
Here you can read online Andrea Chiarelli - Beginning 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: 2018, publisher: Packt Publishing, genre: Computer. 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:Beginning React
- Author:
- Publisher:Packt Publishing
- Genre:
- Year:2018
- Rating:3 / 5
- Favourites:Add to favourites
- Your mark:
Beginning React: summary, description and annotation
We offer to read an annotation, description, summary or preface (depends on what the author of the book "Beginning React" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.
Andrea Chiarelli: author's other books
Who wrote Beginning React? Find out the surname, the name of the author of the book and a list of all author's works by series.
![Azat Mardan [Azat Mardan] - React Quickly](/uploads/posts/book/119471/thumbs/azat-mardan-azat-mardan-react-quickly.jpg)
![Emilio Rodriguez Martinez [Emilio Rodriguez Martinez] - React: Cross-Platform Application Development with React Native](/uploads/posts/book/119453/thumbs/emilio-rodriguez-martinez-emilio-rodriguez.jpg)
![Andrea Chiarelli [Andrea Chiarelli] - Beginning React: Simplify Your Frontend Development Workflow and Enhance the User Experience of Your Applications With React](/uploads/posts/book/119447/thumbs/andrea-chiarelli-andrea-chiarelli-beginning.jpg)
Beginning 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 "Beginning 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:
Once we have installed the React Router package in our environment, we need to use the provided components in our application.
The first thing we need to do is add routing capabilities to our application. We can do this by changing the code of the index.js file, as follows:
import React from 'react';...
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
, document.getElementById('root'));
registerServiceWorker();
We highlighted the main differences, with respect to the previous version of the code. As you can see, we imported the BrowserRouter component from the react-router-dom module and wrapped the App component inside of it.
By wrapping the App component, the BrowserRouter component enriches it with routing capabilities.
This is a component composition hence we have called this as component wrapping.
Fortunately, we can use create-react-app, a command-line interface (CLI) tool that allows us to set up a React-based application without needing to configure any of the aforementioned tools. It is based on Node.js and provides commands to set up and modify a React application in an immediate way.
In order to install create-react-app, you need Node.js installed on your machine. You can install the CLI by typing the following command in a console window:
npm install -g create-react-appAfter installation, you can verify whether it is properly installed by typing the following command:
create-react-app --versionIf all is OK, the installed version of create-react-app will be shown.
We will now change the content of the existing project, my-shop-01, in order to add some CSS code and show the catalog title in red:
- Open a console window.
- Move to the my-shop-1/src folder.
- Create a file, Catalog.css, and add the following code:
- Open the Catalog.js file and add the statement to import the Catalog.css module, as shown here:
import './Catalog.css';
class Catalog extends React.Component {
render() {
return
}
}
export default Catalog;
- Run npm start and look at the result.
You can find a project ready in the my-shop-02 folder at Code/Chapter-2 .
The browser will show the Catalog title in red:
You should take this aspect into account when you want to migrate the application into a development environment not based on webpack.
In the preceding examples, we implemented view navigation in the App component by using the Switch, Route, and Link components provided by React Router. We can use these routing components inside of any other component so that we can build nested views and nested routes.
Let's try to illustrate this with an example. Suppose that we want to add a list of winemakers to our application. We can add a new item to the navigation bar that allows us to navigate to a page showing that list.
The following screenshot shows how the new layout will appear:
So, let's change the App component's JSX markup, as follows:
import React, { Component } from 'react';import './App.css';
import Catalog from './Catalog';
import About from './About';
import WineMakers from './WineMakers';
import { Switch, Route, Link } from 'react-router-dom';
class App extends Component {
render() {
return (
- Catalog
- WineMakers
- About
);
}
}
export default App;
We imported the WineMakers component, defined a route that maps the /winemakers path to the new component, and added a link to navigate to it.
We can implement the list of winemakers as follows:
import React from 'react';import WineMaker from './WineMaker';
import { Switch, Route, Link } from 'react-router-dom';
class WineMakers extends React.Component {
renderWineMakersList() {
return
...
Wine & Co
}
render() {
return
...
export default WineMakers;
The WineMakers component has the renderWineMakersList() method that returns the React element implementing a list of links to each winemaker. This method is used as the value of the render attribute of the route matching the /winemakers path in the render() method of the component. The other routes get the path pointing to each specific winemaker and render the WineMaker component according to the identifier code.
You may notice that we are implementing a view in the WineMakers component that is shown inside of the view implemented in the App component. In other words, we implement nested views by composing components that implement views.
Notice that the Route component has the path attribute (which allows us to specify the URL to map) and the component attribute (which allows us to assign the component to render in the current view):
path='/' component={Catalog}/>
path='/about' component={About}/>
The path attribute is used by React Router to detect the component to render, as specified by the corresponding component attribute.
In the previous route mapping, if we click on a Link component associated with the /about URL, the route with the root (/) path will match the starting part of /about, and the Catalog component will be rendered.
If we want a strict comparison between the path attribute's value and the URL, we need to specify the exact attribute, which is shown as follows:
exact path='/' component={Catalog}/>
This prevents any URL starting with / from being captured by the first route.
The component attribute of the Route component allows us to specify the component to render. Alternatively, we can use the render attribute to specify the invocation of a function returning a React element, as shown in the following example:
()}/>This approach is similar to using the component attribute, but it may be useful for inline rendering and when we need to pass values to the element.
The Route component also allows us to specify the children attribute. As with render, we can assign a function to this attribute, but the elements returned by that function will always be rendered, regardless of whether the path matches or not.
Consider the following example:
()}/>
The Footer component will always be rendered, even if the path /footer doesn't match.
Font size:
Interval:
Bookmark:
Similar books «Beginning React»
Look at similar books to Beginning 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 Beginning 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.