As of this writing, I am in the last stack of my coding boot camp journey. Whew! It has been a rollercoaster ride of emotion, but I have learned a great deal about different stacks and technology related to web development and the engineering process.
As of now we are learning the MERN stack. MERN is a tech stack that consists of four technologies that help with Full Stack development with JavaScript. Mongo DB, Express, React, and Node.js. We are focusing on the front end right now which is React!
React is a very popular front-end framework developed by the good ol' folks at Facebook. It's very popular among developers and has a rich ecosystem to help aid in progressive UI/UX design . Lets get in to what I have learned so far over the last week. Enter Components
Components
Components are basically JavaScript functions that take in HTML to render views to the user. It is a way to isolate various parts of an applications front-end into reusable code. We can take a form for instances and design the component with all of our HTML and CSS magic and compose a component that could be used in other projects to help make the development process more efficient.
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
It took me a minute to wrap my head around what exactly this concept is because coming from the Python and Flask stack we could develop our views from the MVC model into one file, never separating specific elements of the file. With components we can develop a nifty Navbar or a button and use those items in any project we like later.
I am learning very quickly that React has a decent learning curve for new developers. We have spent about 3 weeks learning about just React and how it works with the DOM. I couldn't imagine trying to pick this up on my own. Luckily we have great communities such a Code Newbie and talented senior dev's who love to help newbs like me !
For further reading check out [(https://reactjs.org/docs/components-and-props.html)]
Top comments (0)