When I started my Software Engineering Internship this past summer, I knew I wanted to work with front-end technologies - and React was one of the first things that came to my mind.
However, I didn't know where to start. With things changing very quickly in the JavaScript community it was hard to know what to do first.
After an extensive learning process, I finally began to understand the tools available to me. Now, I want to share them here so that new developers can become productive more quickly. Here are the five things you should do / know when first starting out with React!
1. Introducing JSX: HTML and JavaScript together?
From React's own documentation:
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
JSX stands for JavaScript XML. It's a syntax extension to JavaScript and it is used in React projects - meaning it is compiled into JavaScript. It may look just like a templating language at first, but it also adds all of the capabilities of JavaScript.
At a high level, JSX is actually compiled to JavaScript through a "transpiler" called Babel. JSX in a React project provides syntactic sugar for the React.createElement() function. If you use the tool at https://babeljs.io/repl, you can easily see what your JSX code is compiled into.
For example, if you use JSX in your React application you could write:
<div className="sample-class">
<h1> Hello World </h1>
</div>
The implementation of the code in raw JavaScript becomes:
React.createElement(
"div",
{
className: "sample-class"
},
React.createElement("h1", null, " Hello World ")
);
Furthermore, when getting started with React, something important to know is that the React DOM uses the camelCase property naming convention instead of HTML attribute names.
Something that specifically confused me when starting out was the fact that the class attribute in HTML is referenced as className in JSX (because of class being a reserved word in JavaScript). JSX is closer to JavaScript than HTML - knowing all of the syntactical features within JSX will set you up for success when working more in-depth with React.
2. Immutability is a key concept
When learning JavaScript and getting in-depth into concepts in React, there is no way to get around the importance of immutability. So what is immutability? Well, it's the opposite of mutable, which means changeable / able to be modified. So, immutability in the context of development means something's value cannot be changed or modified (such as a variable or object).
For example, take the following object
const object = {
foo: 'bar'
};
object.baz = 'qux';
In the example above, we are modifying the object by directly adding a new key value pair (baz = qux). A better approach keeping immutability in mind would be:
const object = {
foo: 'bar'
}
const modifiedObject = {
...foo,
baz: 'qux'
}
I'll point you to the Redux documentation for a more detailed overview of why Redux requires it (which is often used alongside React).
Immutability has performance benefits (due to reduced memory usage) and it causes less bugs. In contrast, mutation of variables can often go unnoticed and produce unexpected side effects. Dave Ceddia gives an in-depth overview of the importance of immutability here if you want a great starting point.
3. Props: How Data Flows In React
Without going into too much detail, the concept of props (and learning how data flows in React) is one of the most fundamental concepts you will want to learn. You can think of props like you think of attributes in HTML.
Props (short for properties) are a way to pass arguments into components. Props are passed in one direction, down into components.
For example, let a child component be written as follows:
class Navigation extends React.Component {
render() {
return <h2>Link to: {this.props.tile}!</h2>;
}
}
Then, the parent component could reuse the Sidebar component as many times as needed:
class App extends React.Component {
render() {
return (
<div>
<h1>Navigation</h1>
<Navigation tile="Home" />
<Navigation tile="About Us" />
<Navigation tile="Contact Us" />
</div>
);
}
}
The syntax will look different in functional components, but the approach is similar. One important thing to know is that props are read-only, and components that receive props must never modify them.
This directly leads into the concept of state. While props are read-only, state comes in if you need to keep track of data that can change.
When getting started with React, you'll want to familiarize yourself with Props and State, and get comfortable with how data flows in React applications.
4. Class-based Components vs Functional Components
When I first started researching React, I was scouring through documentation, videos and articles available online. I shortly found out that in 2019, React 16.8 introduced a new feature called Hooks, in which you can use state and other React features without writing a class.
If you're just getting started with React today, It's important to understand the difference between class-based components and functional components so you aren't confused when looking at guides and documentation online.
At a general level, class-based components are the original way of using lifecycle methods and incorporating state into a React application. Functional components are "stateless", but allow for the use of "hooks" to where you can reuse stateful logic without changing the component hierarchy.
Amelia Wattenberger wrote a wonderful guide here, if you want a starting point to explore the topic more.
5. Install developer tools!
There are a few tools that are incredibly helpful to use when first starting out with React projects. Because logic is split into reusable components, the developer tools allow you to visualize the component tree within a React application (as well as props and state assigned to each component).
Also, be sure to install useful packages/extensions in your IDE/Text Editor to make it easier to work with React! If you use VSCode you can use this React Extension Pack. Other major text editors (like Atom) will have similar extensions readily available to get you started right away. The syntax highlighting feature goes a long way in making React code more readable, particularly because React is typically written in JSX.
In Conclusion
Like anything hard, getting used to the paradigms used in React takes time. I hope this helps as a starting point for those just getting started with using the library.
If you have any suggestions for how this article can be improved, feel free to reach out!
Top comments (0)