How to Begin Learning to Respond: A News Guide to the United States | Education

After its introduction in 2013, it didn’t take long for React to become the dominant framework for JavaScript-based applications. Its intuitive and declarative front-end markup (known as JSX) and strong community of support make React a stable platform that anyone can rely on. Companies like Facebook, Instagram, Netflix, and Airbnb trust React to create scalable and stable frontends for their apps.

What is React and why should you learn it?

(Getty Images)

In 2010, the Internet was becoming more interactive. Web applications were popping up everywhere, thanks to the power of JavaScript and HTML5. Very quickly, the developers pushed the limits of how much of an app had to be Html augmented by JavaScript, as opposed to JavaScript by itself, without HTML.

Around this time, the developers at Facebook created React. While not the first JavaScript framework to appear, React’s unique approach to building components with JSX, using a shadow document object model and making the interface respond to changes in data, is still one of its strengths. A shadow DOM is like a copy of a web page that the computer stores in memory so that it can scan and edit it faster.

Mastering React is one of the most sought-after professional skills out there.

Gianina Skarlett, front-end engineer at Forethought Technologies, says these job prospects are a primary reason to look into React. “There are so many jobs for React developers,” Skarlett says. “React has only been in the industry for five or six years. You’re not competing with someone who has 20 years of experience with React, so I think this point is really valuable.

Because it is so popular, there are many resources to learn React. Everything from YouTube videos to paid online courses and official React documentation can be a solid starting point for your training.

React and JavaScript

Before you dig too deep, it’s important to know that React is right Javascript. Newbies often jump to React because it looks so simple compared to JavaScript, only to quickly find themselves stuck because they don’t understand the fundamentals of JS. Before learning frameworks, it’s important to dive into the basics of programming as a whole.

“If you learn Web development, React is the technology you’ve probably heard of. But what I’ve personally seen from people who get started too quickly is that they don’t know where React starts and where JavaScript ends, ”says Joe Karlsson, Developer Advocate at MongoDB. “A lot of people think things in React are what JavaScript is, and they’re surprised when they’re not.”

What are the steps to start learning to react?

Let’s take a look at some best steps to start learning React and the modern JavaScript ecosystem as a whole.

Before you start with React …

It can be tempting to jump right into React before you have mastered the basics of JavaScript. But a framework isn’t just about a language, and you’ll need a few essential tools to get started.

The first thing you need to know is JavaScript. A solid foundation in the language and its conventions will help you immensely when you start to learn React. Everything from package managers and configuration to components and business logic in React is in JavaScript, so knowing it well is the first step.

Karlsson says the next step is to build something from scratch. “Try to build a simple web application… that doesn’t use any framework,” he says. “You want to have basic functionality with JavaScript… before you get started. “

Then you will need to understand a bit about packages and package management, especially with NMP Where Wire. Both are JavaScript package managers that let you declare dependencies, or pieces of code that help you achieve certain functionality without having to write them from scratch.

Resources and references to get started

Learn JSX, State, and React Hooks

Once you have familiarized yourself with JavaScript and packages, you are ready to start learning React.

First, dive into JSX and React components. Components are the building blocks of any React application. You can think of components as reusable pieces of code that may contain different content or have slight visual differences, but are ultimately the same idea.

For example, a large header image with text on it at the top of a page – commonly referred to as a hero – is an example of a component. You can have multiple pages on your site or app that include heroes, but all of them have different images and text. Understanding how to break up your application into components is important, and knowing how to write functional components using component composition, higher-order components, and other patterns is essential for writing good React code. You will also need to learn how props (short for “properties”) are used to provide data to components and change their appearance.

React can also provide interactivity. This “business logic” code is typically handled in React by means of hooks, which call code to be executed at certain times, to control the data that controls the application – called state – and countless other pieces of business logic.

“The way I (learned the hooks) was just the React documentation,” Skarlett explains. “These are trial and error, small projects, applications to be made. From there, it ends up clicking.

