SlideShare a Scribd company logo
Thinkwik.com
1
Understanding how to code ReactJS | Basic Setup
and General Understanding
Written by ​Jalaj Sharma
A whole lot of talk about reactJS, redux, better alternative to Angular and more, but
what is all that? Have you found a lot of learning material and went through the
documentation but are still confused about how to code?
Here in this article we will break down all the big terms with reactJS like redux, axios,
react router, JSX and more with explanation and how to code with that. For this part of
the article, we will focus more on the general setup, understanding how to start, create a
basic skeleton with code alongside understanding. For reading this, I believe you have
basic understanding of reactJS​ as this course mainly focuses on how to code reactJS,
best practices, redux etc with their understanding.
Blog Thinkwik
Thinkwik.com
2
What is ReactJS? 1
ReactJS is a javascript library created by the Facebook community to create a user
interface and mainly focuses on building single page application. Some of the core
features of reactJS are:
JSX​​: Javascript and XML (JSX) is a simple javascript that lets creation of DOM
elements more precisely without making use of HTML. It allows us to use HTML syntax
and even old-fashioned javascript for flexibility.
Single Way data flow​​: In component’s renderer, immutable values are passed as
properties. Components are restricted to modify the properties directly by themselves
but they can listen to the callback function.
Virtual DOM​​: Virtual DOM is a copy of the real DOM. Virtual DOM manages nodes of
DOM elements and checks for changes in any element. If it finds a change in any of the
element, it modifies that specific element in the real DOM instead of re-rendering the
complete DOM tree.
Let’s get our hands dirty and understand things better by writing some code and
creating a simple react project. To create a new project, we will use create-react-app,
which provides us a complete boilerplate with a configuration of babel and webpack
setup and more. Make sure you have npm or any other package manager like yarn
installed on your machine as we will be using this for managing our packages.
1
http://blog.thinkwik.com/understanding-how-to-code-reactjs-basic-setup-and-general-understanding/
Blog Thinkwik
Thinkwik.com
3
Your my-shopping-app project will now be running in the browser on port 3000. Open
the created project in any code editor, I will be using atom for this.
Blog Thinkwik
Thinkwik.com
4
The above image shows the basic folder structure provided by create-react-app. Now
since this is our project, let's modify it and add stuff according to our needs.
For this part of our article, we will focus on designing a general workflow with folder
structure we might be needing, creating basic components, designing a page and
making use of higher order components. You can clone and ​download source code​ for
this project and play around with it.
Blog Thinkwik
Thinkwik.com
5
Folder Structure
Blog Thinkwik
Thinkwik.com
6
Let’s understand the folder structure here. I have renamed app.js and app.css to
MyShoppingApp.js and MyShoppingApp.css as per our project’s name. the component
folder will be comprised of all the independent components which generally does not
rely upon any other component. Container folder acts as a container of any other
component as their child component. For now, we don’t have any need of the container
folder, but following the good coding pattern and futuristic approach, we have kept
Product component inside the container folder. There are 2 higher order components –
Layout and Aux.
Layout.js is generally acting as a higher order component to wrap a different section of
the project within one page. It takes the header and the main content area and wrap
them all together to globally use repeated components without adding them every time.
Aux is a higher order component that simply returns the component which is wrapped
within it. It has been created to avoid any unnecessary use of <div> tag to wrap
complete elements within a component.
Blog Thinkwik
Thinkwik.com
7
Layout.js
Aux.js
For this project, I am using bootstrap v4.0.0 for the design part. Layout component here
is wrapping Header component and Products component. There is a different file
created for the header to use it everywhere across the project without repeating the
same code over time.
Blog Thinkwik
Thinkwik.com
8
Header.js
Blog Thinkwik
Thinkwik.com
9
The Header component above uses Aux component as a wrapper that returns the
complete component without making use of any unnecessary <div> element. It has 2
links, Product, the page we are currently on and `About`, which we will build along the
go when we are dealing with react router.
Products.js
Blog Thinkwik
Thinkwik.com
10
Products component comprises of all our listed products with details and allows us to
add products to our cart. We won’t be implementing any payment gateway for this
course module but we will make use of this component at the time of bringing redux into
action.
Blog Thinkwik
Thinkwik.com
11
Here is how our website looks so far. May not be super beautiful, what things we need
to understand to start with.
Blog Thinkwik
Thinkwik.com
12
Side Notes 
● Since our test project is a very small project, most of the functionalities
implemented here may not be very useful for this project but are quite useful
when working on the large-scale application. What we do here will give you an
idea of how to implement best practices in large-scale applications.
● Making use of functional components is a very good practice. Though we have
not touched anything such so far, we will be implementing it in `About` module
where we will not be needing any lifecycle hook or any need to updating state.
In the second part of this series, we will look on how to work with react router, react
router dom, how to fetch data using axios and will be doing some modification in what
we have created so far.
Follow along with the series and do comment your thoughts or any question that you
may have. So get ready, as we are about to move forward to dive deeper into react’s
core features.
For more details and New, Tech Updates click here
Blog Thinkwik

