Release 0.2 update

Going back to my anumargak project I forgot to run tests on my PR which sure enough had errors which were not showing up during my local testing.

Problem is that the way in which the contributor suggested I perform this method is causing a testcase to fail and the only other way i can think of to get around is to do another method or not do what the contributor asked, so i posted a question in the issue regarding this for some help.

I managed to fix the failing tests but the contributor asked me to also contribute a test case for the “print” function which I do not understand the rationale behind because it is not a function which returns a value , it just prints stuff to the console and also I have no history of writing test cases and time is of the essence so i doubt i will get around to it.

Anumargak was the first open-source project I worked on, the contributor seems like he is not a native English speaker so working on the project deemed to be more time intensive than the “goodFirstIssue” tag made it seem like, unfortunately I do not think I will be able to get a good pulled PR into this project because there are other things I want to spend my time on.


titanium-codemods

PR for titanium-codemods

Real easy contribution, just made a test file, ran ‘npm insall chalk’ then used

const chalk = require(‘chalk’);
console.log(chalk.red(“hi, i am using color”));

inside the file, tested it, it worked.
Forked the repo, implemented the 3 line changes and pushed it.

issue -> https://github.com/ewanharris/titanium-codemods/issues/1
PR -> https://github.com/ewanharris/titanium-codemods/pull/4



IglooAurora

PR for IglooAurora

Never worked with REACT before, very confusing to begin with.
Hard time because no documentation on how to start the app because npm start and yarn build both take around 2.5 minutes to build and not sure how to start the server otherwise.


installed https://www.npmjs.com/package/webpack-dev-server to hopefully make development easier, never used it before. It didn’t work and completely broke the project, so I am just going to rebase and work with npm start.

First I need to learn how REACT works so I will take some time to read about REACT from their official page here ->

https://reactjs.org/docs/state-and-lifecycle.html

REACT

Overview

javascript library
JSX
killer feature, doesn’t update whole UI, only what has changed
components and elements are stringed together to create a framework
Objects are cheap to create
Tags are used to encase elements
keeping all tags const, is a great way to provide security for user inputs
Whether you declare a component as a function or a class, it must never modify its own props.
State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.

Examples

basic element
const element = <h1>hell, world</h1

Object
const user = {
name: “name”,
date: new date(),
school: {
name: “schoolName”,
address: “123 school road”,
},
}

WHat is a Component

function Component(props){
// can only return value between tags. if value is a prop than it needs to be encased by {}
return {props.user}

}

How to call a Component. The user variable is defined here, and we can make as many variables as we want

Component always starts with a capital letter otherwise it thinks we are referencing a tag

function Example(props){
return (
{props.name} {props.date}
)
}

To render something


ReactDOM.render(
, document.getElementById(‘root’))

To call 2 JSX elements inside a components, they need to be wrapped around a tag


function ExampleSub(){
return (
// without the div tag we would get an error,

trying to return 2 JSX adjacent elements

<div>

<p> hello </p>

<Example name=”Bob” address=”123 Bob Rd” />

</div>

)}

Impressions

You can create components within components within components and reuse components and structure your hierarchy however you want with these components
Components create their own props. Or can be assigned props from other components and/or objects and/or elements.
This makes REACT very flexible

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s