Forem: Mekarosi

Create a Rails app with React for frontend using Esbuild and Jsbundle

Mekarosi — Fri, 18 Nov 2022 13:15:36 +0000

This post explains how I use esbuild and jsbundling to integrate a Rails 7 application with React.js as the frontend.
I use esbuild as my JavaScript bundler, but you may also use Webpack or rollup.js.
I'll describe the steps I followed, as well as the bugs I encountered and how I fixed them.
I'll be using the following versions: Ruby 3.1.2, Rails 7.0.4, and React 18.2.0 for this setup.

Step 1

I created a new rails app called reactapp and included j and esbuild flags.



rails new reactapp -j esbuild

Then I run the following code to launch Rails server.



run rails server

Step 2

You can see the commands for simultaneously running the JavaScript files and the Rails server in your Procfile.dev file.



// To run rails server and Javascript files simultaneously

web: bin/rails server -p 3000

But you may also use the following codes to run them independently on different terminals.



// To run only Javascript files

yarn build --watch

and



//To run only rails server

rails server

Step 3

After running my rails server and JavaScript files, I encountered a bug as shown below.

To debug the error I changed my package.json file as shown below

Note that you may probably not encounter this bug.

Step 4

I utilize stimulus to create a controller for my react setup by executing the code below since stimulus have been added to the Gemfile during initial setup in step 1 above.



rails g stimulus react

The react controller.js file was generated by running the code above.

Step 5

The newly created react_controller.js file is as shown below



import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="react"
export default class extends Controller {
  connect() {
  }
}

Step 6

Now I run the code below to create my home page.



rails g controller pages home

Step 7

In the routes.rb file, I added the below code to create my home page route.



root 'pages#home'

My routes.rb file is now as displayed below.

Step 8

In the home.html.erb file I added the following code



  <%= content_tag(:div, "",
 id:"app", data: {
    controller: "react"
 })%>

Now the home.html.erb file is as seen below

Keep in mind that the name of your controller should match the name of the stimulus you created in step 4 above.

Step 9

In the react_controller.js file I console log "react controller connected" to test if my JavaScript files are connecting with my rails application

At this point, You may encounter an error when you run rails server as I did below,

Run Rails Server from your Windows command prompt to fix the aforementioned error. For me, it fixed the issue as shown below.

From the console you can see "react controller connected" indicating that JavaScript is running and connecting to rails.

Step 10

Let's now add some react components. First, I ran the code below to add react and react-dom packages to the application.



yarn add react react-dom

In the package.json file, you can see react and react-dom have been included.

Step 11

Now I created App.js file in app/javascript/controllers folder
as seen below.

Step 12

In the react_controller.js file I imported App.js, react and react-dom and then added the following code below



 const root = ReactDOM.createRoot(document.getElementById("app"))
     root.render(
      <App/> 
     )

Now the App.js file is as seen below.

Step 13

When I ran my JavaScript file using the code in step 2 above, I got the error you can see below after creating the App.js file.

To solve the above error I added "--loader:.js=jsx" to the package.json script as seen below

My App.js file is now rendered in the browser as shown below.

Step 14

Let's create two components . First, I added react-router-dom package to the application and then create the clock.js and count.js components as seen in the images below



yarn add react-router-dom

Step 15

In the App.js file I imported clock.js, count.js and react-router-dom. As seen below.

Step 16

To create routes for the two newly created components, I added the following code to the routes.rb file.



get '*path', to: 'pages#home', via: :all

As seen below, my two components have now been rendered and are viewable in the browser.

Step 17

Now I used react hooks for state update and useEffect for side effects. As seen below.

In conclusion, I've provided the GitHub repository for the tutorial I described above, on how I used esbuild and Jsbundle to connect rails and React . I hope this tutorial will be useful to someone. Thanks for reading.

Intersection of Coding and Culture

Mekarosi — Fri, 28 Jan 2022 15:42:28 +0000

This photo is from a beauty pageant contest in which artificial intelligence was used to award the most beautiful lady; needless to say, the factors influencing the award will be dependent on the data collected to build the AI, based on the cultural schema of those that created the AI.