More Related Content

What's hot

Angular 2 - How we got here?
Angular 2 - How we got here?Angular 2 - How we got here?
Angular 2 - How we got here?
Marios Fakiolas
 
Muhammad azamuddin introduction-to-reactjs
Muhammad azamuddin   introduction-to-reactjsMuhammad azamuddin   introduction-to-reactjs
Muhammad azamuddin introduction-to-reactjs
PHP Indonesia
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Lachlan Hardy
 
Vuejs getting-started - Extended Version
Vuejs getting-started - Extended VersionVuejs getting-started - Extended Version
Vuejs getting-started - Extended Version
Murat Doğan
 
Angular js
Angular jsAngular js
Angular js
Thyda Eng
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrr
AfreenK
 
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
Arcbees
 
GWTcon 2015 - Beyond GWT 3.0 Panic
GWTcon 2015 - Beyond GWT 3.0 PanicGWTcon 2015 - Beyond GWT 3.0 Panic
GWTcon 2015 - Beyond GWT 3.0 Panic
Cristiano Costantini
 
Implementing auto complete using JQuery
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQuery
Bhushan Mulmule
 
React Native.pptx (2)
React Native.pptx (2)React Native.pptx (2)
React Native.pptx (2)
Emilio Rodriguez Martinez
 
Rapid Android Development for Hackathon
Rapid Android Development for HackathonRapid Android Development for Hackathon
Rapid Android Development for Hackathon
CodePolitan
 
Internal workshop react-js-mruiz
Internal workshop react-js-mruizInternal workshop react-js-mruiz
Internal workshop react-js-mruiz
Miguel Ruiz Rodriguez
 
Angular vs. React
Angular vs. ReactAngular vs. React
Angular vs. React
OPITZ CONSULTING Deutschland
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
Katy Slemon
 
AngularJS for Beginners
AngularJS for BeginnersAngularJS for Beginners
AngularJS for Beginners
Edureka!
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
Paul Bele
 
Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
Iran Reyes Fleitas
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
Murat Doğan
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6
Nir Kaufman
 
The Onion
The OnionThe Onion
The Onion
Jörn Zaefferer
 

What's hot (20)

Angular 2 - How we got here?
Angular 2 - How we got here?Angular 2 - How we got here?
Angular 2 - How we got here?
 
Muhammad azamuddin introduction-to-reactjs
Muhammad azamuddin   introduction-to-reactjsMuhammad azamuddin   introduction-to-reactjs
Muhammad azamuddin introduction-to-reactjs
 
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8Welcome to IE8 - Integrating Your Site With Internet Explorer 8
Welcome to IE8 - Integrating Your Site With Internet Explorer 8
 
Vuejs getting-started - Extended Version
Vuejs getting-started - Extended VersionVuejs getting-started - Extended Version
Vuejs getting-started - Extended Version
 
Angular js
Angular jsAngular js
Angular js
 
The complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrrThe complete-beginners-guide-to-react dyrr
The complete-beginners-guide-to-react dyrr
 
GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications GWTcon 2015 - Best development practices for GWT web applications
GWTcon 2015 - Best development practices for GWT web applications
 
GWTcon 2015 - Beyond GWT 3.0 Panic
GWTcon 2015 - Beyond GWT 3.0 PanicGWTcon 2015 - Beyond GWT 3.0 Panic
GWTcon 2015 - Beyond GWT 3.0 Panic
 
Implementing auto complete using JQuery
Implementing auto complete using JQueryImplementing auto complete using JQuery
Implementing auto complete using JQuery
 
React Native.pptx (2)
React Native.pptx (2)React Native.pptx (2)
React Native.pptx (2)
 
Rapid Android Development for Hackathon
Rapid Android Development for HackathonRapid Android Development for Hackathon
Rapid Android Development for Hackathon
 
