JSX
In React, instead of using regular JavaScript for templating, it uses JSX. JSX is simple JavaScript which allows HTML quoting and uses these HTML tag syntax to render subcomponents.
React Native
React has native libraries that is called as React Native which were announced by Facebook in 2015, It provides the react architecture to native applications like IOS, Android and UPD.
Single-Way data flow
In React, a set of immutable values are passed to the components renderer as properties in its HTML tags. Component cannot directly modify any properties but can pass a call back function with help of which we can do modifications. This complete process is known as “properties flow down; actions flow up”.
Virtual Document Object Model
React creates an in-memory data structure cache which computes the changes made and then updates the browser. This allows a special feature which enable programmer to code as if whole page is render on each change where as react library only render components which actually change.
npm install -g create-react-app
create-react-app your-app-name
Then let's move to the Visual Studio Code for our convenient. You can download VS Code from here.
Now open VS Code and Go File -> Add Folder to Workplace
Then select the project folder you created and add. Now you can see your project in left side work space. Right click on project name and give Open in Command Prompt. Then you can see your project in terminal with it’s path and also can see the default file structure for the React app.
npm start
Then you will get the default React window at http://localhost:3000/
Now try to write,
ReactDOM.render(<h1>Say Hello to React</h1>, document.getElementById('root'))
In index.html and see what will happen!!!
Now let’s build a more convenient folder structure.
Delete existing folder and create following folders inside root folder.
src folder on root, then create index.js , assets, components, styles, data, web-services folders inside src.
Let’s make commonly useful things inside our file structure.
Edit Index.js as
import React from 'react'
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello</h1>, document.getElementById('root'))
Make App.js inside component folder,api.js inside web-service folder and index.css inside style folder.
Now add content of index.css as follows,
body {
background-color: #1abc9c;
height: 100%;
}
.App {
text-align: center;
padding: 5%;
}
.right-button {
cursor: pointer;
float: right;
}
.list-item {
display: inline-block;
}
in App.js
import React, { Component } from 'react'
import '../styles/index.css';
class App extends Component {
render(){
return(
<h1>Hello React</h1>
)
}
}
export default App;
If you execute the Application you will see an output like this.
You can change the content of index.js file and styles as you want.
npm install --save react-bootstrap bootstrap@3
2.Import react-bootstrap into index.js
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
You need to import boostrap components to index.js when they are using.
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
Try with this inside your App.js
import React, { Component } from 'react';
import { Grid, Navbar, Jumbotron, Button } from 'react-bootstrap';
try this code to test
npm install --save react-router-dom
Now you can try it by replacing content of App.js with code given here