Dominant cultures embedded in our technologies, unfortunately, enforces certain beauty standards, so when technologies are not representative of as many cultures as possible this causes harm in different areas of life.

I recently attended a Scratch Education Collaborative workshop as a volunteer with Teachathon Foundation; the workshop was about connecting culture, coding, and equity.

I like to share my thought regarding the intersection of culture and coding.

Firstly, let's understand how culture impacts our coding creativity. We acknowledge it or not culture is reflected, in lots of ways, shaping how we talk, think, and even how we code.

Culture is the software to the brain's hardware, like without software, the computer will be a hunk of metal, but once the software is open and engaged the computer knows what to do.

Culture is the norm, behaviors, and beliefs that bind a group together. Our brains have been collecting and connecting information through the lens of culture since birth. Culture is the network that connects information.

On the other hand, coding is communication with the computer and getting back a response. Coding is how we take things that are important to people, add innovations to them, and get them to provide value to the wider audiences in the form of software, website, applications, robots, AI, etc.

As programmers when we create content, design software, collect data, develop an algorithm and create emoji, unconsciously our cultural schema is reflected in all these things that we do. Cultural schema is how the brain organizes information and forms a collection of everything we know.

To illustrate, when creating an emoji for the word "OK" this may be done differently by as many designers, based on their cultural schema.

Culture and code are at a crossroads. In the space of creative computing, the way we create is either positioned to be neutral or sometimes can lean toward certain biases. Some current or immerging technologies are not necessarily representative of everyone's culture. They can often hold dominant culture, that’s why everyone must participate in creating and shaping technology.

Programmers should, in authentic ways, make sure that they tap into their cultural schema and identities when designing and creating technologies, thus ensuring that diverse cultures are represented rather than one or two dominant cultures been represented.

In conclusion, making sure everyone is participating and represented in shaping technology is a way to create a balance for fairness, originality, and equity. When some are not culturally acceptable or represented, the balance is tilted.

I believe the following ways can effectively intersect culture and coding

Decentralize dominant culture with coding creativity.
Creating technologies that opposes cultural biases.
Teaching learners to embrace others cultural beliefs.
Encourage coding creativity and cultural acceptance.
Bridging culture interferences in coding.

Understanding JavaScript Methods as an Absolute Beginner

Mekarosi — Sun, 16 Jan 2022 17:40:45 +0000

As an absolute beginner, having learned and understood the syntax of a programming language, the next step is to understand how to use the “methods” of the language. I like to think of methods as the vocabulary of a language, the more you understand the easier it is to communicate and write code effectively.

What are methods?

Methods are functions which is a property of an object.

Ok, What are objects?

In JavaScript, objects can be seen as a collection of properties. Objects usually contains key/value pairs wrapped in an opening and closing curly brackets, as seen below.

let person = {

firstName:"John", 
lastName:"Doe", 
fullName: function() {
return this.firstName + " " + this.lastName;
}
};

// person is the name of the object
// firstName, lastName and fullName are the keys
// John, Doe, the function are the corresponding values

Now, let's understand what are methods?

The below lines of code shows an object containing a function. The object name is "objectName" and the method is "methodName".

const objectName = {
  methodName: function() {
    // Logics to be executed are written
  }
};

// methodName is a method of this object - called objectName.
// methodName is a function which is a property of the object.

Methods are the block of codes or statements in a program that gives the user the ability to reuse the same code which ultimately saves the excessive use of memory, acts as a time saver and more importantly, it provides a better readability of code. So basically, a method is a collection of statements that perform some specific task and returns the result to the caller. A method can also perform some specific task without returning anything.

Accessing Methods

JavaScript provides two notations for accessing methods. The first, and most common, is known as dot notation. Under dot notation, a method is accessed by giving the object name, followed by a period (or dot), followed by the property name.

Dot Notation

You can access an object method using a dot notation. The syntax is:

const object = {
  methodName: function(){
    console.log('hello world')
  }
}

// To access the method using dot notation.
object.methodName()
//  hello world

Here, the methodName method is accessed as object.methodName()
If you access a method without the () parentheses, it will return the function definition, to execute a function we invoke the function with ().

Bracket Notation

The second method is the bracket notation. For the bracket notation, a method is accessed by giving the object name, followed by the property name in quotation and then wrapped in an opening and closing square bracket.