Internal workshop react-js-mruiz
Internal workshop react-js-mruizInternal workshop react-js-mruiz
Internal workshop react-js-mruiz
 
Angular vs. React
Angular vs. ReactAngular vs. React
Angular vs. React
 
Top 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular AppTop 7 Angular Best Practices to Organize Your Angular App
Top 7 Angular Best Practices to Organize Your Angular App
 
AngularJS for Beginners
AngularJS for BeginnersAngularJS for Beginners
AngularJS for Beginners
 
Basics of Vue.js 2019
Basics of Vue.js 2019Basics of Vue.js 2019
Basics of Vue.js 2019
 
Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
 
Vue.js Getting Started
Vue.js Getting StartedVue.js Getting Started
Vue.js Getting Started
 
Up & running with ECMAScript6
Up & running with ECMAScript6Up & running with ECMAScript6
Up & running with ECMAScript6
 
The Onion
The OnionThe Onion
The Onion
 

Similar to Learn reactjs, how to code with example and general understanding thinkwik

Getting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperGetting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular Developer
Fabrit Global
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !
Ritesh Kumar
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx
75waytechnologies
 
learning react
learning reactlearning react
learning react
Eueung Mulyana
 
Architecturez votre projet créez une application react complète - open clas...
Architecturez votre projet   créez une application react complète - open clas...Architecturez votre projet   créez une application react complète - open clas...
Architecturez votre projet créez une application react complète - open clas...
Ahmed276865
 
Reactjs
ReactjsReactjs
7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient
Narola Infotech
 
Best React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdfBest React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdf
FuGenx Technologies
 
project_proposal_osrf
project_proposal_osrfproject_proposal_osrf
project_proposal_osrf
om1234567890
 
Codeigniter
CodeigniterCodeigniter
Codeigniter
Chirag Parmar
 
Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
Hamid Ghorbani
 
Top 10 React Development Tools to Choose in 2023.pptx
Top 10 React Development Tools to Choose in 2023.pptxTop 10 React Development Tools to Choose in 2023.pptx
Top 10 React Development Tools to Choose in 2023.pptx
75waytechnologies
 
Best React Developer Tools In 2022
Best React Developer Tools In 2022Best React Developer Tools In 2022
Best React Developer Tools In 2022
NayantikaSrivastava1
 
React Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfReact Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdf
BOSC Tech Labs
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
IRJET Journal
 
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In BanglaFrontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Stack Learner
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
RapidValue
 
slides.pptx
slides.pptxslides.pptx
slides.pptx
HafidzIhzaPratama
 
slides.pptx
slides.pptxslides.pptx
slides.pptx
HarshitJain302462
 

Similar to Learn reactjs, how to code with example and general understanding thinkwik (20)

Getting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular DeveloperGetting Started with React, When You’re an Angular Developer
Getting Started with React, When You’re an Angular Developer
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Welcome to React & Flux !
Welcome to React & Flux !Welcome to React & Flux !
Welcome to React & Flux !
 
Vue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptxVue Or React - Which One is the Best_.pptx
Vue Or React - Which One is the Best_.pptx
 
learning react
learning reactlearning react
learning react
 
Architecturez votre projet créez une application react complète - open clas...
Architecturez votre projet   créez une application react complète - open clas...Architecturez votre projet   créez une application react complète - open clas...
Architecturez votre projet créez une application react complète - open clas...
 
Reactjs
ReactjsReactjs
Reactjs
 
7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient7 Tools To Make React Development Faster and More Efficient
7 Tools To Make React Development Faster and More Efficient
 
Best React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdfBest React Developer Tools to Increase Your Productivity.pdf
Best React Developer Tools to Increase Your Productivity.pdf
 
project_proposal_osrf
project_proposal_osrfproject_proposal_osrf
project_proposal_osrf
 
Codeigniter
CodeigniterCodeigniter
Codeigniter
 
Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
 
Top 10 React Development Tools to Choose in 2023.pptx
Top 10 React Development Tools to Choose in 2023.pptxTop 10 React Development Tools to Choose in 2023.pptx
Top 10 React Development Tools to Choose in 2023.pptx
 
Best React Developer Tools In 2022
Best React Developer Tools In 2022Best React Developer Tools In 2022
Best React Developer Tools In 2022
 
React Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdfReact Best Practices All Developers Should Follow in 2024.pdf
React Best Practices All Developers Should Follow in 2024.pdf
 
FRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JSFRONTEND DEVELOPMENT WITH REACT.JS
FRONTEND DEVELOPMENT WITH REACT.JS
 
Frontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In BanglaFrontend Development Bootcamp - React [Online & Offline] In Bangla
Frontend Development Bootcamp - React [Online & Offline] In Bangla
 
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue SolutionsThe Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
The Superhero’s Method of Modern HTML5 Development by RapidValue Solutions
 
slides.pptx
slides.pptxslides.pptx
slides.pptx
 
slides.pptx
slides.pptxslides.pptx
slides.pptx
 

Recently uploaded

Aggression - Applied Social Psychology - Psychology SuperNotes
Aggression - Applied Social Psychology - Psychology SuperNotesAggression - Applied Social Psychology - Psychology SuperNotes
Aggression - Applied Social Psychology - Psychology SuperNotes
PsychoTech Services
 
Understanding of Self - Applied Social Psychology - Psychology SuperNotes
Understanding of Self - Applied Social Psychology - Psychology SuperNotesUnderstanding of Self - Applied Social Psychology - Psychology SuperNotes
Understanding of Self - Applied Social Psychology - Psychology SuperNotes
PsychoTech Services
 
Best Way to Overcome Procrastination and Increase Productivity.pdf
Best Way to Overcome Procrastination and Increase Productivity.pdfBest Way to Overcome Procrastination and Increase Productivity.pdf
Best Way to Overcome Procrastination and Increase Productivity.pdf
Million-$-Knowledge {Million Dollar Knowledge}
 
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
CANSA The Cancer Association of South Africa
 
aula open english sobre Classic-motorcycles-2_1.pdf
aula open english sobre Classic-motorcycles-2_1.pdfaula open english sobre Classic-motorcycles-2_1.pdf
aula open english sobre Classic-motorcycles-2_1.pdf
PauloVictor90882
 
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotesProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
PsychoTech Services
 
Strategies to rekindle the fire inside you and stay motivated.pdf
Strategies to rekindle the fire inside you and stay motivated.pdfStrategies to rekindle the fire inside you and stay motivated.pdf
Strategies to rekindle the fire inside you and stay motivated.pdf
Million-$-Knowledge {Million Dollar Knowledge}
 
The Six Working Genius Short Explanation
The Six Working Genius Short ExplanationThe Six Working Genius Short Explanation
The Six Working Genius Short Explanation
abijabar2
 

Recently uploaded (8)

Aggression - Applied Social Psychology - Psychology SuperNotes
Aggression - Applied Social Psychology - Psychology SuperNotesAggression - Applied Social Psychology - Psychology SuperNotes
Aggression - Applied Social Psychology - Psychology SuperNotes
 
Understanding of Self - Applied Social Psychology - Psychology SuperNotes
Understanding of Self - Applied Social Psychology - Psychology SuperNotesUnderstanding of Self - Applied Social Psychology - Psychology SuperNotes
Understanding of Self - Applied Social Psychology - Psychology SuperNotes
 
Best Way to Overcome Procrastination and Increase Productivity.pdf
Best Way to Overcome Procrastination and Increase Productivity.pdfBest Way to Overcome Procrastination and Increase Productivity.pdf
Best Way to Overcome Procrastination and Increase Productivity.pdf
 
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
The Secret Warrior - Help Share a Parent or Loved Ones’ Cancer Diagnosis with...
 
aula open english sobre Classic-motorcycles-2_1.pdf
aula open english sobre Classic-motorcycles-2_1.pdfaula open english sobre Classic-motorcycles-2_1.pdf
aula open english sobre Classic-motorcycles-2_1.pdf
 
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotesProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
ProSocial Behaviour - Applied Social Psychology - Psychology SuperNotes
 
Strategies to rekindle the fire inside you and stay motivated.pdf
Strategies to rekindle the fire inside you and stay motivated.pdfStrategies to rekindle the fire inside you and stay motivated.pdf
Strategies to rekindle the fire inside you and stay motivated.pdf
 
The Six Working Genius Short Explanation
The Six Working Genius Short ExplanationThe Six Working Genius Short Explanation
The Six Working Genius Short Explanation
 

