Up and Running with React in 10 minutes

“All great achievements require time…. Maya Angelou”
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 :-
We already know that in React we play with Javascript and embed html inside the jsx files to create our components.

JSX is awesome, but it does need to be transpiled into regular JavaScript before reaching the browser. We typically use a transpiler like Babel . We can run Babel through a build tool, like Webpack which helps bundle all of our assets (JavaScript files, CSS, images, etc.) for web projects. 


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.


npm install -g create-react-app

Note:- This will globally install the react app, containing the babel(for trans piling), web pack (for creating the build and hot reloading)
creating react app from CLI
create-react-app contact-app
cd contact-app
npm start

It’ll run our react app on localhost:3000

launching react cli

Modify src/App.js
This file contains the component (App) which is getting rendered in the browser. Incase we open and change this file the same will be reflected on the UI.

How is the App component rendered on the UI? If we open the “src/index.js” file it will show the binding to UI and its attached to “root” element inside the “public/index.html”.
index.js file in react

Creating our own Components:-
Components are the building blocks of react application.Thus it helps in breaking our UI into small applications that are working on DOT(do one thing) principle. Components give us the power of encapsulation ( hiding all the details).

Lets create our first component say “ContactList” inside “App” file and use it inside the App component and use it.

Lines 7-25 , shows the newly created component
Line 34, is where we have used the component
 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
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


//Creating our own component
class ContactList extends Component{
//our render method
render(){
//array of contact list
const people = [
{ name : "Rion"},
{ name : "Roy" },
{ name : "Ron" }
];
return(
<ol>
{people.map((person,index) =>
<li key={index}>{person.name}</li>
)}
</ol>
)
}

}
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to ContactList App</h2>
</div>
<ContactList />
</div>
);
}
}

export default App;



Playing with Props:-
Now in above case we hard coded the values of “people” array inside the contactlist component, incase we want that each component should show different contacts so we can use props feature available in React.

a)Replace the code for const people = this.props.people  (Line 6)
b)Pass props inside the contactlist component. (Line 25 & 31)

Now we can see that we used “ContactList” component twice (line 25 & 31) inside the App component and its displaying different contacts based on the “prop” parameters.

Using react component


 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
//Creating our own component 
class ContactList extends Component{
//our render method
render(){
//array of contact list
const people = this.props.people
return(
<ol>
{people.map((person,index) =>
<li key={index}>{person.name}</li>
)}
</ol>
)
}

}
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to ContactList App</h2>
</div>
<ContactList people={[
{ name : "Rion"},
{ name : "Roy" },
{ name : "Ron" }
]}
/>
<ContactList people={[
{ name : "More"},
{ name : "Mor" },
{ name : "Mori" }
]}
/>
</div>
);
}
}


With this tutorial we are up and running with React App, we learned about components, how to use them and how to pass property to a component and making them reusable.

Learn more 

Leave a Reply

Your email address will not be published. Required fields are marked *