objectName["propertyName"]

Note that in the code below, the quotations are absence, this is because the object properties has been assigned to a variable.

let propertyName = 'property';

objectName[propertyName]

Difference between Methods and Functions in JavaScript

We often misplace methods as functions; now let’s try to understand the difference between Method and function in JavaScript.

JavaScript Methods:

A JavaScript method is a property of an object that contains a function definition. Methods are functions stored as object properties. Method can be accessed with the following syntax:

object.methodName()

Features of Methods:

Actions that can be performed on objects are what we term JavaScript methods.
The method can also be called without using parenthesis.

JavaScript Functions:

A function is a block of code written to perform some specific set of tasks. We can define a function using the function keyword, followed by Name and optional parameters. Body of function is enclosed in Curly braces.

Function syntax:


// Function keyword

function functionName() {
// Code to be executed
}


// Arrow function

const functionName = () => {
// Code to be executed
}

Features of Functions:

The function is executed when something calls/invokes it.
The name may contain letters, digits, dollar signs, underscore.
Parameters are listed inside round parenthesis after the name of the function.
Arguments are values a function receives when it is invoked.
When the control reaches the return statement, it will stop executing and the value is returned to the caller.

Built-In JavaScript Methods

Built-in methods are predefined pieces of code in a program or programming framework or a programming language that performs some specific task. This makes programming easy as programmers don’t have to create a new method or function and can simply directly use the built-in methods in their application.

Some JavaScript Built-In Methods are as follow:

Array Methods: Array methods are functions built-in to JavaScript that we can apply to arrays.

String Methods: String methods help you to work with strings.

Object Methods: Object methods help you to work with strings.

Date Methods: Date methods allow you to get and set the year, month, day, hour, minute, second, and millisecond of date objects, using either local time or UTC (universal, or GMT) time.

Document Object Methods: JavaScript Document object is an object that provides access to all HTML elements of a document.

Number Methods:The Number object contains only the default methods that are part of every object's definition.

Math Method: Math is a built-in object that has properties and methods for mathematical constants and functions.

Window Object Method: The window object represents an open window in a browser.

RegExp Methods: Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec() and test() methods of RegExp, and with the match(), matchAll(), replace(), replaceAll(), search(), and split() methods of String.

LEARN TO CODE AS AN ABSOLUTE BEGINNER

Mekarosi — Sat, 07 Aug 2021 22:30:25 +0000

I was fortunate to have a mentor guiding me and pointing out the pitfalls while learning to code. At that time, I was tempted to believe that I could learn to code in 3 months and become proficient. However, the truth is learning a programming language is similar to learning any human language, such that you have to start by learning the ABC (alphabets), syntax, and logic.

Most beginners usually believe that learning to code is a piece of cake. They glance through it and assume that is the best method.
It has been four years since learning to code, and I have realized that there are steps to follow to make the learning process easier and faster without getting overwhelmed.

Deliberate practice and often guided by an expert skilled coach or mentor (someone with an expert eye), according to bestselling author Daniel Golemon, these coaches and mentors are offering feedback in specific ways to improve and without such feedback, you don’t get to the top ranks. This feedback matters and your concentration does too, not just the hours.

Ways to mastery

• The best way to get better at something is through deliberate practice, which means practicing to get better, doing activities recommended by experts to develop specific abilities, identifying weaknesses and working to correct them, and intentionally pushing yourself out of your comfort zone.

• Learn by studying experienced developers’ well-written codes and understanding what output every line of code is giving.

• Do not forget that what you think often stays in your memory. For each line of code you learn, reminisce on it continuously.

I have always loved using computers since a young age, so I loved and embraced the idea of learning to code. I started learning to code four years ago. Thus far, I have realized that learning a programming language is literally like learning any human language like French, Yoruba, or English.

We all know coding is simply using the syntax of a programming language to communicate with the computer, to output a given instruction.

For a beginner, coding can be overwhelming, frustrating, and intimidating especially, if you are not patient and highly interested. However, while learning how to code, I figured out there are some stages to follow to make your learning curve faster and seamless.

I have highlighted below, stages I followed that have helped me while going through my coding journey.

