Skip to main content

[ Part 1] Nutracker, ReactJS application - Creation & first component


Part 1: from scratch

Read the introduction

in this part I'll be explaining the first commit, source code for that can be found here:
https://github.com/blabadi/react-nutracker/tree/f3b998b6e4ba9d2cdeed15ce637066fac0647c1f

Creating the project:

run this command (this is using nodeJS binary) :
npx create-react-app react-nutracker

this will initialize the directories and we are ready to start adding our code.
this is a command line tool created by react team to make initializing as easy as possible because it can be overwhelming for people to configure everything, let's focus on react for now and not the details that can be done later.
see: https://github.com/facebook/create-react-app

you can also start the application and it will work:
npm start

Install bootstrap

npm install --save bootstrap

import bootstrap in the index.js file.
import 'bootstrap/dist/css/bootstrap.min.css';

The First NUtracker Component: Search box




1-  I added the following directories:  components, containers, repos, model


2- in component/search the initial version of SearchBox component:

and used here in Dashboard Component:


Observations:

  • The dashboard component stores the results in the state
  • It passes to the searchBox what to do when the user enters a new search term (onTermChange callback)
  • It also passes the results of the search for the search box to render AFTER fetching the results from the food repo (mock for a call to food REST api). the reason to have this kind of design is to keep search box a dumb component that can be reused again without it being aware of how to get the results. it's only a presentation component (i.e. it just renders html and notifies its container of any user events it receives)
  • The dashboard is a container component, which means it manages one or many presentation components and provide them with the props they need to function either from server or whatever, and it also manages what to do when an event is raised by the child components, in this example it calls foodRepo to get foods based on what the user has input in the box.
  • Note that when we get the results from food repo we store them in the state in a key value generic properties, to allow the search box to render the results without knowing what kind of results it is, it could be foods, articles, cats, whatever.
  • Also the key is needed by react when you render a list of anything or you will get an error, a property called key is needed in the html elements for react to work.
  • foodRepo and model is something I preferred to do, but you can organize the way you want.
result after part 1:



Part two: Adding Redux. : http://dev.basharallabadi.com/2018/09/part-2-nutracker-reactjs-application.html

Comments

Popular posts from this blog

Android RecyclerView - Adding Empty View

So RecyclerView was introduced to replace List view and it's optimized to reuse existing views and so it's faster and more efficient as stated in the documentation:

https://developer.android.com/training/material/lists-cards.html

While using it, I faced the issue of missing a useful functionality that is implemented in ListView.
that feature is setting an empty view in case there was no records.

In ListView it was as simple as this

View emptyView = findViewById(R.id.mylist_empty_view);
ListView  myList = ....
myList.setEmptyView(emptyView);

but this method doesn't exist for recycler view so we need a work around until android team fixes this.


and here are the screen shots of both list view and recycler view fix

List view :

Recycler view :



here is how I fixed it:



here is the content of empty_view, it can be anything.



Enjoy.

Creating your own OAuth2 server and clients using spring security - part 1

In this series of posts, I'll try to put together a simple working example on how to create your own OAuth2 server.

if you want to know more on OAuth2 and when to use it as authentication and authorization protocol then you can search about it on google and i'll put some URLs later.

Now I assume you are familiar with java web applications using Spring and maven.

to get started we need to create the server side with all dependencies required and i'll list them here, i'll use maven 2 to ease downloading dependencies for us.


Steps:

1- Create new maven project with arch type webapp:



2- Add the required depenedencies for spring, spring security, spring-oauth2, hibernate & other libraries (required for this tutorial only you can use other libraries if you like)

https://gist.github.com/anonymous/d33a31ddc3ba84375cf3

3- I used hibernate to automate the creation of the schema required by spring OAuth2 to manage tokens (it's required to have schema created in db if you a…

Android - Multiple themes for one application

Sometimes you want to have multiple themes for your app
one strong example is having the ability to switch between dark and light themes because during night, a white bright screen can really be annoying for users eyes

Android will do most of the work for you but it may be required to change icons between themes to fit colors
In this blog I'll show a simple app with both dark and light themes and how to change icons without having to do that from code and keep things clean and centralized.
first of all let's create our activity, it will look something like this :


In /rest/values/styles.xml, we inherit Theme.AppCompat
 <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat">
        <!--
            Theme customizations available in newer API levels can go in
            res/values…