A third important element in learning React is understanding state, a data object that makes your application interface “react” in response to changes.

A good example is a counter. You have a large number on the screen. Next to it is a button that increases the number when clicked. You would use a hook to create a state for the current account and a function to increase the state of the account when the button is clicked.

State management

The larger your application becomes, the more states your application needs to function. All of this state can get cumbersome, especially when many components need “knowledge” of some element of that state. An example is when user settings, dashboard, and other parts of an app need to know which user is logged in. that passing quickly becomes a mess.

Nowadays, many people are launching their own condition management systems using hooks, with good results. While there is nothing wrong with this approach, several other libraries exist for state management, such as Redux and MobX. These libraries allow you to create state “stores” which are then updated and accessible from anywhere in the app – no need to go through the accessories.

Skarlett says the secret to big, clean apps is good health management, but don’t overdo it. “At some point… you have to understand your condition… Just because you have a condition doesn’t mean you need (Redux). Some states are used by a single component, and it really doesn’t need to be shared.

Being able to handle large amounts of state on a large application will quickly take you from a novice React developer to an intermediate developer.

Immerse yourself in advanced React learning

Once you have mastered the basics and some intermediate concepts in React, the advanced concepts you can learn are almost limitless. Just staying on top of best practices will help you keep learning every day.

In React, you will most often source your data from external sources called application programming interfaces – APIs – usually RESTful API. Learn how to get data from these sources using the native extraction library or advanced external libraries such as Axes will take your development to the next level.

GraphQL is another type of API and query method that returns more precise data. Using a library like Apollo to get and manipulate data in a GraphQL API can be useful in a variety of React-based projects.

For Karlsson, the most important thing an advanced React developer should understand is the phantom DOM. “Understanding the DOM … this is how the browser interfaces with the user interface … React has a representation of the front-end in memory so it can perform quick operations on it, but people write code that doesn’t take advantage of it, “he says.

React vs Angular vs Vue: what’s the difference?

If you’re still wondering which framework to start learning, you might be trying to choose between React, Angular, and Vue. Personally, I recommend learning some of them. Each offers a JavaScript framework first to create user interfaces while having their own strengths and weaknesses.

React boasts a strong community and a large volume of third-party libraries to help you get up and running quickly. Seen offers a simpler approach to frameworks, allowing you to use as much or as little code as you want. Angular is generally more complex and less widely adopted, but is very reliable.

“The best tool for the job is the one you are most efficient with. This should solve the problems you are trying to solve, ”says Karlsson. “Most front-end frameworks do pretty much the same … I prefer React because that’s what I know.”

How to be successful in studying React

If you really want to learn React and prepare for a career as a React developer, here are a few things that can help you:

  • Join online communities. There are many groups online for people who work hard to learn React. The community is largely positive and encouraging for new people.
  • Use Twitter. It is packed with professional developers and is a constant flow of knowledge about the latest techniques in React development.
  • Practice every week. Find a new idea to learn each week through a project. Create simple projects like to-do lists and counters, and work up to full-fledged web applications. Use free and public APIs like Open Movie Database or PokéAPI to build an app to display information from external sources.
  • Find a mentor. Having someone to answer questions, give feedback on your code, and help you with difficult problems is invaluable. If you can’t find someone near you, search online for people who are ready to help.
  • Do not abandon. Learning something new is difficult. Even seasoned JavaScript developers can be frustrated when learning new frameworks, and React is no different. Keep going, keep learning and never beat yourself up about what you did yesterday. Always work to be better every day.

About Timothy Cheatham

Check Also

David Beckham bids farewell with 2nd MLS Cup title as LA Galaxy defeats Houston Dynamo, 3-1 (video)

Landon Donovan of Los Angeles Galax hoists the trophy as they celebrate after beating the …

Leave a Reply

Your email address will not be published.