"Syntatic Sugar."
This concept defines what JSX does. It is a common coding concept for something that isn't necessary but makes coding easier. This term was the first thing I heard about React.
Hi, I'm Aaron. I'll be going over the things I've learned as I learn them in my coding Bootcamp. I have experience as a Computer Science/Information Technology Tutor, work in the field of programming part-time, and will be done my coding Bootcamp at the end of September. Additionally, I finish my Master's degree in IT (with a concentration in Web Design/Development) in August. I am also a freelance web developer.
That said, I'm no expert. I don't think anyone is an expert until they have reached a certain level of failure. If I could track stats on how many errors I've been faced with and how many I get per hour of coding, there is some number there that would label me as an expert at some point. Let's say it's 100,000 errors and/or 60 errors/hour. I'm not at our 100k/60e/h yet. I just want to share my experience with React to help you learn it or reflect on what you already know.
This series will act as a "guide" to those who are attempting to dive into the world of React and want to know how to get started.
So, let's get started.
🍬 Syntatic Sugar 🍬
Syntatic Sugar is commonly defined as:
A coding convention that enables developers to create clearer and/or more concise code.
How does this apply to React? Well, let's identify what React is. One quick Google search identifies that React is a framework that was created by Facebook. It uses JavaScript to facilitate the development of single-page web apps (SPAs) to improve the user experience. This is done by accomplishing the following:
- Removing the need to reload a page after a form is submitted, etc. (Any time the DOM is updated)
- Increasing the functionality presented to the user by removing the complexity knowledge required by the developers.
Consider the following code:
<form method="POST" action="/" role="form" id="login">
<input type="text" placeholder="email">
<input type="text" placeholder="password">
<button type="submit">Submit</button>
</form>
If a user were to log in, the page would refresh and frustrate the user who has come to expect that she should not have her time wasted by these ridiculous < 1s load times.
So how do we use React?
🎆 Babel 🎆
Babel is transpiler that converts JavaScript to JavaScript. It takes source code and makes it source code that is more difficult to read. This is where the term Syntatic Sugar comes into play. The way that elements are formally created in React using React.createElement('div', null, 'Hello World');.
That's not that fun to work with. Instead, we can create elements using JSX: <div>Hello World</div>;. There's a little more to it to get it to work in browser but this is much more familiar. Babel will take JavaScript that looks eerily similar to HTML. That is because JSX is JavaScript XML. XML is similar to HTML because they are both markup languages.
The rest of this series will cover React utilizing the JSX syntax. There is a lot more that goes into developing a React app like WebPack but there is much to cover with regard to actual syntax and development and I'd rather spend my time talking about setup and syntax.
There is a lot that goes into React, so before we even begin working on something, I think it's best that we cover what is to be expected in the development of a React app.
🔳 Components 🔳
A component a piece of reusable code that can be implemented into an app. I like to think of components as mY pUzZlE...they are the cogs that move the machine that you're building. A component commonly looks like a function:
function Welcome(props) {
return <h1>Hello, Aaron</h1>;
}
This component can be reused to render an h1 element that says Hello, Aaron to the screen. Components are important to understand because they are relatively confusing. Anything confusing is always worth understanding.
If you look above, you can see that the Welcome function has a parameter of props. Props are properties that can be used to change the attributes of the component that is being rendered. This can be something like a data point or a number or more. They allow a developer to create a component and change something about it "on the fly" when utilizing it.
How about another example? Our code above has been modified to include a prop we would like to utilize when we render our Welcome component:
function Welcome(props) {
return <h1>Hello, {props.firstName}</h1>
}
When we decide to render our h1 element it would look like this:
<Welcome firstName="Aaron" />
Take a look at this example here:
The component is created in its own JavaScript file and imported by the App.js file in order to be used there. The web page renders the App.js file, which has our Welcome component in it to present
Hello, Aaron
In order to set up a space to work and develop your own React app, you'll need 125MB plus or can work with me next week as I go through the process of creating a React app from scratch on Code Sandbox.
This has been me, sharing React from a Bootcamper's perspective.
Til next week. ~💠Aaron💠
Top comments (1)
Thanks for this series, I saved! Help a lote