Learn reactjs, how to code with example and general understanding thinkwik

  • 1. Thinkwik.com 1 Understanding how to code ReactJS | Basic Setup and General Understanding Written by ​Jalaj Sharma A whole lot of talk about reactJS, redux, better alternative to Angular and more, but what is all that? Have you found a lot of learning material and went through the documentation but are still confused about how to code? Here in this article we will break down all the big terms with reactJS like redux, axios, react router, JSX and more with explanation and how to code with that. For this part of the article, we will focus more on the general setup, understanding how to start, create a basic skeleton with code alongside understanding. For reading this, I believe you have basic understanding of reactJS​ as this course mainly focuses on how to code reactJS, best practices, redux etc with their understanding. Blog Thinkwik
  • 2. Thinkwik.com 2 What is ReactJS? 1 ReactJS is a javascript library created by the Facebook community to create a user interface and mainly focuses on building single page application. Some of the core features of reactJS are: JSX​​: Javascript and XML (JSX) is a simple javascript that lets creation of DOM elements more precisely without making use of HTML. It allows us to use HTML syntax and even old-fashioned javascript for flexibility. Single Way data flow​​: In component’s renderer, immutable values are passed as properties. Components are restricted to modify the properties directly by themselves but they can listen to the callback function. Virtual DOM​​: Virtual DOM is a copy of the real DOM. Virtual DOM manages nodes of DOM elements and checks for changes in any element. If it finds a change in any of the element, it modifies that specific element in the real DOM instead of re-rendering the complete DOM tree. Let’s get our hands dirty and understand things better by writing some code and creating a simple react project. To create a new project, we will use create-react-app, which provides us a complete boilerplate with a configuration of babel and webpack setup and more. Make sure you have npm or any other package manager like yarn installed on your machine as we will be using this for managing our packages. 1 http://blog.thinkwik.com/understanding-how-to-code-reactjs-basic-setup-and-general-understanding/ Blog Thinkwik
  • 3. Thinkwik.com 3 Your my-shopping-app project will now be running in the browser on port 3000. Open the created project in any code editor, I will be using atom for this. Blog Thinkwik
  • 4. Thinkwik.com 4 The above image shows the basic folder structure provided by create-react-app. Now since this is our project, let's modify it and add stuff according to our needs. For this part of our article, we will focus on designing a general workflow with folder structure we might be needing, creating basic components, designing a page and making use of higher order components. You can clone and ​download source code​ for this project and play around with it. Blog Thinkwik
  • 6. Thinkwik.com 6 Let’s understand the folder structure here. I have renamed app.js and app.css to MyShoppingApp.js and MyShoppingApp.css as per our project’s name. the component folder will be comprised of all the independent components which generally does not rely upon any other component. Container folder acts as a container of any other component as their child component. For now, we don’t have any need of the container folder, but following the good coding pattern and futuristic approach, we have kept Product component inside the container folder. There are 2 higher order components – Layout and Aux. Layout.js is generally acting as a higher order component to wrap a different section of the project within one page. It takes the header and the main content area and wrap them all together to globally use repeated components without adding them every time. Aux is a higher order component that simply returns the component which is wrapped within it. It has been created to avoid any unnecessary use of <div> tag to wrap complete elements within a component. Blog Thinkwik
  • 7. Thinkwik.com 7 Layout.js Aux.js For this project, I am using bootstrap v4.0.0 for the design part. Layout component here is wrapping Header component and Products component. There is a different file created for the header to use it everywhere across the project without repeating the same code over time. Blog Thinkwik
  • 9. Thinkwik.com 9 The Header component above uses Aux component as a wrapper that returns the complete component without making use of any unnecessary <div> element. It has 2 links, Product, the page we are currently on and `About`, which we will build along the go when we are dealing with react router. Products.js Blog Thinkwik
  • 10. Thinkwik.com 10 Products component comprises of all our listed products with details and allows us to add products to our cart. We won’t be implementing any payment gateway for this course module but we will make use of this component at the time of bringing redux into action. Blog Thinkwik
  • 11. Thinkwik.com 11 Here is how our website looks so far. May not be super beautiful, what things we need to understand to start with. Blog Thinkwik
  • 12. Thinkwik.com 12 Side Notes  ● Since our test project is a very small project, most of the functionalities implemented here may not be very useful for this project but are quite useful when working on the large-scale application. What we do here will give you an idea of how to implement best practices in large-scale applications. ● Making use of functional components is a very good practice. Though we have not touched anything such so far, we will be implementing it in `About` module where we will not be needing any lifecycle hook or any need to updating state. In the second part of this series, we will look on how to work with react router, react router dom, how to fetch data using axios and will be doing some modification in what we have created so far. Follow along with the series and do comment your thoughts or any question that you may have. So get ready, as we are about to move forward to dive deeper into react’s core features. For more details and New, Tech Updates click here Blog Thinkwik