Stages in learning to code

STAGE 1

Syntax stage

Start by learning the syntax of the programming language. Languages have their syntax, which is the fundamental of any language.

This stage is of importance because it will help you understand the basics of the language.

There are tons of sites online that you can use to learn the syntax of any programming language of your interest.

STAGE 2

Algorithm/problem-solving stage

The algorithm/problem-solving stage is the stage where you use the syntax you have learned to write an algorithm to solve problems. This stage is aimed at improving your logical thinking skills, mathematical skills, and problem-solving skills.

Some resources that helped me at this stage were

• Free Code Camp

• Khan Academy
• W3Schools
• Upskill

• Code Academy
• Udemy
• Codewars
• Code Conquest
• The Odin Project
• Code Avengers
• Coursera

STAGE 3

Tools stage

The tools stage is the stage where you start to learn how to use important tools that are necessary to the code learning process. Some of these tools are

• Debugging tools
• Code editors
• Version control tools e.g. Git
• GitHub and GitLab etc.
• Chrome Inspect tool
• Deployment tools/platforms (Heroku, Netlify) etc.

STAGE 4

Technique stage

The Technique stage is where you learn techniques that are important to the programming language you are learning.

Some of these techniques are

• OOP (Object Orient Programming)
• Variables
• Methods
• Functions
• Higher order functions/closure/promise etc.
• Array or Lists
• If/Else statements
• Loops
• Classes and objects
• Exception handling
• REST Model (http methods/verbs)
• MVC Models
• Data Structures
• Trees, maps, and more.
• Frameworks like: bootstrap, tailwinds, node.js, react.js, Django, Flask, and Rails etc.

This is the barrier to entry stage and a lot of patience and persistence is required because there are lots to be learnt at this stage.

STAGE 5

Read to understand stage

“Read to understand stage” is the stage where you should read and understand documentation and also understand how other developers write their codes. At this stage, you can start applying all you have learned so far to continue to improve your understanding of the programming language.

Some ways to learning at this stage are by using

• Medium
• Stack overflow
• Programming Documentations and write-ups
• Framework Documentations etc.

You will also understand more about the industry, how things are done, the latest trends, and how things evolve in the industry at this stage.

Your ability to keep yourself up to date about the industry will improve at this stage.

STAGE 6

Implementation Stage

The implementation stage is the stage where you implement and apply all you have been learning. At this stage, you can recreate other people's well-written codes and apps. This stage will help you solidify all you have learned so far and also improve your debugging skills. More so, you can at this stage figure out which of the stage you need to improve on.

YouTube video tutorials could be helpful at this stage.

STAGE 7

Create Stage

At the “Create Stage”, you learn by creating simple apps, using all you have learned thus far, you could create simple apps like

• TODO app
• Weather app
• Calculator app
• Your portfolio etc.

This is the stage where you get your feet wet and start using learned skills and tools. Lots of logical thinking is required at this stage.

STAGE 8

Practice Stage

The Practice stage is where you continue to practice and add more features to your created apps and expanding your coding skills. At this stage, most people get tempted to rush into learning another programming language, but I strongly suggest, keep practicing and immerse yourself into the programming language you have been learning otherwise, you stand the chance of completely forgetting all you have learned.

At this stage, it is advisable to collaborate with other developers ( Chingu.io provides a great avenue to collaboration) to further sharpen your communication and collaboration skills. Also, don’t be afraid of criticism because it will help to your betterment.

STAGE 9

Internship Stage

To completely immerse yourself into understanding how to code, the internship stage will help you understand the real-life applications of your whole learning process. At this stage, you start building up your technical experience in the working environment.

You will learn to follow standards and best practices. And more so, learn to work with scheduled timing to completing apps.

Tools like
• JIRA
• ASANA

maybe necessary to help meet deadlines.

Conclusion

Generally, learning any skill requires deliberate effort to attain mastery. I must mention these are the stages I followed to learning to code, and as always, there are different possible ways to getting things done. The stages named above helped me become a better software developer.

As a coding instructor, teaching others has also helped to improve my coding skills.

Hopefully, this write-up could help someone learn to code as an absolute beginner without becoming overwhelmed and frustrated.