React js for beginners, learn react js with basic code setup and code examples with general understanding. beginners guide for basic react js programming with examples

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

5. Thinkwik.com
5
Folder Structure
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

8. Thinkwik.com
8
Header.js
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