How I finally grokked React and made my first contribution to a project on Github
Sometime ago I joined a discord that you can join at the following link: https://discord.gg/M3yEGnwk.? It’s called All Things JS and started as a meetup group in Houston, Tx.? Most communication is done online through the discord with the occasional meeting IRL.? It has two projects that members are contributing to, a website for the group and the Taskboard app which is kind of like a simplified version of Jira.
So in this post I’m going to talk about how through this group I managed to finally understand React enough to actually contribute to the group's projects.? But first a little bit about my struggle with learning React.? Or to go straight to the code search tldr.
So a couple of years ago after having gone through freecodecamp’s front end developer course I decided to start learning React.? I found a course on Udemy and even found a tutor from Latin America through facebook in exchange for English tutoring.? After a couple of lessons nothing was clicking.? I gave up on React for the first time, but I didn’t give up on programming.
I came across a reddit post discussing React.? A user mentioned that a lot of people’s problems with React isn’t really with React but Javascript.? Many people learning to code rush through JavaScript to get to React to get a job they said.? That inspired me to go back to learning Javascript.
When can you really say that you know a language?? I tried reviewing the freecodecamp material.? Looking back now I realize that freecodecamp is a very good introduction to JavaScript but it lacks depth.? I reviewed that material and realized I had forgotten some things and there were some things that I never understood in the first place.? For example creating objects in JS.? Objects can have properties which are just variables but also functions which are called methods for dealing with those properties.? Then there is the “this” keyword for addressing those properties within the object.
Some time passes, I make some simple projects and I think I’m ready to get back into React. I tried learning through the official docs and do the tic-tac-toe game that they have.? I just copied the code without understanding anything.? Now you’re probably thinking in your head “skill issue”.? Yup and I gave up again.
I went back to learn some more JS.? I learned about modules and the different standards such as CommonJS and ES.? But I didn’t stop there.? I learned how to build a full stack app with NodeJs and MongoDB.
tldr
Around this time I discovered the All Things Js group. I mentioned my difficulties with understanding React.? One member told me about how it’s all about components.? I realized that all the tutorials I was using were so complex that they distracted from the core concept of React.? So I went back and created my own super simplified tutorial for myself.? I started up a React project with Vite but I deleted almost everything that it comes with and left the following code.
export default function Main() {
return (
<div>
<p>text from from p tag in main component</p>
</div>
)
}
I came up with this code which has just one component called Main. I pretty much just looked at the other tutorials and stripped away everything that wasn’t essential for the main component.
Then from this we can add things such as props/variables:
export default function Main() {
const? mainText = “Prop text from main component”;
return (
<div>
<p>text from p tag in main component</p>
<p>{mainText}
</div>
)
}
Result:
text from p tag in main component?
Prop text from main component
Then you can create another component to use inside the main component.
function ChildComponent(){
return <p>text from child component</p>
}
export default function Main() {
const? mainText = “Prop text from main component”;
return (
领英推荐
<div>
<p>text from p tag in main component</p>
<p>{mainText}</p>
<ChildComponent />
</div>
)
}
Result:
text from p tag in main component?
Prop text from main component
text from child component
You can use props/variables from the main component inside of child components.? I will shorten ChildComponent to CC.
function CCWithProp({prop}){
return <p>{prop} prop inside child component</p>
}
{/*Take note of the curly braces around the prop/argument*/}
export default function Main() {
const? mainText = “Prop text from main component”;
return (
<div>
<p>text from p tag in main component</p>
<p>{mainText}</p>
<ChildComponent />
<CCWithProp prop={mainText} />
</div>
)
}
According to my maybe naive understanding it’s abstracting away the document.getElementById(‘root’).appendChild(ChildComponent) process. This is essentially what React is and all the tutorials I tried to use would quickly gloss over these things as if they were written for someone reviewing rather than for a noob.? They quickly go into using buttons and hooks and creating these complex systems.
So finally understanding these concepts I felt confident enough to start contributing to projects.
Now to the Taskboard.? Before really looking at the tasks I tried to familiarize myself a little with the codebase.? I saw in Github before cloning the repo that the language is 95% typescript.? I watched a short video on typescript on YouTube then went to the docs and read a little more there.? After that I cloned it and took a look at the package.json.? I noted what dependencies I was familiar with and which ones I was not.? I did some reading on what was new for me, which included react emotion, material ui and firebase.
Then I finally looked at the Taskboard tasks.? All the tasks on the task board are for the task board.? They are divided into frontend, backend, and devops.? I focused on the frontend because that’s what I’m most familiar with.? I saw one I thought I could do called “Display category of task on card and in summary”.
To do this I looked at the code to see how a task is rendered.? I found its schema or in this case it would be called type props/ interface props.? I learned I could display the category with “{task.category}”.? Simple enough. Then I was tasked with styling it.? A little bit more of a challenge.? It needed to be similar to the way the assigned user was displayed.? I saw that assigned user was being sent as a prop to <Chip />.? I put that code in chatGPT and learned that it was Materialui code.? I looked up <Chip /> in the Materialui docs to see how to modify it to get the desired look.? I also learned about Material Ui’s <Typography /> which was used to render some other elements.
After that I was challenged to turn this into its own component.? I got to use what I learned about modules.? In this case this project uses the ES module standard rather than the CommonJS standard that I learned about from NodeJs.?
I copy and pasted the code into its own file and imported it into the files where I wanted to use it. An error that came up trying to do that was “ Property 'task' is missing in type '{}' but required in type 'Props'.”? I didn’t fully understand what was going on here.? I searched this error in google, which led me to this stack overflow question https://stackoverflow.com/questions/39908666/property-is-missing-in-type-error.??
So this error came because I was copying code without really knowing what it was for but I saw it in the other modules.? Lesson learned.? I did eventually figure it out.? This is basically saying that I created a function that takes arguments which are required when calling that function.? I called my component <TaskChips /> and it was required that I send it a prop like so < TaskChips task={task} />.
I checked the results in localhost and everything looked good. So now it was pretty much ready to do the PR so it could be reviewed.? But there was something I was forgetting.? I needed to create my own branch.? I can’t just push the code straight to master.? A quick google search and I learned about the commands git checkout and switch in github.? I created a new branch called taskboard-dev.? I pushed my code there and then did the PR.? Then I galloped off into the sunset to conquer new foes.