In our previous post we started with creating our first react app and than we learned about some basic terminologies in react. Today we are going to focus on creating the router behaviour using react library.
Incase you want to learn about filtering in react check the github code.
Github for React Router
npm install --save react-router-dom
- Import Browser router in src/index.js (Line 6 in the below code example)
component inside (Line 8)
2) Link, this component accepts the to property which directs the app to the given path.
>Contact<Link component fully renders a proper anchor tag (a) with the appropriate href, you can expect it to behave how a normal link on the web behaves.
3) Route Component, this component is a critical piece of building an application with React Router because it’s the component which is going to decide which components are rendered based on the current URL path.
1.Component :- its the building block of react app, just like functions, we create components to perform some functionality. It takes the given parameters (called as props) and render UI in the browser by consuming the given parameters.
Example:- we need to display contact details of a person so we’ll create the below component which takes the props as parameter when we use this component.
a)Using class syntax to create component,
b)Component uses the render method to return the UI component to the calling parent component.
c)Export the component and it will imported with this name and used inside calling parent component
d)Calling a component with props.
2.Props, its like parameters to components like we have arguments to a function, we use them to pass data to components.
a)How to pass data :-
b)Access the prop in the component by using this keyword (refering to the current context)
Note:- props refer to attributes from parent components. It represents “read-only” data that are immutable.
3.Stateless function component, incase our component just returns the UI component we can use function to create a component instead of creating a class
a)What changes we have to do?
- Function will take passing prop as argument
- Returns the description UI
- this keyword is not used in accessing the props inside function.
Stateless function component for above class component:-
4.State:- represents mutable data that ultimately affects what is rendered on the UI. State is managed internally by the component itself and is meant to change over time, commonly due to user input (e.g., clicking on a button on the page).
a)To create state it should be declared inside a Class
b)How to pass state to a component
One of the key benefits of using State in React to build UI components: when it comes to re-rendering the page, we just have to think about updating state. We don’t have to keep track of exactly which parts of the page change each time there are updates. We don’t need to decide how we will efficiently re-render the page. React compares the previous output and new output, determines what has changed, and makes these decisions for us. This process of determining what has changed in the previous and new outputs is called Reconciliation.
Note:- In React UI is function of state, when state changes UI also changes.
We already learned how to create our first Angular.io App in 10 minutes, this time we’ll repeat the same with React library.So lets get started.
Key terminologies in react app
Brush up :-
Create React App Package:-
We are going to use this tool l to get started in building a React app, as it sets up everything we need with zero configuration.
Creating our own Components:-
We have created this tutorial to make you up and running with Angular.io in 10 minutes. This is not a very detailed tutorial incase you are not familiar with Angular basics, please refer Angular.io documentation to get more details on the core concepts.
We’ll create our working app in Angular2 and it will look as below
Step1:-Starting with quickstart to create the setup for Angular2
a)Clone Quickstart into given folder ( say frontend)
git clone https://github.com/angular/quickstart.git learning
Cloning into ‘learning’…
remote: Counting objects: 1352, done.
remote: Total 1352 (delta 0), reused 0 (delta 0), pack-reused 1352
Receiving objects: 100% (1352/1352), 1.11 MiB | 0 bytes/s, done.
Resolving deltas: 100% (745/745), done.
Checking connectivity… done.
Now we are good with our angular setup, lets go ahead and create our own component. app.
Step2:-Creating our first Component
What is a component?
Components allow us to create different views, an angular app is a tree of angular components. These are subsets of directives ( from Angular -1) but unlike directives, components always consists of a template and only 1 component per selector ( like message selector that we’ll use in further steps) is instantiated. Each component need to be registered in ng-module ( the main component in angular) so that it can used by another components in a application.
Add new file under apps folder with .ts extension
- import components library inside this file
- create template
- create decorator
Step3:-Making our UI look better
We’ll add material library from Angular.
a)Add material lib
npm install --save @angular/material @angular/cdk