Based on MVC architecture, React JS library provides developers with the ability to create dynamic web page templates (e.g., pages with an extensive amount of interactive elements on them).
ReactJS is not a framework. ReactJS describes itself as the V in the MVC (Model-View-Controller) design pattern. It's a
view library that you can combine with frameworks such as AngularJS, Ember, and Meteor or even in conjunction with other popular JavaScript libraries, such as Knockout.
Many people use React on its own and combine it with a data flow pattern called Flux. The idea behind Flux is to establish unidirectional data flow, meaning that data should originate at a single point in your app and flow downwards.
Installation
1) install Node.js, npm
2) After that, install create-react-app package as below:-
$ npm install -g create-react-app
It is possible to manually create a React app, but Facebook has created a node module create-react-app to generate a boilerplate version of a React application.
Now create a New Single-Page React App by using create-react-app Package
$ npx create-react-app webshop
commands to run :-
npm start - starts the development server
npm run build - bundles the app into static files for production
npm test - starts the test runner
npm run eject - removes this tool and copies build dependencies, configuration files and scripts into app directory.
Understanding the Project Structure
/src/index.js
import React from "react";
import ReactDOM from "react-dom";
//JSX
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById("root"));
We are telling React what do we want to render (first argument), and where do we want this to be rendered (second argument).
Let's start with the first one.
Probably you wonder why are you putting an HTML element in the middle of your JavaScript parameter?
Fortunately, React creators created a language called
JSX. JSX (JavaScript XML) is an extension to the JavaScript language syntax. It is very much like a JavaScript rendition or version of HTML, in fact we're going to see that
most of JSX looks almost identical to HTML with those few slight differences.
So this is a reason why do we have to import React in the first line. The React library is the one that will enable JSX to work the way it's supposed to work.
In fact if you remove or comment out the import React line and try to save it and refresh the browser, it tells me that React is not defined even though we're not explicitly using React anywhere in my code.
public/index.html
<div id="root"></div>
Although the initial div is empty, ReactDOM.render() is actually attaching React code to the container dynamically. Obviously, we do not have to attach it to root. We can attach it to any other valid DOM element:
<div id="static">Static Content1</div><div id="root"></div><div id="static">Static Content2</div>
React.Fragment
You cannot render two JSX objects next to each other. It will cause an error. But instead they have to be wrapped in something so that they count as just one element with two elements inside for example
ReactDOM.render(<h1>Hello World</h1><h2>Sub heading</h2>, document.getElementById("root"));
ReactDOM.render(
<div>
<h1>Hello World</h1>
<h2>Sub heading</h2>
</div>,
document.getElementById("root")
);
If you don't want to wrap it with an extra div, there is a way to do that as well. Instead of div, simply use the special container - <React.Fragment>.
ReactDOM.render(
<React.Fragment>
<h1>Hello World</h1>
<h2>Sub heading</h2>
</React.Fragment>,
document.getElementById("root")
);
App class
This is the definition of main class. For now,
think of a class as of definition of the component.
class App extends Component {
constructor(props) { ... }
render() {
return (..);
}
}
Whenever React renders (is mounting) some class (components) it executes a few functions in a certain order. For now, just remember that constructor() is called before the render() function.
Mounting phase
These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
constructor()
getDerivedStateFromProps()
render()
componentDidMount()
functions() — after calling the constructor we have a few functions that are used within the application.
render() — this function you already know. It contains JSX code that will be rendered to the browser.
Creating a Web Shop
React focuses on a core set of the features that are required by web applications :-
core react libraries - react, react-dom, react-scripts
React relies on supporting packages to create complete applications :-
bootstrap - This package provides the CSS styles that is used to present HTML content.
fontawesome-free - This package provides icons that can be included in HTML content.
redux - This package provides a data store, which simplifies the process of coordinating the different parts of the application.
react-redux - This package integrates a Redux data store into a React application.
react-router-dom - This package provides URL routing, which allows the content presented to the user to be selected based on the browser’s current URL.
axios - This package is used to make HTTP requests and will be used to access RESTful and
GraphQL services.
graphql - This package contains the reference implementation of the GraphQL specification.
apollo-boost - This package contains a client used to consume a GraphQL service.
react-apollo - This package is used to integrate the GraphQL client into a React application.
When creating any kind of website, it's often beneficial to create a mock-up of how you want the page to look before proceeding to write any code. This makes it easier to visualize how you want your site to look and what components you need to create.
You can use any kind of mock-up tool to create this, even a sheet of paper will do.
Looking at our website
mock-up, we can see that we need to create the following components:
• A layout component
• A home page component for the front page
• A menu component with a brand name and the most important links
• A company information component
• A product list component
• An item component
• A checkout component
• A receipt component
These are just the view components.
In addition to these, we'll need to create data stores and actions and sub-components for the main ones.
Creating the layout
First of all, we need a basic layout for our webshop. There are many options available for you.
For instance, you can choose any one of the many open source
CSS frameworks, such as Bootstrap or Foundation, or you can strike your own path and build up a basic grid and bring in elements as you see fit.
For simplicity's sake, we'll be going with
Bootstrap for this webshop. It's a hugely popular framework that is easy to work with and has excellent support for React.
Add a few more packages -
react-bootstrap, react-router, lodash, reflux, superagent and react-router-bootstrap.
npm install --save <package>
This will put these packages in regular dependencies section in package.json
In order for the smart phones to show the page in proper scale, we need to add this meta tag as well:
<meta name="viewport" content="width=device-width, initialscale=1">
This notifies the smart phone browser that you want to display the page in full width with a scale of 1. You can play with the scale and width, but in most cases, this setting is what you want.
Adding your own CSS code
We already have a CSS file in the src folder. We're going to use a very basic CSS layout and rely on Bootstrap for the most part. Edit src/app.css and replace it with the following code:
body {
background:#eee;
padding:62px 0 0 0;
}
.row {
padding:0 0 20px 0;
}
.summary {
border-bottom: 3px double black;
}
The padding is there simply to make sure that the content falls inside the menu.
Adding a route handler
Create a file called
router.jsx and also a new file called
layout.jsx, which will be our primary route handler. This is where the contents of your route changes will go. Everything you put around it will not be changed when you switch to a new route, so this is where you place static elements, such as headers, footers, and asides.
The menu and footer
It's time to start working on the visible menu components. Let's begin with the menu and the footer. Looking at our mock-up, we see that we want to build a full-width section with the brand name of the shop and the menu links, and at the bottom, we want a single centered line of text with a copyright notice.
We'll do this by adding the following import to our import section in the
layout.jsx file:
import Menu from "./components/menu.jsx";
import Footer from "./components/footer";
Let's scan the JSX code. Our app is split into two columns using Bootstrap grid (Container, Rows, and Columns) thanks to that columns will either be displayed next to each other (large screen) or one below the other.
