Soxolo - React Multipurpose Landing Page Template

Template Name:Soxolo - React Multipurpose Landing Page Template
Version: 1.0.0
Last Updated On: 15 May 2020
Author: Omnibubble

Thank you for choosing our template. We hope you had a good experience. We always strive to keep improving and therefore, we would love to learn about your opinion and suggestions to serve you better in the future. Our highest priority is to ensure that our support meets your expectations. If you have any questions that are beyond the scope of this document, feel free to email at help.omnibubble@gmail.com

React Quick Start

[1] Install dependencies:


                                yarn install or npm install

Node.js is a run-time environment which includes everything you need to execute a program written in JavaScript. It’s used for running scripts on the server to render content before it is delivered to a web browser.

[2] Run dev server:


                                yarn start or npm start

Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

[2] Run dev server:


                                npm run build or yarn build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Our Tdswos React application is based on Create React App. For more detailed information of the CRA, visit the official Create React App documentation website.

Overview

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug.

Build encapsulated components that manage their own state, then compose them to make complex UI. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Template Features of React Version

React 16.13.1
Create React App
Bootstrap
Reactstrap
Redux
Code Splitting
Flex Grid
Icofont
React Image Lightbox
React Owl Carousel

Folder Structure

Running any of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

After creation, your project should look like this:


                        
                            my-app/
                            README.md
                            node_modules/
                            package.json
                            public/
                            
                                
                                    index.html/
                                     favicon.ico/
                                
                            
                            src/
                             App.css
                            App.js
                            App.test.js
                            index.css
                            index.js
                            logo.svg

For the project to build, these files must exist with exact filenames:

public/index.html is the page template;
src/index.js is the JavaScript entry point.

You can delete or rename the other files.

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.

Only files inside public can be used from public/index.html.

You can, however, create more top-level directories. They will not be included in the production build so you can 'use' them for things like documentation.

If you have Git installed and your project is not part of a larger repository, then a new repository will be initialized resulting in an additional top-level .git directory.

Our Tdswos React application is based on Create React App is an officially supported way to create single-page React. visit the official Create React App documentation website.

References

Term	Link	Version
react-bootstrap	https://react-bootstrap.github.io/getting-started/introduction/	v1.0.1
bootstrap	https://getbootstrap.com//	v4.4.0
react-icofont	https://www.npmjs.com/package/react-icofont	v13.6.0
react-image-lightbox	https://www.npmjs.com/package/react-image-lightbox	5.1.1
react-owl-carousel	https://www.npmjs.com/package/react-owl-carousel	v2.3.1
jquery	https://www.npmjs.com/package/react-image-lightbox	3.5.1

Security Notice

There is a report regarding to a security issue in one of the plugin in Node.js. Event-Stream 3.3.6 which contained a new dependency --for the Flatmap-Stream library version 0.1.1. The Flatmap-Stream library v0.1.1 is where the malicious code resides.

How to prevent it?

Remove all node_modules folder and yarn.lock file in your project directory. So the next installation is not based on the yarn.lock version, but will be upgraded

Re-install everything again using yarn or npm install command.