Making a gallery layout with more than one stateless component

We are going to be working on an scenario with different examples using Statefull and Stateless components, Reactrouter, JWT, Axios using get, post, put, delete, and Redux, so the things said before are going to be covered step by step on different posts, some of them are going to be just ReactJS and some of them are going to be with Springboot but there's any trouble for the ones who are just interested on the front-end side because it does not matter if the back-end is Springboot, Rails, Django JavaEE, Laravel and so on, anyway making this short the main goal about this very first topic is to be able to set up a gallery layout with more than one parent - child stateless component. a mini eCommerce!

we can work with any custom prebuilt html template on React, so for the purpose of the tutorial I just get some css styles just to display the things we are going to be working but you know with some more style!

ok so let's get started, copy any css and any js folders you feel comfortable on the public directory of your project (Get the project from GitHub) in other words your chosen template.

these steps are for the ones who want to work with a pre-built html template, after you have already copied your css and js folders on your pubic folder you've got to add to the index.html file which is inside the public folder the css links<link href=""> and the js <script src="">
in this case it would be something like this

so the project structure would look like like this, as I said before if you want to do it with another css files or js or a template which has got more files just set them up on the public folder

public

--css
--img
--js
--vendor
--favicon.ico
--index.html
--manifest.json

src

Comments

How to deploy a VueJS App using Nginx on Ubuntu

There are thousands of blogs and websites out there explaining how to do a hello world and how to start with VueJS, but in this little post, I’m just going to be explaining how to do deploy a VueJs app after you have run the command through the CLI npm run build . So when you run the command npm run build a dist folder is created and that folder’s got the essential .js files to run our app, when we want to run our app on an Nginx server by default the vue-router is not going to work well so that Nginx does not come ready to work by default with a VueJs app This is basically for a Linux Ubuntu distribution if you’ve got any other Linux distribution just pay attention where is going to be set the www/html folder and the Nginx settings so that this is useful for any Linux distribution Install and configure nginx sudo apt install nginx Double check to make sure the nginx service is running with command service nginx status, then open your browser and enter url

How to secure SpringBoot with SSL and Tomcat or Undertow

when we are going to take our applications to production mode, we must have an SSL certificate for the FrontEnd and BackEnd too, in this case, our backend is a SpringBoot which is using a tomcat embedded server. Terminology TLS vs SSL TLS is the successor to SSL. It is a protocol that ensures privacy between communicating applications. Unless otherwise stated, in this document consider TLS and SSL as interchangable. Certificate (cert) The public half of a public/private key pair with some additional metadata about who issued it etc. It may be freely given to anyone. Private Key A private key can verify that its corresponding certificate/public key was used to encrypt data. It is never given out publicly. Certificate Authority (CA) A company that issues digital certificates. For SSL/TLS certificates, there are a small number of providers (e.g. Symantec/Versign/Thawte, Comodo, GoDaddy, LetsEncrypt) whose certificates are included by most browsers and Operating System

How to do pagination SpringBoot with Jbctemplate, MySQL

We are going to be working on a topic which is a basic need when doing any app, and it is Pagination. let's get started creating a product table at https://mockaroo.com/ create table products ( id INT, name VARCHAR(50), code VARCHAR(50) ); insert into products (id, name, code) values (1, 'Hettinger-Goyette', '42549-680'); insert into products (id, name, code) values (2, 'Konopelski-Klein', '49527-724'); insert into products (id, name, code) values (3, 'Smitham, Kuhlman and Balistreri', '53238-003'); insert into products (id, name, code) values (4, 'Hettinger, Weissnat and Goodwin', '0143-9916'); insert into products (id, name, code) values (5, 'Rowe Inc', '42291-898'); insert into products (id, name, code) values (6, 'Ernser-Hauck', '10544-617'); insert into products (id, name, code) values (7, 'Maggio and Sons', '68788-9087'); insert into products (id, name,

Useful Spring Boot, VueJs, ReactJS, Django restframework,AWS Terraform for beginners

Search This Blog